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-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; ">
相关新闻>>
- 发表评论
-
- 最新评论 更多>>
