前两天根据大佬的一篇文章给撸上了表情功能,现在分享下
首先我们在评论框下方添加表情按钮
就像这样,然后添加到合适的地方
<div class="OwO-logo" onclick="OwO_show()">
<span>OwO</span>
</div>
然后给按钮写点击事件,打开关闭表情列表
function OwO_show() {
if ($("#OwO-container").css("display") == 'none') {
$("#OwO-container").slideDown();
} else {
$("#OwO-container").slideUp();
}
}
然后写表情内容列表
<div id="OwO-container">
<div class="OwO OwO-open" id="qaq">
<div class="OwO-body" id="OwO-body">
<ul id="OwO-pp" class="OwO-items OwO-items-emoticon OwO-items-show" style="max-height: 197px;">
<li class="OwO-item" onclick="Smilies.grin('@(chaiquan)');"><img src="https://www.96sir.com/usr/themes/Destiny/images/OwO/chaiquan.png"></li>
<li class="OwO-item" onclick="Smilies.grin('@(chaiquanbugaoxin)');"><img src="https://www.96sir.com/usr/themes/Destiny/images/OwO/chaiquanbugaoxin.png"></li>
。。。。。。
</ul>
</div>
</div>
</div>
PS:这里建议单独新建一个
OwO.php
文件,然后<?php $this->need('OwO.php'); ?>
输出到评论框下方的合适位置
想要新增表情的话就添加一个<ul id="OwO-pp">
列表就可以了
这样基本完成了表情的展示,接下来实现点击表情插入到评论框里,这里用到核心JS
Smilies = {
dom: function(id) {
return document.getElementById(id);
},
grin: function(tag) {
tag = ' ' + tag + ' ';
myField = this.dom("comment");
document.selection ? (myField.focus(), sel = document.selection.createRange(), sel.text = tag, myField.focus()) : this.insertTag(tag);
},
insertTag: function(tag) {
myField = Smilies.dom("comment");
myField.selectionStart || myField.selectionStart == "0" ? (startPos = myField.selectionStart, endPos = myField.selectionEnd, cursorPos = startPos, myField.value = myField.value.substring(0, startPos) + tag + myField.value.substring(endPos, myField.value.length), cursorPos += tag.length, myField.focus(), myField.selectionStart = cursorPos, myField.selectionEnd = cursorPos) : (myField.value += tag, myField.focus());
}
}
然后进行表情的解析,修改comments.php文件
在这个文件中找到<?php $comments->content(); ?>
这一段,这是输出评论内容的,将它替换成:
<?php echo preg_replace('#\@\((.*?)\)#', '<img src="表情图片地址/$1.jpg">', $comments->content); ?>
这样就完成了表情的解析
2019-03-28 17:24:11 回复
不错不错,来看看。。
2019-03-15 11:57:03 回复
用得上,收藏了
2019-03-13 23:49:12 回复
这个模板有意思!不错
2019-03-14 12:56:56