首页 > 安全资讯 >

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

12-02-27

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

插件按照新浪微博的表情插件以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-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(); 

//将字符串中如"[微笑]"类的表情代号替换为<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/>标签www.2cto.com
    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> 

摘自 懒勤人

相关文章
最新文章
热点推荐