js实现评论框快捷输入表情/仿微博@(at)匹配功能

废话不说先上效果图:

评论框快捷输入表情 评论框快捷输入表情

如果看图不过瘾可以在本站下面的评论框输入冒号:(英文半角符号)试试看哦~~
先加载at.js,<script type="text/javascript" src="http://ichord.github.com/At.js/assets/js/jquery.atwho.min.js"></script>
然后在你的主题js文件中加入如下代码(如没有js文件可在footer.php加入,并在代码前后加上<script></script>)

$(function(){
var emojis = [
"razz","sad","evil","smile","oops","grin","eek","shock","cool","lol","mad","twisted","roll","wink","idea","arrow","neutral","cry","mrgreen"]//表情符号
emojis = $.map(emojis,function(value,i){
return {'key':" :"+value+": ",'name':value}//返回的键值,根据wordpress符号转表情的格式,所以在前后冒号外加上空格
})

$("#respond textarea").atwho(":",{//给匹配的结果加上表情图片使其更加直观
tpl:"<li data-value='${key}'>${name} <img src='http://yourdomain/wp-includes/images/smilies/icon_${name}.gif'/></li>"
,'data': emojis
,display_flag: false
})
});

css可以根据主题美化,也可以直接用下面的:

#at-view {
	position:absolute;
	top:0;
	left:0;
	display:none;
	margin-top:18px;
	background:#fff;
	border:1px solid #DDD;
	border-radius:3px;
	box-shadow:0 0 5px rgba(0,0,0,.1);
	width:120px;
	z-index:10
}
#at-view .cur {
	background:#36F;
	color:#fff
}
#at-view .cur small {
	color:#fff
}
#at-view strong {
	color:#36F
}
#at-view .cur strong {
	color:#fff;
	font:bold
}
#at-view ul {
	list-style:none;
	padding:0;
	margin:auto
}
#at-view ul li {
	display:block;
	padding:5px 10px;
	border-bottom:1px solid #DDD;
	cursor:pointer
}
#at-view small {
	font-size:smaller;
	color:#777;
	font-weight:400
}

说明:js库版本需在1.7以上

LIKE OR SHARE IT:

admin发表于Code目录下,标签为,转载请保留链接

TOP DOWN
发表评论

您必须 [ 登录 ] 才能发表留言!

  1. 沙 发 所谓刚子

    我想知道 如果是1.4.4的呢。。。强烈抗议啊!

    三月 8, 2013 18:27:19
  2. 板 凳 所谓刚子

    ::::::::::::::::::::::::::::::::::: :ma: 我尝试了这么多 哈哈哈

    三月 8, 2013 18:28:21
  3. 地 板 郑永

    还有地板!!!哈哈

    三月 8, 2013 20:00:32
  4. 地 毯 郑永

    这功能太炫,我个人不喜欢,呵呵。。有违简单主义。

    三月 8, 2013 20:01:22
  5. 地 面 xsinger

    :huai: 这个挺好的,但是要别人知道你的表情符号才行了, :zhuangb: 沙发真难啊!js真是无处不在啊!

    三月 8, 2013 21:30:20
  6. 地 下 Android

    %>_<% 浏览器错位。。。
    还有,这个功能臃肿。。个人认为。。

    三月 9, 2013 11:58:36
  7. 7 楼 redswallow

    现在可喜欢文本的颜表情了 无视换表情图片影响>3<

    三月 11, 2013 11:48:05
  8. 8 楼 Kay

    很实用这个!

    七月 14, 2013 01:17:15
  9. 9 楼 kn007

    话说,你做的这个主题真简洁,简约。。。不过是不是搞点表情。。。表情帝伤不起。。。

    七月 21, 2013 20:11:17
  10. 10 楼 ice

    看了一下,感谢分享,这个不错

    十一月 16, 2013 13:26:27