特别提示：组件现在存在一些功能缺陷，就是只能在页面使用一次，第二次使用会出错。目前正在修正，请各位使用时慎重
插件按照新浪微博的表情插件以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
分享到：
ps: 
相关推荐
总结，创建一个jQuery新浪微博表情插件涉及到前端开发的多个方面，包括DOM操作、事件处理、资源加载和动画效果。通过合理的设计和实现，我们可以提供一个用户友好的表情输入工具，使网页应用更加生动活泼。在实际...
《JQuery新浪微博表情插件：跨浏览器的交互增强利器》 在互联网的快速发展中，社交媒体已经成为人们日常交流的重要平台，而微博作为其中的一员，更是深受广大用户的喜爱。为了提升用户体验，许多开发者开始研究如何...
《新浪微博表情jQuery插件——jquery.sinaEmotion-1.0详解》 在网页开发中，为了提升用户体验，经常会引入各种各样的JavaScript插件。其中，“新浪微博表情jQuery插件”（jquery.sinaEmotion-1.0）是一个专门用于...
好吧，上面这段文字你可以跳过不看，你只需要知道表情功能的实现非常繁琐就行了（+_+），为了方便以后微博应用的开发，同样方便其他应用开发者，此款表情插件就此诞生。 插件简介 其实插件简介不必多说，用过新浪...
《jQuery新浪微博表情插件特效代码详解》 在Web开发中，增强用户交互体验往往离不开动态效果和丰富的视觉表现。jQuery，作为一个轻量级且强大的JavaScript库，为开发者提供了丰富的API和便捷的操作方式来实现这些...
1. **图片懒加载**：借鉴新浪微博，插件实现了图片的延迟加载功能。这意味着图片不会一次性全部加载，而是当用户滚动页面，图片即将进入可视区域时才开始加载。这样既节省了初始加载时间，又降低了服务器压力。 2. ...
总的来说，"jquery新浪微博表情插件"是一个结合了jQuery库、JavaScript语言特性、正则表达式、DOM操作、数据结构、事件处理、动态内容加载等多种技术的前端开发实例。它不仅提升了用户的交互体验，也为开发者提供了...
总结来说，这个项目通过使用jQuery和At.js插件，结合Ajax数据请求和适当的CSS样式，实现了类似新浪微博的@功能，提供了一种用户友好的提及他人的方法，增加了网页互动性。开发者可以根据需求自定义数据源、样式和...
新浪1630个表情插件就是这样一个专为HTML和JQUERY设计的组件，旨在帮助开发者轻松集成大量丰富的表情到他们的网页应用中，以提升用户在发布评论、留言或者进行互动时的情感表达能力。 该插件主要面向Web开发者，...
一个有用的快速地创建新浪微博表情选择替代的jQuery插件。 有何特点 使用简单，一行代码即可创出出表情选择 自带智能表情解析方法（但还是建议表情解析在服务端进行） 兼容IE6 +，Chrome，Firefox，Opera等各种...
本插件是以新浪微博的表情发布功能为基础，内含 两大类表情：普通表情和魔法表情，而且两类表情都含有简体/繁体两个版本，本插件完美支持IE6,IE7,IE8,firefox3,firefox4浏览器。 其中： 普通表情包含：默认/心情/...
`jQuery.sinaEmotion.js`是一个基于jQuery库的插件，专门用于处理微博表情的显示。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和Ajax交互等任务。通过这个插件，开发者可以轻松地将微博表情集成...
压缩包内的文件“jQuery新浪表情插件Demo.html”很可能是一个包含了演示页面的HTML文件，它使用了jQuery库来实现新浪表情的功能。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及...
此代码模仿了新浪微博的表情系统，提供了丰富的表情供用户选择。这些表情通常是通过预定义的代码或者图片URL来实现的，用户在输入框中输入对应的代码或点击表情图标，即可插入相应的表情符号。 **仿多说留言特效** ...
如果需要更丰富的表情功能，可以引入第三方库，如jQuery Emoji插件，提供输入框内表情选择和渲染。 在实际的新浪微博应用中，这些功能可能会与后端API相结合。当用户发布包含话题或人名的微博时，前端会将这些信息...
这个功能允许用户在文本输入框中插入各种表情图标，类似于新浪微博等社交媒体平台，使得沟通更加生动有趣。下面我们将深入探讨如何实现这样的功能。 首先，我们来看`jquery.sinaEmotion.css`这个文件，它是一份CSS...
这个HTML文件可能使用JavaScript或者jQuery等前端技术来实现动态功能，如实时预览、文本样式设置（如加粗、斜体、下划线）、段落调整、列表创建等。同时，它可能还集成了HTML5的本地存储功能，以便用户在断网或刷新...