标签 3.1版本之后请到这个地方查看文档

4.19.1 标签输入效果

HTML代码

<div class="Hui-tags">
	<div class="Hui-tags-editor cl"><i class="Hui-tags-icon Hui-iconfont">&#xe64b;</i> <span class="Hui-tags-token">Hui前端框架</span> <span class="Hui-tags-token">CSS3</span> <span class="Hui-tags-token">HTML5</span>
		<div class="Hui-tags-iptwrap">
			<input type="text" class="Hui-tags-input" maxlength="20" value="">
			<label class="Hui-tags-label">添加相关标签，用空格或回车分隔</label>
		</div>
	</div>
	<div class="Hui-tags-list">
		<div class="Hui-notag" style="display:none">暂无常用标签</div>
		<div class="Hui-tags-has"><span>前端框架</span> <span>前端开发</span> <span>H-ui</span></div>
	</div>
	<input type="hidden" class="Hui-tags-val" name="" value="">
</div>

CSS代码

.Hui-tags{border:solid 1px #dedede; padding:0 10px}
	.Hui-tags-editor{position:relative; padding:10px 0 10px 24px}
	.Hui-tags-editor .Hui-tags-icon{position:absolute; left:0; top:11px; font-size:14px; color:#666}
		.Hui-tags-token{color:#aaa; float:left; font-size:12px; height:20px; line-height:20px; margin-right:8px; padding:0 1px; white-space:nowrap; cursor:pointer}
		.Hui-tags-token:before{content:"#"}
		.Hui-tags-token:hover{text-decoration:line-through}
		.Hui-tags-iptwrap{position:relative; float:left}
			.Hui-tags-input{position:relative;height:20px;min-width:60px; border:0 none; vertical-align:top;line-height:20px; color:#333;z-index:2;background: url(../images/empty.png) repeat scroll 0 0; display:inline-block; width:100%}
			.Hui-tags-label{position:absolute; top:0; left:2px; width:240px; height:20px; line-height:20px; font-size:14px; overflow:hidden; z-index:1; color:#ccc}
		.Hui-tags-list{padding:0 0 10px 0; display:none}
	.Hui-notag{font-size:12px}
	.Hui-tags-has span{cursor:pointer; font-size:12px; white-space:nowrap; margin-right:10px}

JS代码

var time1;
	$(".Hui-tags-lable").show();
	$(".Hui-tags-input").val("");
	$(document).on("blur",".Hui-tags-input",function(){
		time1 = setTimeout(function(){
			$(this).parents(".Hui-tags").find(".Hui-tags-list").slideUp();
		}, 400);
	});
	$(document).on("focus",".Hui-tags-input",function(){
		clearTimeout(time1);
	});
	$(document).on("click",".Hui-tags-input",function(){
		$(this).find(".Hui-tags-input").focus();
		$(this).find(".Hui-tags-list").slideDown();
	});
	function gettagval(obj){
		var str ="";
		var token =$(obj).parents(".Hui-tags").find(".Hui-tags-token");
		//alert(token.length)
		if(token.length<1){
			$(obj).parents(".Hui-tags").find(".Hui-tags-val").val("");
			return false;
		}
		for(var i = 0;i< token.length;i++){
			str += token.eq(i).text() + ",";
			$(obj).parents(".Hui-tags").find(".Hui-tags-val").val(str);
		}
	}
	$(document).on("keydown",".Hui-tags-input",function(event){
		$(this).next().hide();
		var v = $(this).val().replace(/\s+/g, "");
		var reg=/^,|,$/gi;
		v=v.replace(reg,"");
		v=$.trim(v);
		var token =$(this).parents(".Hui-tags").find(".Hui-tags-token");
		if(v!=''){
			if(event.keyCode==13||event.keyCode==108||event.keyCode==32){
				$('<span class="Hui-tags-token">'+v+'</span>').insertBefore($(this).parents(".Hui-tags").find(".Hui-tags-iptwrap"));
				$(this).val("");
				gettagval(this);
			}
		}else{
			if(event.keyCode==8){
				if(token.length>=1){
					$(this).parents(".Hui-tags").find(".Hui-tags-token:last").remove();
					gettagval(this);
				}
				else{
					$(this).parents(".Hui-tags").find(".Hui-tags-lable").show();
					return false;
				}
				
			}
		}	
	});
	
	$(document).on("click",".Hui-tags-has span",function(){
		var taghasV = $(this).text();
		taghasV=taghasV.replace(/(^\s*)|(\s*$)/g,"");
		$('<span class="Hui-tags-token">'+taghasV+'</span>').insertBefore($(this).parents(".Hui-tags").find(".Hui-tags-iptwrap"));
		gettagval(this);
		$(this).parents(".Hui-tags").find(".Hui-tags-input").focus();
	});
	$(document).on("click",".Hui-tags-token",function(){
		var token =$(this).parents(".Hui-tags").find(".Hui-tags-token");
		var it = $(this).parents(".Hui-tags");
		$(this).remove();
		switch(token.length){
			case 1 : it.find(".Hui-tags-lable").show();
			break;
		}
		var str ="";
		var token =it.find(".Hui-tags-token");
		//alert(token.length)
		if(token.length<1){
			it.find(".Hui-tags-val").val("");
			return false;
		}
		for(var i = 0;i< token.length;i++){
			str += token.eq(i).text() + ",";
			it.find(".Hui-tags-val").val(str);
		}		
	});

4.19.2 标签混排效果

HTML代码

<div class="pd-10 tags"> <a href="http://www.h-ui.net/">H-ui前端框架</a> <a href="http://www.h-ui.net/websafecolors.shtml">Web安全色</a> <a href="http://www.h-ui.net/Hui-4.4-Unslider.shtml">jQuery轮播插件</a> <a href="http://idc.likejianzhan.com/vhost/korea_hosting.php">韩国云虚拟主机</a> <a href="http://www.h-ui.net/bug.shtml">IEbug</a> <a href="http://www.h-ui.net/site.shtml">IT网址导航</a> <a href="http://www.h-ui.net/icon/index.shtml">网站常用小图标</a> <a href="http://www.h-ui.net/tools/jsformat.shtml">web工具箱</a> <a href="http://www.h-ui.net/bg/index.shtml">网站常用背景素材</a> <a href="http://www.h-ui.net/yuedu/chm.shtml">H-ui阅读</a> <a href="http://www.h-ui.net/easydialog-v2.0/index.html">弹出层插件</a> <a href="http://www.h-ui.net/SuperSlide2.1/demo.html">SuperSlide插件</a> <a href="http://www.h-ui.net/TouchSlide1.1/demo.html">TouchSlide</a></div>

CSS代码

.tags a{height:26px; line-height:26px;padding-right:6px}
	.tags0{}
	.tags1{color:#C00; font-size:24px}
	.tags2{color:#030; font-size:16px}
	.tags3{color:#00F}
	.tags4{font-size:16px}
	.tags5{color:#C00; font-size:20px}
	.tags6{color:#F06 font-size:20px}
	.tags7{color:#030; font-weight:bold; font-size:18px}
	.tags8{color:#F06; font-weight:bold}
	.tags9{color:#C00; font-weight:bold;font-size:16px}
.tags a:hover{color:#F00; text-decoration:underline}

可根据自己的需求对css进行修改

JS代码

引入jQuery

var tags_a = $(".tags a");
tags_a.each(function(){
	var x = 9;
	var y = 0;
	var rand = parseInt(Math.random() * (x - y + 1) + y);
	$(this).addClass("tags"+rand)});

注意： 如果页面中引用了h-ui.js，无需重复粘贴上面脚本代码。

4.19.3 tag云标签