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{ 392px;border: 2px solid #CCC;background: #F8F7F7;padding: 5px;}#TweetFormPopupWraper #TweetFormPopup a.emotion_img{float: left; 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>