利用jquery實現自定義添加標簽



13 48 17



特效描述:利用jquery實現 自定義添加標簽,利用jquery實現自定義添加標簽

代碼結構

1. 引入CSS

<link href="css/style.css" type="text/css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>

3. HTML代碼

<div class="headeline"></div>
<!--演示內容開始-->
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
em{font-style:normal;}
body{font:12px/180% Arial, Helvetica, sans-serif;}
a,a:visited{color:#5e5e5e;text-decoration:none;}
a:hover{color:#3366cc!important;text-decoration:none;}
.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}/* Hides from IE-mac \*/
*html .clearfix{height:1%;}
.clearfix{display:block;}/* End hide from IE-mac */
*+html .clearfix{min-height:1%;}
.demo{width:450px;margin:40px auto;position:relative;}
/* Form input */
.Form li{font-size:21px;font-weight:300}
.Form input[type=text],.Form input[type=password],.Form textarea{
	display:inline-block;padding:6px 12px;font-size:18px;font-weight:300;line-height:1.4;color:#221919;background:#fff;border:1px solid #a4a2a2;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	box-shadow:inset 0 1px rgba(34,25,25,.15),0 1px rgba(255,255,255,.8);
	-moz-box-shadow:inset 0 1px rgba(34,25,25,.15),0 1px rgba(255,255,255,.8);
	-webkit-box-shadow:inset 0 1px rgba(34,25,25,.15),0 1px rgba(255,255,255,.8);
	-webkit-transition:all .08s ease-in-out;
	-moz-transition:all .08s ease-in-out;
}
.Form textarea{min-height:90px}
.Form label{display:inline-block;line-height:1.4em;font-size:18px}
.Form input[type=text]:focus,.Form input[type=password]:focus,.Form textarea:focus{
	border-color:#006499;
	box-shadow:0 1px rgba(34, 25, 25, 0.15) inset, 0 1px rgba(255, 255, 255, 0.8), 0 0 14px rgba(82, 162, 235, 0.35);
	-moz-box-shadow:0 1px rgba(34, 25, 25, 0.15) inset, 0 1px rgba(255, 255, 255, 0.8), 0 0 14px rgba(82, 162, 235, 0.35);
	-webkit-box-shadow:0 1px rgba(34, 25, 25, 0.15) inset, 0 1px rgba(255, 255, 255, 0.8), 0 0 14px rgba(82, 162, 235, 0.35);
}
.FancyForm li,.FancyForm li .input{position:relative}
.FancyForm input[type=text],.FancyForm input[type=password],.FancyForm textarea{
	position:relative;z-index:3;display:block;width:100%;background:transparent;border:1px solid #a4a2a2;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	box-shadow:inset 0 1px rgba(34,25,25,.15),0 1px rgba(255,255,255,.8);
	-moz-box-shadow:inset 0 1px rgba(34,25,25,.15),0 1px rgba(255,255,255,.8);
	-webkit-box-shadow:inset 0 1px rgba(34,25,25,.15),0 1px rgba(255,255,255,.8);
	-webkit-transition:all .08s ease-in-out;
	-moz-transition:all .08s ease-in-out;
}
.FancyForm textarea{min-height:3.95em;line-height:1.3}
.FancyForm label{
	position:absolute;z-index:2;top:7px;left:13px;display:block;color:#BCBCBC;cursor:text;
	-moz-user-select:none;
	-webkit-user-select:none;
	-moz-transition:all .16s ease-in-out;
	-webkit-transition:all .16s ease-in-out;
}
.FancyForm .fff{
	position:absolute;z-index:1;top:0;right:0;left:3px;bottom:0;background-color:#fff;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
}
.FancyForm input[type=text]:focus+label,.FancyForm input[type=password]:focus+label,.FancyForm textarea:focus+label{opacity:.5;filter:alpha(opacity="50");}
.FancyForm .val label{left:-9999px;opacity:0!important;filter:alpha(opacity="0")!important;}
/* Button base */
.Button{
	position:relative;
	display:inline-block;
	padding:.45em .825em .45em;
	text-align:center;
	line-height:1em; 
	border:1px solid transparent;
	cursor:pointer; 
	border-radius:.3em; 
	-moz-border-radius:.3em; 
	-webkit-border-radius:.3em; 
	-moz-transition-property:color, -moz-box-shadow, text-shadow; 
	-moz-transition-duration:.05s; 
	-moz-transition-timing-function:ease-in-out; 
	-webkit-transition-property:color, -webkit-box-shadow, text-shadow; 
	-webkit-transition-duration:.05s; 
	-webkit-transition-timing-function:ease-in-out; 
	box-shadow:0 1px rgba(255,255,255,0.8), inset 0 1px rgba(255,255,255,0.35); 
	-moz-box-shadow:0 1px rgba(255,255,255,0.8), inset 0 1px rgba(255,255,255,0.35); 
	-webkit-box-shadow:0 1px rgba(255,255,255,0.8), inset 0 1px rgba(255,255,255,0.35);
}
.Button:hover {text-decoration:none;}
.Button strong {position:relative; z-index:2;}
.Button{
	display:block;border:1px solid;opacity:1;
	border-radius:.3em;
	-moz-border-radius:.3em;
	-webkit-border-radius:.3em;
	box-shadow:inset 0 1px rgba(255,255,255,0.35);
	-moz-box-shadow:inset 0 1px rgba(255,255,255,0.35);
	-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.35);
	-moz-transition-property:opacity;
	-moz-transition-duration:0.5s;
	-moz-transition-timing-function:ease-in-out;
	-webkit-transition-property:opacity;
	-webkit-transition-duration:0.5s;
	-webkit-transition-timing-function:ease-in-out;
}
.Button:hover span{
	-moz-transition-property:opacity;
	-moz-transition-duration:0.05s;
	-moz-transition-timing-function:linear;
	-webkit-transition-property:opacity;
	-webkit-transition-duration:0.05s;
	-webkit-transition-timing-function:linear;
}
.Button:active span{
	-moz-transition:none;
	-webkit-transition:none;
}
/* Red Button */
.RedButton{color:#fcf9f9; text-shadow:0 -1px rgba(34,25,25,0.5);}
.RedButton:hover {color:#fff; text-shadow:0 -1px rgba(34,25,25,0.3);}
.RedButton:active {color:#f2f0f0; text-shadow:0 -1px rgba(34,25,25,0.6);}
.RedButton{
	border-color:#015E91;
	background-color:#3693D5;
	background:-moz-linear-gradient(center top , #54B1EB, #47A0E0 50%, #419FE1 50%, #3683D5);
	background:-o-linear-gradient(top left, #54B1EB, #47A0E0 50%, #419FE1 50%, #3683D5);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#54B1EB), to(#47A0E0), color-stop(.5,#419FE1),color-stop(.5,#3683D5));
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#54B1EB', endColorstr='#3683D5');
}
.RedButton:hover{
	border-color:#0366AD;
	background-color:#3EA1D6;
	background:-moz-linear-gradient(center top, #5EB4EA, #61A1EE 50%, #59A5EB 50%, #3691E6);
	background:-o-linear-gradient(top left, #5EB4EA, #61A1EE 50%, #59A5EB 50%, #3691E6);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#5EB4EA), to(#61A1EE), color-stop(.5,#59A5EB),color-stop(.5,#3691E6));
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5EB4EA', endColorstr='#3691E6');
}
.RedButton:active{
	border-color:#013B6A;
	background-color:#3089C8;
	background:-moz-linear-gradient(center top, #4B9CDD, #4189D5 50%, #3D8BD3 50%, #3093C8);
	background:-o-linear-gradient(top left, #4B9CDD, #4189D5 50%, #3D8BD3 50%, #3093C8);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4B9CDD), to(#4189D5), color-stop(.5,#3D8BD3),color-stop(.5,#3093C8));
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B9CDD', endColorstr='#3093C8');
}
.RedButton.Button18:hover{
	box-shadow:0 1px rgba(255, 255, 255, 0.8), 0 1px rgba(255, 255, 255, 0.35) inset, 0 0 10px rgba(82, 162, 235, 0.25);
	-moz-box-shadow:0 1px rgba(255, 255, 255, 0.8), 0 1px rgba(255, 255, 255, 0.35) inset, 0 0 10px rgba(82, 162, 235, 0.25);
	-webkit-box-shadow:0 1px rgba(255, 255, 255, 0.8), 0 1px rgba(255, 255, 255, 0.35) inset, 0 0 10px rgba(82, 162, 235, 0.25);
}
.RedButton.Button18:active{
	box-shadow:0 1px 2px rgba(34, 25, 25, 0.25) inset, 0 0 3px rgba(82, 202, 235, 0.35);
	-moz-box-shadow:0 1px 2px rgba(34, 25, 25, 0.25) inset, 0 0 3px rgba(82, 202, 235, 0.35);
	-webkit-box-shadow:0 1px 2px rgba(34, 25, 25, 0.25) inset, 0 0 3px rgba(82, 202, 235, 0.35);	
}
/* login */
.login .stext{padding:6px 12px;width:380px;border:1px solid #a4a2a2;}
/* tag */
.default-tag a,.default-tag a span,.plus-tag a,.plus-tag a em,.plus-tag-add a{background:url(images/tagbg.png) no-repeat;}
.tagbtn a{color:#333333;display:block;float:left;height:22px;line-height:22px;overflow:hidden;margin:0 10px 10px 0;padding:0 10px 0 5px;white-space:nowrap;}
/* default-tag */
.default-tag{padding:16px 0 0 0;}
.default-tag a{background-position:100% 0;}
.default-tag a:hover{background-position:100% -22px;}
.default-tag a span{padding:0 0 0 11px;background-position:0 -60px;}
.default-tag a:hover span{background-position:0 -98px;}
.default-tag a.selected{opacity:0.6;filter:alpha(opacity=60);}
.default-tag a.selected:hover{background-position:100% 0;cursor:default;}
.default-tag a.selected:hover span{background-position:0 -60px;}
/* plus-tag */
.plus-tag{padding:0 0 10px 0;}
.plus-tag a{background-position:100% -22px;}
.plus-tag a span{float:left;}
.plus-tag a em{display:block;float:left;margin:5px 0 0 8px;width:13px;height:13px;overflow:hidden;background-position:-165px -100px;cursor:pointer;}
.plus-tag a:hover em{background-position:-168px -64px;}
/* plus-tag-add */
.plus-tag-add li{height:56px;position:relative;}
.plus-tag-add li .label{position:absolute;left:-110px;top:7px;display:block;}
.plus-tag-add button{float:left;}
.plus-tag-add a{float:left;margin:12px 0 0 20px;display:inline;font-size:18px;background-position:-289px -59px;padding:0 0 0 16px;}
.plus-tag-add a.plus{background-position:-289px -96px;}
</style>
<div class="demo">
	<div class="plus-tag tagbtn clearfix" id="myTags"></div>
	<div class="plus-tag-add">
		<form id="" action="" class="login">
			<ul class="Form FancyForm">
				<li>
					<span class="label">我的標簽:</span>
					<input id="" name="" type="text" class="stext" maxlength="20" />
					<label>輸入標簽</label>
					<span class="fff"></span>
				</li>
				<li>
					<button type="button" class="Button RedButton Button18" style="font-size:22px;">添加標簽</button>
					<a href="javascript:void(0);">展開推薦標簽</a>
				</li>
			</ul>
		</form>
	</div><!--plus-tag-add end-->
	<div id="mycard-plus" style="display:none;">
		<div class="default-tag tagbtn">
			<div class="clearfix">
				<a value="-1" title="互聯網" href="javascript:void(0);"><span>互聯網</span><em></em></a>
				<a value="-1" title="移動互聯網" href="javascript:void(0);"><span>移動互聯網</span><em></em></a>
				<a value="-1" title="it" href="javascript:void(0);"><span>it</span><em></em></a>
				<a value="-1" title="電子商務" href="javascript:void(0);"><span>電子商務</span><em></em></a>
				<a value="-1" title="廣告" href="javascript:void(0);"><span>廣告</span><em></em></a>
				<a value="-1" title="網絡編輯" href="javascript:void(0);"><span>網絡編輯</span><em></em></a>
				<a value="-1" title="產品經理" href="javascript:void(0);"><span>產品經理</span><em></em></a>
				<a value="-1" title="程序員" href="javascript:void(0);"><span>程序員</span><em></em></a>
				<a value="-1" title="網管" href="javascript:void(0);"><span>網管</span><em></em></a>
				<a value="-1" title="文案策劃" href="javascript:void(0);"><span>文案策劃</span><em></em></a>
				<a value="-1" title="java工程師" href="javascript:void(0);"><span>java工程師</span><em></em></a>
				<a value="-1" title="php工程師" href="javascript:void(0);"><span>php工程師</span><em></em></a>
				<a value="-1" title="dreamweaver" href="javascript:void(0);"><span>dreamweaver</span><em></em></a>
				<a value="-1" title="photoshop" href="javascript:void(0);"><span>photoshop</span><em></em></a>
				<a value="-1" title="公文寫作" href="javascript:void(0);"><span>公文寫作</span><em></em></a>
				<a value="-1" title="70后" href="javascript:void(0);"><span>70后</span><em></em></a>
				<a value="-1" title="80后" href="javascript:void(0);"><span>80后</span><em></em></a>
				<a value="-1" title="加班狂" href="javascript:void(0);"><span>加班狂</span><em></em></a>                   
			</div>
			<div class="clearfix" style="display:none;"><a value="-1" title="媒體" href="javascript:void(0);"><span>媒體</span><em></em></a></div>
			<div class="clearfix" style="display:none;"><a value="-1" title="網絡營銷" href="javascript:void(0);"><span>網絡營銷</span><em></em></a></div>
		</div>
		<div align="right"><a href="javascript:void(0);" id="change-tips" style="color:#3366cc;">換一換</a></div>
	</div><!--mycard-plus end-->
</div>
<script type="text/javascript">
var FancyForm=function(){
	return{
		inputs:".FancyForm input, .FancyForm textarea",
		setup:function(){
			var a=this;
			this.inputs=$(this.inputs);
			a.inputs.each(function(){
				var c=$(this);
				a.checkVal(c)
			});
			a.inputs.live("keyup blur",function(){
				var c=$(this);
				a.checkVal(c);
			});
		},checkVal:function(a){
			a.val().length>0?a.parent("li").addClass("val"):a.parent("li").removeClass("val")
		}
	}
}();
</script>
<script type="text/javascript">
$(document).ready(function() {
	FancyForm.setup();
});
</script>
<script type="text/javascript">
var searchAjax=function(){};
var G_tocard_maxTips=30;
$(function(){(
	function(){
		var a=$(".plus-tag");
		$("a em",a).live("click",function(){
			var c=$(this).parents("a"),b=c.attr("title"),d=c.attr("value");
			delTips(b,d)
		});
		hasTips=function(b){
			var d=$("a",a),c=false;
			d.each(function(){
				if($(this).attr("title")==b){
					c=true;
					return false
				}
			});
			return c
		};
		isMaxTips=function(){
			return	
			$("a",a).length>=G_tocard_maxTips
		};
		setTips=function(c,d){
			if(hasTips(c)){
				return false
			}if(isMaxTips()){
				alert("最多添加"+G_tocard_maxTips+"個標簽!");
				return false
			}
			var b=d?'value="'+d+'"':"";
			a.append($("<a "+b+' title="'+c+'" href="javascript:void(0);" ><span>'+c+"</span><em></em></a>"));
			searchAjax(c,d,true);
			return true
		};
		delTips=function(b,c){
			if(!hasTips(b)){
				return false
			}
			$("a",a).each(function(){
				var d=$(this);
				if(d.attr("title")==b){
					d.remove();
					return false
				}
			});
			searchAjax(b,c,false);
			return true
		};
		getTips=function(){
			var b=[];
			$("a",a).each(function(){
				b.push($(this).attr("title"))
			});
			return b
		};
		getTipsId=function(){
			var b=[];
			$("a",a).each(function(){
				b.push($(this).attr("value"))
			});
			return b
		};
		getTipsIdAndTag=function(){
			var b=[];
			$("a",a).each(function(){
				b.push($(this).attr("value")+"##"+$(this).attr("title"))
			});
			return b
		}
	}
)()});
</script>
<script type="text/javascript">
// 更新選中標簽標簽
$(function(){
	setSelectTips();
	$('.plus-tag').append($('.plus-tag a'));
});
var searchAjax = function(name, id, isAdd){
	setSelectTips();
};
// 搜索
(function(){
	var $b = $('.plus-tag-add button'),$i = $('.plus-tag-add input');
	$i.keyup(function(e){
		if(e.keyCode == 13){
			$b.click();
		}
	});
	$b.click(function(){
		var name = $i.val().toLowerCase();
		if(name != '') setTips(name,-1);
		$i.val('');
		$i.select();
	});
})();
// 推薦標簽
(function(){
	var str = ['展開推薦標簽', '收起推薦標簽']
	$('.plus-tag-add a').click(function(){
		var $this = $(this),
				$con = $('#mycard-plus');
		if($this.hasClass('plus')){
			$this.removeClass('plus').text(str[0]);
			$con.hide();
		}else{
			$this.addClass('plus').text(str[1]);
			$con.show();
		}
	});
	$('.default-tag a').live('click', function(){
		var $this = $(this),
				name = $this.attr('title'),
				id = $this.attr('value');
		setTips(name, id);
	});
	// 更新高亮顯示
	setSelectTips = function(){
		var arrName = getTips();
		if(arrName.length){
			$('#myTags').show();
		}else{
			$('#myTags').hide();
		}
		$('.default-tag a').removeClass('selected');
		$.each(arrName, function(index,name){
			$('.default-tag a').each(function(){
				var $this = $(this);
				if($this.attr('title') == name){
					$this.addClass('selected');
					return false;
				}
			})
		});
	}
})();
// 更換鏈接
(function(){
	var $b = $('#change-tips'),
		$d = $('.default-tag div'),
		len = $d.length,
		t = 'nowtips';
	$b.click(function(){
		var i = $d.index($('.default-tag .nowtips'));
		i = (i+1 < len) ? (i+1) : 0;
		$d.hide().removeClass(t);
		$d.eq(i).show().addClass(t);
	});
	$d.eq(0).addClass(t);
})();
</script>
<!--演示內容結束-->
<div style="text-align:center;clear:both">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 收縮展開 展開收縮 收縮 展開 切換按鈕 表單 表單美化 表單插件 表單美化插件 文字收縮展開 文字收縮 文字展開 文本框 text文本框 按鈕控制 添加刪除 添加標簽
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子