jQuery標簽點擊搜索文本框彈出熱門標簽關鍵字選擇



144 573 192



特效描述:標簽點擊搜索 文本框彈出 熱門標簽 關鍵字選擇,jQuery標簽特效制作點擊text文本框搜索框時彈出層選擇關鍵詞,熱門標簽,賦值到text文本框里面,進行熱門標簽關鍵詞搜索功能。jQuery下載。

代碼結構

1. 引入JS

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

2. HTML代碼

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
textarea,input{
	padding:4px;line-height:1em;color:#8c7e7e;background:#fcf9f9;border:1px solid;border-color:#ddd #e1dfdf #d1cdcd;
	box-shadow:inset 0 0 2px rgba(255,255,255,0.75);
	-moz-box-shadow:inset 0 0 2px rgba(255,255,255,0.75);
	-webkit-box-shadow:inset 0 0 2px rgba(255,255,255,0.75);
}
a{color:#221919;text-decoration:none;outline:none;}
a{
	-webkit-transition-property:background-color,color;
	-webkit-transition-duration:.4s,.5s;
	-webkit-transition-timing-function:ease,ease;
	-moz-transition-property:background-color,color;
	-moz-transition-duration:.4s,.5s;
	-moz-transition-timing-function:ease,ease;
	-ms-transition-property:background-color,color;
	-ms-transition-duration:.4s,.5s;
	-ms-transition-timing-function:ease,ease;
	-o-transition-property:background-color,color;
	-o-transition-duration:.4s,.5s;
	-o-transition-timing-function:ease,ease;
	transition-property:background-color,color;
	transition-duration:.4s,.5s;
	transition-timing-function:ease,ease
}
a:hover{color:#3366cc;text-decoration:underline;}
body{font:12px/180% Arial,Lucida,Verdana,"宋體",Helvetica,sans-serif;font-size:13px;color:#211922;}
/* Search */
#Search{margin:20px auto;width:300px;}
#Search input{
	float:left;width:140px;background-color:#F7F8F9;border:1px solid;border-color:#c2c0c0 #cccaca #d1cfcf;font-size:14px;line-height:1.3;
	border-radius:5px 0 0 5px;
	-moz-border-radius:5px 0 0 5px;
	-webkit-border-radius:5px 0 0 5px;
	box-shadow:0 1px #fff, inset 0 1px rgba(34,25,25,0.05);
	-moz-box-shadow:0 1px #fff, inset 0 1px rgba(34,25,25,0.05);
	-webkit-box-shadow:0 1px #fff, inset 0 1px rgba(34,25,25,0.05);
}
#Search input:focus{
	background-color:#fff;
	box-shadow:0 1px #fff, inset 0 1px rgba(34,25,25,0.1);
	-moz-box-shadow:0 1px #fff, inset 0 1px rgba(34,25,25,0.1);
	-webkit-box-shadow:0 1px #fff, inset 0 1px rgba(34,25,25,0.1);
}
#Search a{
	float:left;margin-left:-1px;padding:6px 7px 1px 7px;min-height:17px;_height:17px;border:1px solid;border-color:#c2c0c0 #cccaca #d1cfcf;
	border-radius:0 3px 3px 0;
	-moz-border-radius:0 3px 3px 0;
	-webkit-border-radius:0 3px 3px 0;
	box-shadow:0 1px rgba(255,255,255,0.9), inset 0 0 2px rgba(255,255,255,0.75);
	-moz-box-shadow:0 1px rgba(255,255,255,0.9), inset 0 0 2px rgba(255,255,255,0.75);
	-webkit-box-shadow:0 1px rgba(255,255,255,0.9), inset 0 0 2px rgba(255,255,255,0.75);
}
#Search a:active{
	box-shadow:inset 0 1px 1px rgba(34,29,29,0.15);
	-moz-box-shadow:inset 0 1px 1px rgba(34,29,29,0.15);
	-webkit-box-shadow:inset 0 1px 1px rgba(34,29,29,0.15);
}
/* searchTag */
#searchTag{
	z-index:1000;display:none;position:absolute;top:0px;left:0px;width:390px;padding:10px;background:#fff;border:solid 1px #cccaca;
	border-radius:0 0 5px 5px;
	-moz-border-radius:0 0 5px 5px;
	-webkit-border-radius:0 0 5px 5px;
	box-shadow:0 2px 4px rgba(34,25,25,0.5);
	-moz-box-shadow:0 2px 4px rgba(34,25,25,0.5);
	-webkit-box-shadow:0 2px 4px rgba(34,25,25,0.5);
}
#searchTag p{text-align:left;line-height:22px;padding:2px 0;margin:0;border:0;}
#searchTag span{font-weight:bold;color:#3366cc;}
#searchTag em.red{color:#ff0000;font-style:normal;}
#searchTag a{margin:0 5px;}
#tagClose{font-size:12px;color:#ff6600;font-weight:800;cursor:pointer;position:absolute;top:2px;right:8px;}
</style>
<script type="text/javascript">
//ie6 select框層遮罩解決插件
(function($){
	$.fn.bgIframe = $.fn.bgiframe = function(s) {
		if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) {
			s = $.extend({
				top     : 'auto', // auto == .currentStyle.borderTopWidth
				left    : 'auto', // auto == .currentStyle.borderLeftWidth
				width   : 'auto', // auto == offsetWidth
				height  : 'auto', // auto == offsetHeight
				opacity : true,
				src     : 'javascript:false;'
			}, s || {});
			var prop = function(n){return n&&n.constructor==Number?n+'px':n;},
				html = '<iframe class="bgiframe"frameborder="0"tabindex="-1"src="'+s.src+'"'+
						   'style="display:block;position:absolute;z-index:-1;'+
							   (s.opacity !== false?'filter:Alpha(Opacity=\'0\');':'')+
							   'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\')':prop(s.top))+';'+
							   'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\')':prop(s.left))+';'+
							   'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+\'px\')':prop(s.width))+';'+
							   'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+
						'"/>';
			return this.each(function() {
				if ( $('> iframe.bgiframe', this).length == 0 )
					this.insertBefore( document.createElement(html), this.firstChild );
			});
		}
		return this;
	};
})(jQuery);
//浮動層定位設置插件
jQuery.fn.selectCity = function(targetId) {
	var _seft = this;
	var targetId = $(targetId);
	this.click(function(){
		var A_top = $(this).offset().top + $(this).outerHeight(true);  //  1
		var A_left =  $(this).offset().left;
		targetId.bgiframe();
		targetId.show().css({"position":"absolute","top":A_top+"px" ,"left":A_left+"px"});
	});
	targetId.find("#tagClose").click(function(){
		targetId.hide();
	});
	$(document).click(function(event){
		if(event.target.id!=_seft.selector.substring(1)){
			targetId.hide();	
		}
	});
	targetId.click(function(e){
		e.stopPropagation(); //  2
	});
    return this;
}
//調用浮動層
$(function(){
	$("#selecttags").selectCity("#searchTag");
});
//為文本域連續賦值
function checktag(o){
	var tagid = function(id){
		return document.getElementById(id);
	}
	var tags = [];//存放標簽,避免重復加入
	var tagidSPLITCHAR = ' ';//設定分隔符,根據程序需求可改
	var d = tagid('selecttags');
	if (d.value)
	tags = d.value.split(tagidSPLITCHAR);
	var v = o.innerHTML;//如果tag有別的值或者別的非innerHTML里體現的內容
	var s = tagidSPLITCHAR+tags.join(tagidSPLITCHAR)+tagidSPLITCHAR
	if(!new RegExp(tagidSPLITCHAR+v+tagidSPLITCHAR,'g').test(s)){
		s+=v;
	}
	s = s.replace(new RegExp("(^"+tagidSPLITCHAR+"*|"+tagidSPLITCHAR+"*tagid)","g"),'');
	d.value = s;
	tags = s.split(tagidSPLITCHAR);
}
</script>
<div id="Search">
	<form action="" method="get" class="text">
		<input type="text" id="selecttags" name="q" size="27" value="" placeholder="搜索你喜歡的" />
		<a id="query_button" href="#" class="lg"><img src="images/search.gif" alt="" /></a>
	</form>
</div><!--Search end-->
<div id="searchTag">
	<div id="tagClose">關閉</div>
	<p><span>溫馨提示:</span>多個標簽請用“<em class="red">空格</em>”、“<em class="red">逗號</em>”或“<em class="red">分號</em>”隔開。</p>
	<p><span>熱門標簽:</span><a href="javascript:void(0)" onClick="checktag(this)">彩妝</a><a href="javascript:void(0)" onClick="checktag(this)">美發</a><a href="javascript:void(0)" onClick="checktag(this)">美優博客</a><a href="javascript:void(0)" onClick="checktag(this)">aaa</a><a href="javascript:void(0)" onClick="checktag(this)">bbb</a><a href="javascript:void(0)" onClick="checktag(this)">天堂</a><a href="javascript:void(0)" onClick="checktag(this)">eee</a><a href="javascript:void(0)" onClick="checktag(this)">fff</a><a href="javascript:void(0)" onClick="checktag(this)">ggg</a></p>
	<p><span>您使用過的標簽:</span><a href="javascript:void(0)" onClick="checktag(this)">軟件</a><a href="javascript:void(0)" onClick="checktag(this)">Delphi</a><a href="javascript:void(0)" onClick="checktag(this)">博客</a><a href="javascript:void(0)" onClick="checktag(this)">源碼</a><a href="javascript:void(0)" onClick="checktag(this)">彩妝</a><a href="javascript:void(0)" onClick="checktag(this)">google</a><a href="javascript:void(0)" onClick="checktag(this)">新浪</a></p>
</div><!--searchTag end-->



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


熱門標簽: 文字疊加 文字層疊 文字放大縮小 文字縮放 文字大小 文字放大 文字縮小 文字變大 文字變小 文字收縮展開 文字收縮 文字展開 文字提示框 提示文字 文字淡出淡進 文字淡出 文字淡進 文字拖動 文字拖拽 文字全屏 文字延遲加載 文字延遲 文字加載 文字翻轉 文字旋轉 360全景 360度全景 h5文字動畫 h5文字邊框動畫 html5文字動畫 html5文字邊框動畫 彈出層拖動 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 文字切換 文字選項卡 文字滑動 文字滑塊 文字滾動 文字無縫滾動 文字間歇滾動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 浮動提示框 圖片文字 文字導航菜單 文字導航 文字菜單 切換按鈕 表單 表單美化 表單插件 表單美化插件 文字 文字插件 浮動菜單 浮動導航 彩色文字 文本框 text文本框 layer 搜索框
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子