您的位置：首页 > 运维架构 > Linux

浅谈Linux防火墙：iptables (2)

2011-03-06 11:08 393 查看
特别提示：组件现在存在一些功能缺陷，就是只能在页面使用一次，第二次使用会出错。目前正在修正，请各位使用时慎重

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



欢迎讨论：406400939@qq.com
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航