jquery 表情插件

java版本帖子回复功能

由于要做一个发贴功能,发帖菜的是ckeditor插件,然后回帖,由于ckeditor的功能太多了,本人用的又不熟悉,又是一初来咋道的菜鸟所以就想找一个简单点的,看看网上的博格回复也基本是都是一个内容加上一个表情就Ok了,所以就找了一个表情回复的插件。

用这个插件了要导入一个css和一个js就可以了,非常方便,这是应为他用的东西都是别人网站上的,也就是线上的资源,如果断网或者不能上网就不能用了,这也是方便的代价吧。如果有大神看到后可以本地化希望通知本人一下,本人在此谢过。

两个插件我会附加上,有需要的可以下载。以下是页面代码,仅供参考:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="/community/css/jquery.sinaEmotion.css" />

<style type="text/css">

h1 {

font: 16px ‘微软雅黑‘;

color: #0000ff;

}

body{

font-size:13px;

}

</style>

<title>帖子详情</title>

</head>

<body >

<h3>帖子详情<span style="float:right;"><a href="/community/bbs/postList">帖子列表</a></span></h3>

<div style="border-bottom: solid;">

<p>${post.title }</p>

<p>${post.content}

<span style="float: right;"><fmt:formatDate value="${post.postTime}" pattern="yyyy-MM-dd hh:mm:ss"/></span>

</p>

</div>

<div style="border: gray;">

<c:choose>

<c:when test="${empty replyList}">

<p>暂无回帖</p>

</c:when>

<c:otherwise>

<c:forEach items="${replyList}" var="reply" varStatus="stu">

<div style="border-bottom: dotted;">

<p style="border-radius: 5px;clear: both;background: #f1f1f1;color: #888;padding: 1px 4px;">

${stu.index+1}楼&nbsp;${reply.userName}&nbsp;<fmt:formatDate value="${reply.replyTime}" pattern="yyyy-MM-dd hh:mm:ss"/>&nbsp;发表

</p>

<p><span id="replycontentid" class="emotion">${reply.content}</span></p>

</div>

</c:forEach>

</c:otherwise>

</c:choose>

<form action="/community/bbs/addReply" method="post" id="replyForm">

<h3>回复</h3>

<input type="hidden" name="postId" value="${post.id}"/>

<textarea rows="10" cols="80" name="content" class="emotion" style="font-size: 13px;"></textarea>

<input id="face" type="button" value="表情" />

<input type="button" value="提交" onclick="addReply();"/>

</form>

</div>

<br />

<script type="text/javascript" src="/community/js/jquery-1.8.0.min.js"></script>

<script type="text/javascript" src="/community/js/jquery.sinaEmotion.js"></script>

<script type="text/javascript">

// 绑定表情

$(‘#face‘).SinaEmotion($(‘.emotion‘));

function addReply(){

$("#replyForm").submit();

}

$(function(){

});

function out(){

var emotions=new Array();

emotions=$(‘.emotion‘);

var temphtml="";

for(var i=0;i<emotions.length;i++){

temphtml=emotions[i].innerHTML;

if(temphtml.indexOf("[")>-1||temphtml.indexOf("]")>-1){

emotions[i].innerHTML=AnalyticEmotion(temphtml);

}

}

}

</script>

</body>

</html>

页面上显示使用的是C标签,后台使用的是springMVC,后台就是一个保存回复信息和查询帖子和回复信息的功能,本要在这里就不写了,简单点就是增删改查功能。

因为常看别人的博客对自己有帮助,所以自己也想写写博客帮助别人,写的不好还请看的人见谅。

				
时间: 2024-10-09 18:10:13

jquery 表情插件的相关文章

经典qq表情插件(html+nodejs应用)

由于目前在接触聊天室项目,接到一个需求实现一个类似QQ表情.在网上找了一款jquery经典表情插件.下面介绍一个用法: HTML: 首先在html页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>    <script type="text/javascri

Jquery Media插件使用,解决在线预览及打开PDF文件

用到过PDF的媛媛and猿猿们,总会发现这大千世界之万能播放器插件,总能少了对媒体控制的接口. 你总会发现PDF无法像img图片一样正常加载展现出来,那么我们在通用语法的基础上拓展出了适用于预览及打开的PDF插件便于开发应用. 最主要的是使用到了一个jquery的插件jquery.media.js,使用这个插件就很容易实现了. 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverl

jQuery.fly插件实现添加购物车抛物线效果

样例 使用电商 APP 购买商品时,很多都有上图的红色小球抛物线效果,下面通过 jQuery.fly 插件来实现一个简单 Demo. 实现 简单思路: 确定抛物线的起始和终止位置: 通过 js 在起始位置创建一个 document 对象,作为红色小球: 通过 jQuery.fly 插件提供的fly函数来移动小球,移动至终止位置: 当小球到达终止位置后,通过fly插件提供的 onEnd 回调函数,将小球销毁: Demo 源码: <!DOCTYPE html> <html lang=&quo

asp.net 实现在线打印功能,jQuery打印插件PrintArea实现自动分页

使用的组件:jQuery打印插件PrintArea,有兴趣的可以研究一下. 使用方法略过,这里将介绍如何实现打印多页是可以分页. 现在提供两种方法思路: 1.根据特定的打印机型号和使用的纸张类型,然后用JS来算出每页多高,按照每张纸的高度来进行适当的增减高度.(这种方式缺点就是只能针对单中类型的纸张,计算十分的繁琐,要些很多加减法 -_-);). 参考A4纸高度的网页:http://www.jb51.net/office/word/67360.html 2.在如上一个思路的方式,试着查找能不能自

jquery.cookie插件使用

jquery.cookie插件是一个在浏览器端对cookie进行操作的,使用非常方便. jquery.cookie中的操作: jquery.cookie.js插件:百度即可下载 创建一个会话cookie: $.cookie(‘cookieName’,'cookieValue’); 注:当没有指明cookie时间时,所创建的cookie有效期默认到用户浏览器关闭止,故被称为会话cookie. 创建一个持久cookie: $.cookie(‘cookieName’,'cookieValue’,{ex

jQuery验证插件

学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(validate.js),是一款验证常规表单数据合法性的插件.使用它,极大的解放了在表单上繁杂的验证过程,并且错误提示显示的完善也增加了用户体验. 一.使用 validate.js 插件 官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation最重要的文件是valida

jQuery幻灯片插件Skippr

Skippr是一款带左右箭头,索引按钮,滑动切换效果并且轻量.快速的幻灯片 设置 引入jquery.skippr.css.jquery.js.jquery.skippr.js 注意jQuery必须在jquery.skippr.js之前 <head> <link href="css/jquery.skippr.css" rel="stylesheet" type="text/css" > <script src=&qu

jQuery图片插件自动轮播原理解析

经常看到项目要用到图片轮播效果,一般的操作流程都是先到网上找一个好看的JQuery图片轮播插件,然后看下demo,再配下参数.好了,关机下班回家 其余的就交给插件吧. 是不是感觉有了jQuery,世界变得那么美好呢. 本人最近用的一个插件是 jquery.carousel.js,官方网站是:http://richardscarrott.co.uk/posts/view/jquery-carousel-plugin 下面,我们来讨论一下图片轮播原理. 首先来个简单的demo 效果图如下: 这是个导

jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象

一.前提说明 Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 二.简单介绍 本文演示的是:jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象 $('#myForm').ajaxForm(function() { $('#output1').html("提交成功!欢迎下次再来!").show(); }); $('#myForm2').sub