封装 oschina.net 表情选择
1. [代码]jquery.facial.js
//从OSCHINA.NET 提取出来的 表情选择 插件 by zhouxiang
//如果有不满足的地方 可以自己改改 没事随便写写的 style 和 html 都被我弄到JS里了 这样方便简洁
jQuery.fn.extend({
facial: function (opts) {
var _self = this, _this = $(this);
opts = jQuery.extend({
CallBack: function (i) { }
}, opts || {});
_self.Resource = {
Style: "<style>#TweetFormPopupWraper{padding: 0;margin: 0;font-size: 9pt;font-family: 微软雅黑,Verdana,sans-serif,宋体;position: absolute;z-index: 9999;margin: 5px 0 0 0;}#TweetFormPopupWraper .clear{clear: both;font-size: 1px;line-height: 0;}#TweetFormPopupWraper ol, ul{list-style: none;padding: 0;margin: 0;}#TweetFormPopupWraper #TweetFormPopup .TweetPopupTitle{padding: 3px 5px;margin: 0 0 10px 0;font-weight: bold;line-height: 30px;border-bottom: 1px solid #EEE;font-size: 14px;}#TweetFormPopupWraper #TweetFormPopup .TweetPopupTitle a{float: right;text-decoration: none;}#TweetFormPopupWraper #TweetFormPopupWraper .l{margin: 0 0 10px 0;}#TweetFormPopupWraper #TweetFormPopupArrow{background-image: url('http://city.oschina.net/img/space/up_arrow.gif');background-repeat: no-repeat;padding-top: 5px;}#TweetFormPopupWraper .tweet_emotion{background-position: 51px 0px;}#TweetFormPopupWraper .tweet_image{background-position: 102px 0px;}#TweetFormPopupWraper .tweet_video{background-position: 152px 0px;}#TweetFormPopupWraper #TweetFormPopup{width: 392px;border: 2px solid #CCC;background: #F8F7F7;padding: 5px;}#TweetFormPopupWraper #TweetFormPopup a.emotion_img{float: left;width: 24px;height: 24px;background-image: url('http://city.oschina.net/js/ke/plugins/emoticons/qq.gif');background-repeat: no-repeat;margin: 0 2px 4px 0;border: 1px solid #F6F6F6;}#TweetFormPopupWraper #TweetFormPopup a.emotion_img:hover{border: 1px solid #5CC26F;}</style>",
Html: "<div id=\"TweetFormPopupWraper\" style=\"display:none\"><div id=\"TweetFormPopupArrow\" class=\"tweet_emotion\"><div id=\"TweetFormPopup\"><ul id=\"TweetFormUl\"><li><div id=\"TweetEmotions\"><div class=\"TweetPopupTitle\"><a href=\"javascript:;\">关闭</a>插入表情</div></div></li></ul><div class=\"clear\"></div></div></div></div>"
};
_self.AddFacial = function (i) {
$("#TweetFormPopupWraper #TweetEmotions").append("<a href=\"javascript:;\" class=\"emotion_img\" style=\"background-position: -" + i + "px 0px;\"></a>");
}
_self.WH = function (obj) {
var top = obj.offset().top + obj.height() + 10;
var left = obj.offset().left - 35;
$("#TweetFormPopupWraper").css({ left: left, top: top });
}
_self.PageLoad = function () {
if ($("#TweetFormPopupWraper").length == 0) {
$(document.body).append(_self.Resource.Style);
$(document.body).append(_self.Resource.Html);
for (var i = 0; i < 135; i++) {
_self.AddFacial(i * 24);
}
$("#TweetFormPopupWraper .TweetPopupTitle a").click(function () {
$("#TweetFormPopupWraper").hide();
});
}
}
_this.click(function () {
$("#TweetFormPopupWraper #TweetEmotions a.emotion_img").unbind("click").click(function () {
opts.CallBack($(this).index() - 1);
});
_self.WH($(this));
$("#TweetFormPopupWraper").show();
});
_self.PageLoad();
}
});
2. [代码]demo.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.facial.js" type="text/javascript"></script>
</head>http://www.huiyi8.com/gaoxiaodonghua/
<body>美女
<div >
<input type="button" id="btn1" class="btn" value="open" />
</div>
<br />
<br />
<br />
<br />
<div >
<input type="button" id="btn2" class="btn" value="open" />
</div>
<br />
<br />
<br />
<br />
<div >
<input type="button" id="btn3" class="btn" value="open" />
</div>
<script>
$(function () {
//可以这样 统一
// $(".btn").facial({ CallBack: function (i) {
// //点击返回图片索引,然后自己做处理
// alert(i);
// }
// });
//也可以这样 分开
$("#btn1").facial({ CallBack: function (i) {
//点击返回图片索引,然后自己做处理
alert("第一个:"+i);
}
});
$("#btn2").facial({ CallBack: function (i) {
//点击返回图片索引,然后自己做处理
alert("第二个:" + i);
}
});
$("#btn3").facial({ CallBack: function (i) {
//点击返回图片索引,然后自己做处理
alert("第三个:" + i);
}
});
});
</script>
</body>
</html>
转载于:https://www.cnblogs.com/xkzy/p/3966665.html
封装 oschina.net 表情选择相关推荐
- day43 JavaWen阶段——JQuery 基础(JQuery相关开发文档,JQuery对象和JS对象区别与转换,JQuery选择器,JQuery中DOM操作,案列【QQ表情选择】【左右移动】)
今日内容 1. JQuery 基础: 概念 快速入门 JQuery对象和JS对象区别与转换 选择器 DOM操作 案例 今日源码: 链接:https://pan.baidu.com/s/1KiG0c_V ...
- 隔行换色案例||全选和全不选||QQ表情选择||多选下拉列表左右移动
01.隔行换色.html <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
- EasyExcel自定义表头导出模板并封装数据下拉选择
EasyExcel自定义表头导出模板 首先查询可变数据 动态数据Controller 表头封装 定义导出模板时的下拉数据 最终结果 首先查询可变数据 动态数据Controller @ApiOperat ...
- leveldb java实例_EZDB首页、文档和下载 - LevelDB 的 Java 封装 - OSCHINA - 中文开源技术交流社区...
EZDB 为 LevelDB 提供一个很好的 Java 封装. 功能包括:Key/value 查询 Hash/range 查询 (类似 Amazon 的 DynamoDB) 可插入式的序列化 可插入式 ...
- 基于WTL自绘 - 表情选择界面
1.无窗口绘制(网格, 背景,图片,预览). 2.采用Cximage处理图像. 3.关于源码 请发邮件 satng@qq.com 4.已经增加到wtl_duilib 0.5版Demo中 转载于:htt ...
- php 表情选择,php imagettftext和特定的表情符号
我遇到了一个问题,绘制了"杂项符号和象形文字"unicode块下的表情符号. 这是一个示例代码: header('Content-Type: image/png'); $im = ...
- [11] 微信公众帐号开发教程第11篇-符号表情的发送(上)
题外话(可以略过) 相信这篇文章已经让大家等的太久了,不是我故弄玄虚.吊大家胃口,而是写一篇文章真的需要花太多的时间.也许一篇文章,你们花3-5分钟就看完了.就学会掌握了,而我却要花2-3个小时的时间 ...
- 微信公众帐号开发教程第11篇-符号表情的发送(上)
题外话(可以略过) 相信这篇文章已经让大家等的太久了,不是我故弄玄虚.吊大家胃口,而是写一篇文章真的需要花太多的时间.也许一篇文章,你们花3-5分钟就看完了.就学会掌握了,而我却要花2-3个小时的时间 ...
- 微信公众帐号开发教程第9篇-QQ表情的发送与接收
我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是如何在微信公众平台使用QQ表情, ...
最新文章
- python学了有什么用处-python用处广吗
- 7 php程序的调试方法_PHP程序错误调试方法 让php显示错误提示
- 锋利的jQuery--关于$(document).ready()函数及jQuery代码风格
- Django 使用 HttpResponse 返回 json 字符串显示 Unicode 编码
- 会场安排问题 http://acm.nyist.net/JudgeOnline/problem.php?pid=14
- 我化身保姆为你提供 html 教学服务(6)
- 产品经理十大悲催错误
- Ubuntu换源失败:Could not get lock /var/lib/apt/lists/lock - open
- MFC中CString类字符串与长整型、浮点型、字符数组char数据之间的相互转换
- 停止页面定时刷新_Flutter实现倒计时功能、定时任务功能
- vs2015环境搭建与简单程序测试
- 【NLP】揭秘马尔可夫模型神秘面纱系列文章(三)
- 如何让网页字体文件大瘦身?前端字体优化知多D
- 计算机控制系统的典型结构形式框图,计算机控制技术课后习题
- java计算机毕业设计西藏民族大学论文管理系统源码+数据库+系统+lw文档+mybatis+运行部署
- 阿里云服务器实现内网互通
- Web 应用防火墙:Modsecurity 和核心规则集
- 【宽创热点】为什么博物馆要展示古代糕点和比基督更古老的牛肉
- mysql字段的区分度_详解MySQL索引长度和区分度之间的平衡,值得收藏
- mysql innodb文件存储_MySQL数据库和InnoDB存储引擎文件
热门文章
- pjsip for Android的编译
- 同样的电器,为什么官网能比实体店的价格便宜那么多?
- keras的学习笔记
- qprocess回调_QT进程间通信详细介绍及QProcess机制分析
- java js引擎,Java8 Nashorn JavaScript引擎
- mybatis insert 忽略 联合唯一索引_MySQL实战中,Insert语句的使用心得总结
- 5.Lambert光照Diffuse Shader
- 小程序2-基本架构讲解(一)WXSS样式
- JS-事件内置对象event
- 动态反射——Load,LoadFrom和LoadFile