标签

4.19.1 标签输入效果

Hui前端框架 CSS3 HTML5
前端框架 前端开发 H-ui

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云标签