文本框插入表情Jquery插件是一款非常实用的功能,应用场景很广,基本上很多网站的留言和评论模块都用到,为了方便大家使用,网友水墨寒将此功能封装成一个通用的插件。代码里面的每一个功能都写上了很详细的注释,分成了3个主要功能,除了插件本身还有一个光标定位插件和表情解析插件。
页面代码使用如下:
<script type="text/javascript">
$(function (){
$("a.face").smohanfacebox({
Event : "click", //触发事件
divid : "Smohan_FaceBox", //外层DIV ID
textid : "Smohan_text" //文本框 ID
});
//解析表情 $('#Zones').replaceface($('#Zones').html());
});
//Demo测试
$('#Smohan_Showface').click(function() {
$('#Zones').fadeIn(360);
$('#Zones').html($('#Smohan_text').val());
$('#Zones').replaceface($('#Zones').html());//替换表情
});
</script>
效果如下:
在线演示和下载:http://www.jq-school.com/Detail.aspx?id=153
发表评论
-
110个常用的jquery特效和插件
2013-08-27 09:36 1910为了方便网友们的学习jquery,在互联网中把网站常用到的特 ... -
jQuery插件分类与编写
2013-07-26 12:18 8521. 插件种类插件其实就是对现有的方法(或者叫函数)做一个封 ... -
8款实用的Jquery瀑布流插件
2013-07-23 02:26 15961、网友Null分享Jquery响应式瀑布流布局插件首先非常 ... -
原创Jquery实现图片幻灯片特效
2013-03-04 09:02 726首先非常感谢网友晓天的无私分享,此Jquery特效是他的第一 ... -
分享jquery-ui仿WebQQ整合苹果菜单界面
2013-01-24 15:04 874jquery-ui仿WebQQ整合苹果菜单界面是一套效果非常 ... -
分享26本关于Jquery的学习书籍(免费下载)
2012-11-30 23:18 940分享26本关于Jquery的学习书籍(免费下载) 1、精通Ja ... -
Jquery实现颜色选择器插件
2012-07-31 09:46 955Jquery实现颜色选择器插件是一款很实用的功能插件,可以灵活 ... -
Jquery实现仿搜索引擎文本框自动补全插件
2012-07-31 09:44 848Jquery实现仿搜索引擎文本框自动补全插件功能很实用,使用也 ... -
Jquery实现瀑布流布局插件
2012-07-30 17:47 942瀑布流,又称瀑布流式布局。 是目前比较流行的一种网站页面布 ... -
鼠标拖动改变容器大小的Jquery插件
2012-07-30 17:45 1099鼠标拖动改变容器大小的Jquery插件可以灵活设计调整容器高度 ... -
Jquery实现无限级别导航菜单插件
2012-07-30 17:44 749Jquery实现无限级别导航菜单插件是一款功能很功能且很实用的 ... -
Jquery+Json实现无刷新分页插件
2012-07-30 17:43 1040数据分页是一种可减轻服务器负担,很多地方只需要局部刷新即可,提 ... -
Jquery实现关键字标签生成插件
2012-07-30 17:42 1109此插件功能Enter或Tab或失去焦点确定标签输入完毕,双击文 ... -
漫画原创Jquery消息提示插件
2012-07-26 01:48 788一共有4种提示操作: 1、错误(error) 2、 成 ... -
漫画原创Jquery返回顶部插件
2012-07-26 01:46 774漫画原创Jquery返回顶部插件使用简单,步骤如下:1、引用插 ... -
漫画原创Jquery限制字符输入插件
2012-07-26 01:44 754Jquery限制字符输入是一个非常实用的功能,漫画现在把它写成 ... -
漫画原创Jquery内容插入光标处插件
2012-07-26 01:43 909内容插入光标处是很常用的一种功能,尤其是做编辑器,这是不可缺少 ... -
Jquery实现JS混淆、压缩、格式化、CSS压缩、CSS格式化
2012-07-26 01:41 1484此工具是漫画综合了网络上比较流行的一些JS混淆、压缩、格式化、 ... -
漫画原创Jquery弹出层插件
2012-07-25 20:04 862此插件可支持以下功能1、触发响应事件 2、设置弹出层的标题 ... -
漫画原创Jquery把http地址自动变成可访问的url链接插件
2012-07-25 20:03 534漫画原创Jquery把http地址自动变成可访问的url链接插 ...
相关推荐
文本框插入类似QQ,微博表情的Jquery插件
《jQuery文本框插入表情插件详解》 在Web开发中,增强用户交互体验是至关重要的。其中,允许用户在文本框内插入表情符号已经成为一种流行趋势,尤其在社交媒体和聊天应用中。今天我们将深入探讨一个基于jQuery的...
《jQuery文本框解析渲染表情插件特效源码详解》 在网页开发中,与用户交互是至关重要的一环,而文本输入区域是用户表达观点、反馈信息的重要途径。为了提升用户体验,许多开发者会在文本框中集成表情功能,让用户...
**jQuery文本框插入表情插件特效代码详解** 在网页交互设计中,为了增强用户体验,许多网站和应用都引入了在文本输入框内插入表情的功能。`jQuery`作为一款广泛使用的JavaScript库,为开发者提供了丰富的功能扩展,...
《新浪微博表情jQuery插件——jquery.sinaEmotion-1.0详解》 在网页开发中,为了提升用户体验,经常会引入各种各样的JavaScript插件。其中,“新浪微博表情jQuery插件”(jquery.sinaEmotion-1.0)是一个专门用于...
开发者可以通过解析表情列表,结合JavaScript事件处理和DOM操作,创建一个互动的表情面板,让用户在文本框中方便地插入表情,提升用户体验。同时,借助成熟的jQuery插件,可以快速地在项目中集成这一特性,降低开发...
本主题聚焦于一个特定的jQuery插件,该插件允许开发者在文本框(`<input type="text">`)和文本域(`<textarea>`)中于光标位置插入代码或内容。这对于编辑器、代码编辑器或任何需要动态插入文本的场景来说是非常...
"漂亮的评论文本框表情选择插件"正是一款旨在提升用户交互体验的工具,它为用户提供了一种简单而直观的方式来表达情感和观点,使评论区更加生动有趣。 这款插件的核心功能在于提供丰富的表情选择,让用户在评论时能...
在本文中,我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见,它能够提高用户输入的效率和用户体验。 首先,让...
本项目名为“仿QQ表情的jquery插件”,其主要目的是为网页应用提供与QQ聊天软件类似的表情功能,使得用户在网页上能够方便地选择和插入各种表情,增强互动体验。 首先,我们要理解jQuery插件的基本结构。一个jQuery...
最后,`js`目录可能包含jQuery插件或者自定义的JavaScript代码。这个脚本主要负责监听按钮点击事件,弹出表情选择框,并在用户选择表情后将其插入到评论输入框中。以下是可能的实现: ```javascript $(document)....
即便成功读取到表情数据了,又必须考虑表情分类,翻页等等等等问题,还需要考虑表情的插入方式并非简单的在文本最后插入,而是在光标所在处插入,还应该能够替换掉已选中文字,还要涉及到不同浏览器的兼容问题…… ...
3. 初始化插件:在文档加载完成后,通过JQuery选择器找到需要添加表情功能的元素(如文本框或富文本编辑器),然后调用插件方法进行初始化。 4. 实现表情面板:创建一个浮动的面板,显示表情分类和预览图,用户可以...
用户在文本框或者编辑器中输入时,可以方便地插入这些表情,增强文字表达的情感色彩。 2. 主要特性 - 表情面板:包含多种QQ风格的表情图标,满足多样化的情感表达需求。 - 用户友好:点击或拖拽表情即可插入,...
qqFace的核心功能是通过调用jQuery的事件处理和DOM操作,实现表情面板的显示与隐藏,以及选中表情后将其插入到指定文本框。它通常通过一个按钮或者图标触发,当用户点击这个按钮时,会弹出一个包含多种QQ表情的面板...
5. **标签的拖动与排序**:为了让用户可以调整标签的顺序,我们可以利用jQuery UI库中的`draggable`和`droppable`插件。首先,使每个标签元素可拖动,然后设置一个接收拖放的容器。例如: ```javascript $('.tag')...
4. **前端渲染**:使用jQuery将解析后的表情数据动态插入到页面上,可能通过模板引擎或直接DOM操作。 5. **用户输入处理**:当用户输入表情代码时,需要实时转换并预览,这可能涉及到监听文本框的输入事件和实时...
《jQuery文本框字符限制插件详解》 在网页设计中,常常需要对用户输入的文本进行长度限制,以保持页面的整洁和数据的一致性。jQuery作为一种强大的JavaScript库,提供了丰富的功能来帮助开发者实现这样的需求。本文...