继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jquery 表情插件

大吉大利今晚学习
关注TA
已关注
手记 265
粉丝 36
获赞 142

         

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 onload="out();">

<h3>帖子详情<span ><a href="/community/bbs/postList">帖子列表</a></span></h3>

<div >

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

    <p>${post.content}

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

    </p>

    </div>

    <div >

    <c:choose>

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

       <p>暂无回帖</p>

    </c:when>

    <c:otherwise>

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

    <div >

    <p >

    ${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" ></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,后台就是一个保存回复信息和查询帖子和回复信息的功能,本要在这里就不写了,简单点就是增删改查功能。

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



打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP