jquery实现新浪微博的表情插件

[color=red][b]特别提示：[/b]组件现在存在一些功能缺陷，就是只能在页面使用一次，第二次使用会出错。目前正在修正，请各位使用时慎重[/color]

插件按照新浪微博的表情插件以jquery方式给出了一种实现。
[b]特点：[/b]
[list]
[*]一次性初始化
[*]可以全局控制(打开，关闭)
[*]可以远程调取表情数据
[*]提供对表情代号的转换
[用户灵活控制触发dom]
[/list]
[b] 初始化代码如：[/b]

   $.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-holder              holder: '.exp-holder',              //exp-holder中的textarea输入dom，默认为textarea,               textarea : 'textarea',              //触发dom               trigger : '.exp-block-trigger',             //每页显示表情的组数               grpNum : 5,               //位置相对页面固定(absolute)||窗口固定(fixed)             posType : 'absolute',               //表情层数                zIndex : '100'

            });

[b]使表情失效[/b]

$.expBlock.disableExp();

[b]使表情重新启动[/b]

$.expBlock.enableExp();

//将字符串中如"[微笑]"类的表情代号替换为<img/>标签              var s = $.expBlock.textFormat(val);

[b]完整html调用示例[/b]

<!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-holder              holder: '.exp-holder',              //exp-holder中的textarea输入dom，默认为textarea,               textarea : 'textarea',              //触发dom               trigger : '.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>

[i]
[b]
欢迎讨论：406400939@qq.com[/b][/i]

jquery实现新浪微博的表情插件相关推荐

php如何处理腾讯的表情,jquery QQ 表情插件分享
最近因项目的要求需要在输入留言的文本框中支持输入QQ表情,这种效果已经很常见了,下面将自己在网上找到的一个使用jquery实现的qq表情插件做一下分享. 首先看一下这个qq表情插件的效果图吧! 下面是 ...
jquery表情 juqery qq表情适用jQuery QQ表情插件jquery.qqFace
解决jquery 1.9.0 以上版本 jquery去掉了对 $.browser 的支持,采用$.support 来判断浏览器类型.导致之前的很多插件报错的问题选择后的表情转义为和QQ表情一样的汉字 ...
html页面如何引入表情插件,jquery动画表情插件
jquery.mb.emoticons.js是一款jquery动画表情插件.它允许你通过面板拾取某个表情符号,然后可以通过这些表情相应的关键字符号将它们转换为gif动画表情. 使用方法在页面中引入j ...
js从0开始构思表情插件
前言: 由于公司开发项目需要用到表情插件,在网上百度了好久,很多表情插件,都是需要引用好多js文件,也没有现成的demo可以使用,还有一些插件是引用好多图片,每一个表情都要重新请求一下.为了这样一个功 ...
JQuery的45个经典插件应用
jQuery滑动门 1) Slider Gallery- 这是一个模仿Apple网站的jQuery滑动门产品展示．这个'产品展示滑动门'就是一个直线前进的画廊,在有限的空间里面显示产品图片,支持Ta ...
jQuery超炫酷按钮插件及源码
现在大部分网页的按钮都是经过美化的,那些原始的浏览器按钮太过于枯燥乏味,让用户失去和网站交互的兴趣.早期我们都是通过背景图片来美化网页按钮,而现在我们可以利用扩展性更好的CSS3来制作漂亮的网页按钮, ...
jQuery Masonry 一个 jQuery动态网格布局的插件
jQuery Masonry 是一个 jQuery动态网格布局的插件. 每个元素都是漂浮在固定的网格布局上面,就像一枚图钉定在墙上一样. 我们发现以下的15网站使用jQuery Masonry的范例. ...
PgwSlideshow-基于Jquery的图片轮播插件
友情链接:http://www.htmleaf.com/Demo/201504031619.html http://www.htmleaf.com/Demo/201504191708.html 0 ...
ajax 批量上传图片插件,jQuery多文件上传插件jquery.imageuploader.js
插件描述:jQuery多文件上传插件jquery.imageuploader.js,可以同时上传多个文件并支持拖拽上传 jquery.imageuploader.js 一款jquery多文件上传插件. ...
一款很好用的JQuery dtree树状图插件（一）
一款很好用的JQuery dtree树状图插件树状图 -dtree 由于他的节点设置思想不错,使连接数据库的数据库设计比较方便. 下载dtree资源包,引用一下dtree.css和dtree.js ...

jquery实现新浪微博的表情插件

jquery实现新浪微博的表情插件相关推荐

最新文章

热门文章