HTML JQuery调用新浪微薄1630个表情插件_网页表情选择组件例子

最近都在准备博客回复改版的事件、研究了新浪的 web.api 成功调用的新浪的表情组件

来和大家分享一下、非常好用的一个东西、希望对大家有帮助

先一起来欣赏一下运行的效果吧

是不是非常炫呀、接下来一起来看看是怎么实现的吧

JS自定义hashtable代码如下

//自定义hashtable
function Hashtable() {
    this._hash = new Object();
    this.put = function(key, value) {
        if (typeof (key) != "undefined") {
            if (this.containsKey(key) == false) {
                this._hash[key] = typeof (value) == "undefined" ? null : value;
                return true;
            } else {
                return false;
            }
        } else {
            return false;
        }
    }
    this.remove = function(key) { delete this._hash[key]; }
    this.size = 
		function() { var i = 0; for (var k in this._hash) { i  ; } return i; }
    this.get = function(key) { return this._hash[key]; }
    this.containsKey = 
		function(key) { return typeof (this._hash[key]) != "undefined"; }
    this.clear = 
		function() { for (var k in this._hash) { delete this._hash[k]; } }
}

初始化缓存、页面仅仅加载一次就可以了

$(function() {
	$.ajax( {
		dataType : ´json´,
		url : ´json/jquery.sinaEmotion.json´,
		success : function(response) {
			var data = response.data;
			for ( var i in data) {
				if (data[i].category == ´´) {
					data[i].category = ´默认´;
				}
				if (emotions[data[i].category] == undefined) {
					emotions[data[i].category] = new Array();
					categorys.push(data[i].category);
				}
				emotions[data[i].category].push( {
					name : data[i].phrase,
					icon : data[i].icon
				});
				uSinaEmotionsHt.put(data[i].phrase, data[i].icon);
			}
		}
	});
});

替换

function AnalyticEmotion(s) {
	if(typeof (s) != "undefined") {
		var sArr = s.match(/[.*?]/g);
		for(var i = 0; i < sArr.length; i  ){
			if(uSinaEmotionsHt.containsKey(sArr[i])) {
				var reStr = "<img src="" 
				  uSinaEmotionsHt.get(sArr[i]) 
				  "" height="22" width="22" />";
				s = s.replace(sArr[i], reStr);
			}
		}
	}
	return s;
}

显示分类

function showCategorys(){
	var page = arguments[0]?arguments[0]:0;
	if(page < 0 || page >= categorys.length / 5){
		return;
	}
	$(´#emotions .categorys´).html(´´);
	cat_page = page;
	for(var i = page * 5; i < (page   1) * 5 && i < categorys.length;   i){
		$(´#emotions .categorys´)
			.append($(´<a href="javascript:void(0);">´ 
				  categorys[i]   ´</a>´));
	}
	$(´#emotions .categorys a´).click(function(){
		showEmotions($(this).text());
	});
	$(´#emotions .categorys a´).each(function(){
		if($(this).text() == cat_current){
			$(this).addClass(´current´);
		}
	});
}

显示表情

function showEmotions(){
	var category = arguments[0]?arguments[0]:´默认´;
	var page = arguments[1]?arguments[1] - 1:0;
	$(´#emotions .containersina´).html(´´);
	$(´#emotions .page´).html(´´);
	cat_current = category;
	for(var i = page * 72; i < (page   1) * 72 && i < emotions[category].length;   i){
		$(´#emotions .containersina´)
		.append($(´<a href="javascript:void(0);" title="´ 
		  emotions[category][i].name   ´" ><img src="´ 
		  emotions[category][i].icon   ´" alt="´ 
		  emotions[category][i].name   ´" width="22px" height="22px" /></a>´));
	}
	$(´#emotions .containersina a´).click(function(){
		target.insertText($(this).attr(´title´));
		$(´#emotions´).remove();
	});
	for(var i = 1; i < emotions[category].length / 72   1;   i){
		$(´#emotions .page´).append($(´<a href="javascript:void(0);"´ 
			  (i == page   1?´ class="current"´:´´)   ´>´   i   ´</a>´));
	}
	$(´#emotions .page a´).click(function(){
		showEmotions(category, $(this).text());
	});
	$(´#emotions .categorys a.current´).removeClass(´current´);
	$(´#emotions .categorys a´).each(function(){
		if($(this).text() == category){
			$(this).addClass(´current´);
		}
	});
}

HTML代码如下

<div style="width:450px; height:auto; margin:100px auto;">
	<h1>JQuery新浪1630个表情插件(带解析方法)</h1>
	<h1>完美兼容IE6 所有浏览器</h1>
	<div id="out" style="height:auto;width:400px;
		border:1px dashed #000000;padding:10px;"></div>
	<textarea class="emotion" cols="58" rows="5" 
		style="font-size: 13px;"></textarea>
	<br />
	<input id="face" type="button" value="表情" />
	<input id="analytic" type="button" value="解析" 
		onClick="out()" />
	<br />
</div>

当然在整个代码实现之前你得引入相应的JS和CSS文件、对应的文件在源代码里面有

最后给大家献上源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1zdRg 密码: 6xe9

另外还有一个本地版本：http://dwtedx.com/download.html?bdkey=s/1dDtpOpN 密码: 6s3r