1、引入css文件

<link rel="stylesheet" type="text/css" href="jquery.sinaEmotion.css">

2、引入jQuery.js 和jQuery.sinaEmotion.js

<script src="jquery.min.js"></script>
<script src="jquery.sinaEmotion.js"></script>

3、html代码

  <form class="publish">
<div id="result"></div>
<textarea class="content" id="content">欢迎使用jQuery Sina Emotion[呵呵]</textarea><br>
<input class="face" type="button" value="表情">
<input class="submit" type="button" value="解析">
</form>

其中

<div id="result"></div>

是用来显示解析后的表情。

<textarea class="content" id="content">欢迎使用jQuery Sina Emotion[呵呵]</textarea>

textarea用来显示发送表情的文本域(也可以使用input type="text")

有一点需要注意的是:显示表情的文本域或者文本框需要和发送表情按钮处于同一个form表单中。因为在jQuery.sinaEmotion.js中,是通过查找target所在的form表单中的textarea或者input,来显示表情的。

$.fn.sinaEmotion = function(target) {

        target = target
|| function() {
return $(this).parents('form').find(
'textarea,input[type=text]').eq(0);
};

接下来是通过绑定".face"类名为表情按钮添加点击事件。

$('.submit').bind({
click : function(){
var content = $('#content').val();
$('#result').html(content).parseEmotion();
}
});
$('.face').bind({
click: function(event){
if(! $('#sinaEmotion').is(':visible')){
$(this).sinaEmotion();
event.stopPropagation();
}
}

demo地址:

http://pan.baidu.com/s/1bnnr1tt

jQuery新浪微博表情插件教程的更多相关文章

  1. 亲手用模块化方式写一个jquery QQ表情插件。

    在回复或是评论的时候,很多时间都需要有回复表情的功能,然后而需要插入QQ表情可以是最常见的. 插件也写多很多个了,这次写插件就下了一个决定.就是使用模块化来开发. 最后在我的源代码中有这样子一段: v ...

  2. 选择29部分有用jQuery应用程序插件(免费点数下载)

    免积分下载:http://download.csdn.net/detail/yangwei19680827/7238711 原文地址:http://www.cnblogs.com/sxwgf/p/36 ...

  3. 经典qq表情插件(html+nodejs应用)

    由于目前在接触聊天室项目,接到一个需求实现一个类似QQ表情.在网上找了一款jquery经典表情插件.下面介绍一个用法: HTML: 首先在html页面的head中引入jQuery库文件和QQ表情插件j ...

  4. 转:精心挑选的12款优秀 jQuery Ajax 分页插件和教程

    在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的  ...

  5. 19个非常有用的 jQuery 图片滑动插件和教程

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入精美的效果.今天 ...

  6. jQuery插件教程

    http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html   非常不错的jQuery插件教程

  7. 小教程:自己创建一个jQuery长阴影插件

    长阴影设计是平面设计的一个变体,添加了阴影,产生了深度的幻觉,并导致了三维的设计.在本教程中,我们将创建一个jQuery插件,通过添加完全可自定义的长阴影图标,我们可以轻松地转换平面图标. 戳我查看效 ...

  8. 12款优秀 jQuery Ajax 分页插件和教程

    12款优秀 jQuery Ajax 分页插件和教程 在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...

  9. 《JQuery常用插件教程》系列分享专栏

    <JQuery常用插件教程>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201719.html 文章 使用jquery插件实现图 ...

随机推荐

  1. 微软柯塔娜(Cortana)的一句名言

    近日.媒体频传Win 10装机量已经超过多少千万台.我操心的问题是,集成在Win 10操作系统中的柯塔娜小姐将怎样面对各色各样的人群.由于,在这个世界上.人是最复杂的生物,什么人都有. 依据国外媒体报 ...

  2. Javascript防冒泡事件与Event对象

    防冒泡 防冒泡用到的就是event的属性和方法 function add2shop(e) { if (!e) var e = window.event; e.cancelBubble = true; ...

  3. 整数翻转C++实现 java实现 leetcode系列(七)

    给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 输出: ...

  4. sql server 中文乱码

    在数据库中查询每个字段的备注信息(备注信息是用中文写的),查询结果却是乱码,如图: 百度说需要设置数据库的排序规则,设置成中文的,结果还是报5030错误,无法修改字符集为Chinese_PRC_CI_ ...

  5. js正则学习小计

    //元字符 {} () ^ $ . ? + //预定义字符 \d \D \w \W \s \S //量词 {n,m} {n} {n,} + ? * //贪婪和惰性 //反向引用 //分组 //候选 / ...

  6. 好久不见我又回来了cnblogs

    最近一直没时间写博客.... 最近工作中遇到的问题,当时花费了一定功夫才解决. 当再次遇到,同样问题的时候,我知道自己能够解决的,但是却同样,要走原来的弯路解决他. 说到底还时确实总结啊.大概是没时间 ...

  7. 3ds Max灯光教程之卧室灯光布局实例

    对于设计师来说要做好一张好的作品效果图包括很多比如:“造型.色彩搭配.灯光气氛.构图角度等等,上次给大家详细的分析了下产品渲染中摄像机的构图及原理.本期教程来跟大家讨论一下max场景灯光布局问题.以卧 ...

  8. day02变量

    一. 什么是变量? 变量:在程序运行过程中,值会发生变化的量.(与之相对应的,常量就是在程序运行过程中,值不会发生变化的量).无论是变量还是常量,在创建时都会在内存中开辟一块空间,用于保存它的值. 二 ...

  9. 第一个JavaWeb工程

    这个工程主要用来研究log4j,所以就只有一个页面,希望以后慢慢进步. java动态生成网页主要使用servlet.把请求拦截下来,处理后返回结果. 这里创建的是一个maven工程. 结构如下:

  10. Jedis无法连接centOS7上的redis

    通过查看资料无法连接基本是两个原因: 1)redis.conf中的bind配置,bind的默认是 127.0.0.1 只可本机访问,我们改为 bind 0.0.0.0 即所有地址均可访问. 2)cen ...