`

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

jqueryjavascript新浪微博expblock表情插件
阅读更多
特别提示：组件现在存在一些功能缺陷，就是只能在页面使用一次，第二次使用会出错。目前正在修正，请各位使用时慎重

插件按照新浪微博的表情插件以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
  • 大小: 63.7 KB
6
顶
0
踩
分享到：
| js判断页面是否在iframe或者frame里的一种 ...
评论
16 楼 applett 2014-11-25  
  ps:
15 楼 applett 2014-11-25  
     
14 楼 tobino1 2013-09-04  
 
13 楼 liyang3136 2013-05-14  
有恶意                     
12 楼 kidder 2013-01-04  
    
11 楼 zhoubo123 2012-11-15  
谢谢分享 学习了
10 楼 10822123 2012-09-07  
请问怎么防止重复显示？
9 楼 10822123 2012-09-07  
[flash=200,200][/flash]请问怎么防止重复显示？[/size]
8 楼 10822123 2012-09-07  
请问怎么防止重复显示？？？？？？？？？？？？？
7 楼 liuminjian 2012-08-13  
  
6 楼 handjin 2012-08-12  
试试看    
5 楼 shenlm203 2012-07-16  
针对上述问题，我会在最近找个时间给予改进。希望大家能给我多提些意见，或者对这个插件有什么想法都可以给我提
4 楼 fyhaizhz 2012-07-11  
一个页面有两个这种的表情咋办
3 楼 G调情G 2012-07-09  
你好，我想问一下，当textaera和那个表情按钮不在同一个div层的时候，应该怎么把表情代号放到textaera里面？例如：
<body>
<div class="exp-holder" style="margin: 0 auto; width: 500px; ">
<textarea id="J_t" style="width:100%;"></textarea>
</div>

/*textaera和那个表情按钮不在同一个div层*/

<div style="margin: 0 auto; width: 500px; ">
<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>

</body>
2 楼 boyu57013652 2012-06-05  
不好意思 测试 表情的 没有恶意
1 楼 boyu57013652 2012-06-05  
             
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics