您现在的位置是:首页> 网站开发> JavaScript
jQuery QQ表情插件包使用方法jquery.qqFace.js
- 4719人已阅读
- 时间:2018-06-15 18:28:17
- 分类:JavaScript
HTML页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery.qqFace.js"></script>
2.body中需要有文件框和<span class="emotion">表情</span>这句如下例子
<div class="comment-box"> <textarea placeholder="您的评论可以一针见血" name="comment" id="comment-textarea" cols="100%" rows="3" tabindex="1"></textarea> <div class="comment-ctrl"> <span class="emotion"><img src="__STATIC__/index/images/face/5.png" width="20" height="20" alt="" />表情</span> <div class="comment-prompt"> <i class="fa fa-spin fa-circle-o-notch"></i> <span class="comment-prompt-text"></span> </div> <button type="submit" name="comment-submit" id="comment-submit" tabindex="5" articleid="{$article.id}">评论</button> </div> </div>
3.CSS调整.根据自己情况调整.主要是.qqFace
.comment-signarea{background-color:#f6f6f6;border-radius:7px;padding:30px 20px;text-align:center;margin-bottom:20px} .comment-signarea h3{margin:0;padding:0;margin-bottom:15px;font-weight:normal;font-size:18px;cursor:pointer} #respond .comment{position:relative;padding-left:46px} .comment-title{font-size:12px;color:#999;float:left;margin-left:-46px;width:36px;text-align:center} .comment-title .avatar{height:36px;width:36px;border-radius:50%;margin-bottom:5px} .comment-title img:hover{cursor:pointer;-moz-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;transition:all .8s ease-in-out;-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)} .comment-box{border:2px solid #ccd4d9;border-radius:2px;padding:4px 4px 0;background-color:#FFF;position:relative;z-index:10} #comment-textarea{width:100%;resize:none;overflow-x:hidden;overflow-y:auto;border:0;line-height:22px;font-size:14px;outline:0;color:#666;height:68px} #comment-textarea::-webkit-scrollbar{width:3px;height:3px;background:#CCC;border-radius:5px} #comment-textarea::-webkit-scrollbar-button{display:none} #comment-textarea::-webkit-scrollbar-track-piece{display:none} #comment-textarea::-webkit-scrollbar-thumb{background:#999;border-radius:5px} #comment-textarea::-webkit-scrollbar-thumb:hover{background:#39c} .comment-ctrl{background-color:#fbfbfb;height:36px;margin-left:-4px;border-top:solid 1px #f2f2f2;z-index:5} .comment-box span.emotion{color:#666;position:absolute;left:-2px;bottom:-2px;height:38px;line-height:38px;padding:0 10px;cursor:pointer} .comment-box span.emotion:hover{color:#39c;-webkit-transform:scale(1.1);transform:scale(1.1);-webkit-transition-timing-function:cubic-bezier(0.47,2.02,0.31,-0.36);transition-timing-function:cubic-bezier(0.47,2.02,0.31,-0.36)} .qqFace{margin-top:4px;background:#FFF;padding:2px;border-radius:5px;-moz-box-shadow:0 0 6px rgba(51,153,204,.3);-webkit-box-shadow:0 0 6px rgba(51,153,204,.3);box-shadow:0 0 6px rgba(51,153,204,.3)} .qqFace table td{padding:0} .qqFace table td img{cursor:pointer} .qqFace table td img:hover{-webkit-transform:scale(1.05);transform:scale(1.05);-webkit-transition-timing-function:cubic-bezier(0.47,2.02,0.31,-0.36);transition-timing-function:cubic-bezier(0.47,2.02,0.31,-0.36);-moz-box-shadow:0 0 5px rgba(51,153,204,.9);-webkit-box-shadow:0 0 5px rgba(51,153,204,.9);box-shadow:0 0 5px rgba(51,153,204,.9)} #comment-submit{position:absolute;right:-2px;bottom:-2px;background:#39c;border:0;border:2px solid;border-color:#39c;border-left:none;border-top:0;padding:0;width:100px;height:38px;color:#FFF;outline:0;border-radius:0 0 2px 0;font-size:16px;z-index:6} #comment-submit:hover{background:#fbfbfb;border-color:#ccd4d9;color:#39c;border-top:solid 1px #f2f2f2} .comment-prompt{cursor:pointer;display:none;text-align:center;font-size:14px;line-height:38px;color:#39c} .comment-prompt:hover{color:#f46d6d}
4.在调用的当前页面加上如下函数
$(function() { $('.emotion').qqFace({ id: 'facebox', assign: 'comment-textarea', path: '__STATIC__/index/images/arclist/' //表情存放的路径 }); });
现在就可以发表情了.点击小表情发布出去的是类似[em_5]之类的代码,我们保存数据库时,应该把该代码替换成实际的图片.这样发布后才能正常的显示出来.
在我们存入数据库时,使用下面的函数进行替换.
function replace_em(str){ str = str.replace(/\</g,'<'); str = str.replace(/\>/g,'>'); str = str.replace(/\[em_([0-9]*)\]/g,'<img src="/static/index/images/arclist/$1.gif" border="0" />'); return str; }
上一篇:TP5验证器使用实例
下一篇:mysql主键和外键那点事