jquery实现新浪微博的表情插件
特别提示：组件现在存在一些功能缺陷，就是只能在页面使用一次，第二次使用会出错。目前正在修正，请各位使用时慎重插件按照新浪微博的表情插件以jquery方式给出了一种实现。
特点：
[*]一次性初始化
[*]可以全局控制(打开，关闭)
[*]可以远程调取表情数据
[*]提供对表情代号的转换[用户灵活控制触发dom]
初始化代码如：
$.expBlock.initExp({//用户表情结构数据expData: [{name: '默认',icons:[{url:"../resources/js/plugins/exp/img/zz2_thumb.gif",title:"织"},{url:"../resources/js/plugins/exp/img/horse2_thumb.gif",title:"神马"}]}]//包含textarea和表情触发的exp-holderholder: '.exp-holder',//exp-holder中的textarea输入dom，默认为textarea,textarea : 'textarea',//触发domtrigger : '.exp-block-trigger',//每页显示表情的组数grpNum : 5,//位置相对页面固定(absolute)||窗口固定(fixed)posType : 'absolute',//表情层数zIndex : '100'});
使表情失效
$.expBlock.disableExp();
使表情重新启动
$.expBlock.enableExp();
//将字符串中如"[微笑]"类的表情代号替换为<img/>标签var s = $.expBlock.textFormat(val);
完整html调用示例
<!DOCTYPE HTML><html><head><meta charset="UTF-8" /><title>表情</title><link rel="stylesheet" type="text/css" href="../resources/js/plugins/exp/css/style.css" /><script type="text/javascript" src="../resources/js/jquery-1.7.1.min.js"></script><script type="text/javascript" src="../resources/js/plugins/exp/exp.js"></script><style><!--.holder-note{width: 500px; margin: 0 auto;margin-top: 10px;border: 1px dotted #ccc;background-color: #f1f1f1;}ul{list-style:disc;list-style-position:inside;margin-left: 2em;}--></style></head><body><div class="exp-holder" style="margin: 0 auto; width: 500px; "><textarea id="J_t" style="width:100%;">点击"表情"添加</textarea><a class="exp-block-trigger" href="javascript:;">表情</a><button id="J_sbt" type="button">check</button></div><div id="J_resulte" style=" width: 500px; height: 200px; border:1px solid green; margin: 0 auto; "></div><div class="holder-note"><h2>说明</h2><p>此表情插件借助jquery实现，特色：</p><ul><li> 一次性初始化,</li><li>可以全局控制(打开，关闭),</li><li>可以远程调取表情数据,</li><li>提供对表情代号的转换.</li><p>$.expBlock.initExp({</br>expData:null</br>holder: '.exp-holder',</br>textarea : 'textarea',</br>trigger : '.exp-block-trigger',</br>grpNum : 5,</br>posType : 'absolute',</br>zIndex : '100'</br>*/});</p><h3>note: 需要提供的相应css文件支持</h3></ul></div></body><script type="text/javascript">$(document).ready(function(){$.expBlock.initExp({/*//用户表情结构数据expData: [{name: '默认',icons:[{url:"../resources/js/plugins/exp/img/zz2_thumb.gif",title:"织"},{url:"../resources/js/plugins/exp/img/horse2_thumb.gif",title:"神马"}]}]//包含textarea和表情触发的exp-holderholder: '.exp-holder',//exp-holder中的textarea输入dom，默认为textarea,textarea : 'textarea',//触发domtrigger : '.exp-block-trigger',//每页显示表情的组数grpNum : 5,//位置相对页面固定(absolute)||窗口固定(fixed)posType : 'absolute',//表情层数zIndex : '100'*/});//使表情失效$.expBlock.disableExp();//使表情重新启动$.expBlock.enableExp();$('#J_sbt').click(function(){var s, ta = $('#J_t'), val = ta.val();//将字符串中如"[微笑]"类的表情代号替换为<img/>标签s = $.expBlock.textFormat(val);//console.log(s);$('#J_resulte').html(s);})/* * ajax远程获取表情,注意同源策略 * 要求返回的数据格式如:[{name: groupname,icons:[{url:'imgurl',title:"iconname"},{url:'imgurl',title:"iconname"}]},{name: groupname,icons:[{url:'imgurl',title:"iconname"},{url:'imgurl',title:"iconname"}]},...] *///$.expBlock.getRemoteExp(url);})</script></html>
欢迎讨论：406400939@qq.com
页:
[1]