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

来源:未知 责任编辑:责任编辑 发表时间:2014-05-20 18:33 点击:

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

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论 更多>>

推荐热点

  • Gb2312转utf-8编码的方法(vbs+js)
  • 如何使用Ajax技术开发Web应用程序(1)
  • js跳转路径问题
  • JavaScript模仿桌面窗口
  • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
  • 用js检测两个线段是否相交
  • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
  • 我是如何去了解jquery的(六),案例之幻灯片轮换
  • 2011年度最佳 jQuery 插件
网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
Copyright © 2008-2015 计算机技术学习交流网. 版权所有

豫ICP备11007008号-1