封装 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>
封装 oschina.net 表情选择的更多相关文章
- 【Qt】仿QQ表情选择控件
表情选择控件在聊天应用中常常要用到,做起来尽管不复杂可是非常繁琐.特别是有些图标须要按顺序排列.每次重做必定是非常费时.所以我将聊天表情选择控件封装成一个独立的类QFaceSelectWid ...
- 仿QQ发语音、图片选择、表情选择demo
一款仿QQ发语音.图片选择.调用拍照.表情选择的demo git地址:https://github.com/PureLovePeter/pic.git. 喜欢的请 star star star,共 ...
- Ext扩展的QQ表情选择面板
Ext扩展的QQ表情选择面板 define(function () { EmoteChooser = function(cfg){ this.width=340; this.height=112; t ...
- react+ts封装AntdUI的日期选择框之月份选择器DatePicker.month
需求:由于在项目开发中,当需要使用该组件时都需要对该组件进行大量的代码输出,为了方便代码统一管理,减少冗余代码,所以将此组件进行二次封装. 其他成员在使用中只需将自己的设置通过对应的参数传递到该组件, ...
- 使用 vite 构建一个表情选择插件
初始化 Vite 基于原生 ES 模块提供了丰富的内建功能,开箱即用.同时,插件足够简单,它不需要任何运行时依赖,只需要安装 vite (用于开发与构建)和 sass (用于开发环境编译 .scss ...
- android 开发高仿QQ表情选择、输入框
首先大家看效果: 用到的文件有(源码文件有,只包含表情.输入框等有关文件,工程项目是公司项目,恕不公开啦): res: drawable/face_del_icon.xml drawable/iv_f ...
- QQ表情的发送与接收
我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是如何在微信公众平台使用QQ表情, ...
- [033] 微信公众帐号开发教程第9篇-QQ表情的发送与接收（转）
我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是怎样在微信公众平台使用QQ表情, ...
- [033] 微信公众帐号开发教程第9篇-QQ表情的发送与接收
我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是如何在微信公众平台使用QQ表情, ...
随机推荐
- HTML5 2D平台游戏开发#6地图绘制
此前已经完成了一部分角色的动作,现在还缺少可以交互的地图让游戏看起来能玩.不过在开始之前应当考虑清楚使用什么类型的地图,就2D平台游戏来说,一般有两种类型的地图,Tile-based和Art-base ...
- .net之Ajax获取接口数据并实现循环播放
<script type="text/javascript"> var xhr; ; var res; window.onload = function () { xh ...
- 【数据挖掘】分类之kNN（转载）
[数据挖掘]分类之kNN 1.算法简介 kNN的思想很简单:计算待分类的数据点与训练集所有样本点,取距离最近的k个样本:统计这k个样本的类别数量:根据多数表决方案,取数量最多的那一类作为待测样本的类别 ...
- MS SQL 分类汇总参数 grouping(**)=1 rollup cubt
转:http://www.111cn.net/database/mssqlserver/43368.htm 本文章介绍了关于sql多级分类汇总实现方法及数据结构,有碰到问题的同学可参考一下. 据库结构 ...
- 很全的php数组操作方法
一.数组操作的基本函数 数组的键名和值 array_values($arr);获得数组的值 array_keys($arr);获得数组的键名 array_flip($arr);数组中的值与键名互换(如 ...
- Python 自动化之验证码识别
之前公司的验证码比较简单,可以采取直接破解的方式进行登录 部分代码如下: # -*- coding: utf-8 -*- from selenium import webdriver from sel ...
- python 快速排序详述
快速排序是对“冒泡排序”的优化算法,都属于交换排序类. 描述:它通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据要小,然后再按此方法对这两部分数据分别进行快速 ...
- Hive高级
HiveServer2 概述: https://cwiki.apache.org/confluence/display/Hive/HiveServer2+Overview2 客户端: https:// ...
- EF之POCO应用系列3——延迟加载
EF之POCO应用系列4——延迟加载 当我们进行查询的时候,哪些关系的数据将会被加载到内存呢?所有相关的对象都需要吗?在一些场合可能有意义,例如,当查询的实体仅仅拥有一个相关的子实体,但是,多数情况下 ...
- [Symfony\Component\Config\Definition\Exception\InvalidConfigurationException] The child node "db_driver" at path "fos_user" must be configured.
$ php bin/console server:run [Symfony\Component\Config\Definition\Exception\InvalidConfigurationExce ...