- 论坛徽章:
- 0
|
|
jquery实现新浪微博的表情插件
插件按照新浪微博的表情插件以jquery方式给出了一种实现。
特点：
一次性初始化
可以全局控制(打开，关闭)
可以远程调取表情数据
提供对表情代号的转换 [用户灵活控制触发dom]
初始化代码如：
Javascript代码- $.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.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'
-
- });
Javascript代码- $.expBlock.disableExp();
- $.expBlock.disableExp();
Javascript代码- $.expBlock.enableExp();
- $.expBlock.enableExp();
- //将字符串中如"[微笑]"类的表情代号替换为<img/>标签
- var s = $.expBlock.textFormat(val);
- //将字符串中如"[微笑]"类的表情代号替换为<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-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>
|
|
免费注册
发表于 2012-01-19 21:47
