有趣的jquery搜索框插件zySearch js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是有趣的jquery搜索框插件zySearch js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>有趣的jquery搜索框插件zySearch</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body style="text-align:center;">
<div class="zySearch" id="zySearch"></div>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/zySearch.js"></script>
<script type="text/javascript">
$("#zySearch").zySearch({
	"width":"355",
	"height":"33",
	"parentClass":"pageTitle",
	"callback":function(keyword){
		console.info("搜索的关键字");
		console.info(keyword);
	}
});
</script>
</body>
</html>

JS代码(zySearch.js):

/* * zySearch.js 鎼滅储鎻掍欢 http://www.doit666.com * by zhangyan 2015-03-05 QQ:623585268*/
(function($,undefined){
	$.fn.zySearch = function(options,param){
	var otherArgs = Array.prototype.slice.call(arguments,1);
	if (typeof options == 'string'){
	var fn = this[0][options];
	if($.isFunction(fn)){
	return fn.apply(this,otherArgs);
}
else{
	throw ("zySearch - No such method:" + options);
}
}
return this.each(function(){
	var para ={
}
;
	// 淇濈暀鍙傛暟var self = this;
	// 淇濆瓨缁勪欢瀵硅薄var defaults ={
	"width":"355","height":"33","callback":function(keyword){
	console.info("鎼滅储鐨勫叧閿瓧");
	console.info(keyword);
}
}
;
	para = $.extend(defaults,options);
	this.init = function(){
	this.createHtml();
	// 鍒涘缓缁勪欢html}
;
	/** * 鍔熻兘锛氬垱寤轰笂浼犳墍浣跨敤鐨刪tml * 鍙傛暟:鏃? * 杩斿洖:鏃? */
this.createHtml = function(){
	var html = '';
	html += '<b class="search-img"></b>';
	html += '<input id="searchInput" class="search-input" type="text" placeholder="鎼滅储灏忚幢楦★紵">';
	html += '<button class="search-btn btn">鎼滅储</button>';
	$(self).append(html);
	// 鍒濆鍖杊tml涔嬪悗缁戝畾鎸夐挳鐨勭偣鍑讳簨浠? this.addEvent();
}
;
	/** * 鍔熻兘锛氱粦瀹氫簨浠? * 鍙傛暟:鏃? * 杩斿洖:鏃? */
this.addEvent = function(){
	// 鍒ゆ柇鐜板湪鏄惁鍦ㄧЩ鍔ㄨ澶囦笂鎴栧睆骞曞皬鐨勬儏鍐典笅鐐瑰嚮if($("."+para.parentClass).css("width")!="320px"){
	// 涓嶆槸// 瑙ｉ櫎浜嬩欢$('#searchInput').unbind('focus').unbind('blur');
	// 闇€瑕佷慨鏀瑰浘鐗囧綋鍓峵op鍊?$(".search-img").css({
	"top":"0px","height":"0px"}
);
	$('#searchInput').blur();
	// 绉婚櫎鐒︾偣$("#searchInput").bind("focus",function(){
	$(".search-img").animate({
	"top":"-23px","height":"24px"}
,"slow");
}
);
	$("#searchInput").bind("blur",function(){
	$(".search-img").animate({
	"top":"0px","height":"0"}
,"slow");
}
);
}
else{
	// 鏄?$('#searchInput').unbind('focus').unbind('blur');
	$(".search-img").css({
	"top":"1px","height":"0px"}
);
	$('#searchInput').blur();
	// 绉婚櫎鐒︾偣$("#searchInput").bind("focus",function(){
	$(".search-img").animate({
	"top":"-40px","height":"24px"}
,"slow");
}
);
	$("#searchInput").bind("blur",function(){
	$(".search-img").animate({
	"top":"1px","height":"0px"}
,"slow");
}
);
}
// 鐩戝惉娴忚鍣ㄥ彉鍖?$(window).resize(function(){
	if($("."+para.parentClass).css("width")!="320px"){
	// 涓嶆槸// 瑙ｉ櫎浜嬩欢$('#searchInput').unbind('focus').unbind('blur');
	// 闇€瑕佷慨鏀瑰浘鐗囧綋鍓峵op鍊?$(".search-img").css({
	"top":"0px","height":"0px"}
);
	$('#searchInput').blur();
	// 绉婚櫎鐒︾偣$("#searchInput").bind("focus",function(){
	$(".search-img").animate({
	"top":"-23px","height":"24px"}
,"slow");
}
);
	$("#searchInput").bind("blur",function(){
	$(".search-img").animate({
	"top":"0px","height":"0"}
,"slow");
}
);
}
else{
	$('#searchInput').unbind('focus').unbind('blur');
	$(".search-img").css({
	"top":"1px","height":"0px"}
);
	$('#searchInput').blur();
	// 绉婚櫎鐒︾偣$("#searchInput").bind("focus",function(){
	$(".search-img").animate({
	"top":"-40px","height":"24px"}
,"slow");
}
);
	$("#searchInput").bind("blur",function(){
	$(".search-img").animate({
	"top":"1px","height":"0px"}
,"slow");
}
);
}
}
);
	// 娣诲姞鎼滅储鍥炶溅浜嬩欢document.onkeydown=function(event){
	var e = event || window.event || arguments.callee.caller.arguments[0];
	if(e && e.keyCode==13){
	// enter 閿?// 鍥炶皟鏂规硶para.callback($("#searchInput").val());
}
}
;
	$(".search-btn").bind("click",function(){
	// 鍥炶皟鏂规硶para.callback($("#searchInput").val());
}
);
}
;
	// 鍒濆鍖栦笂浼犳帶鍒跺眰鎻掍欢this.init();
}
);
}
;
}
)(jQuery);

CSS代码(style.css):

@charset "utf-8";/* zySearch */
.zySearch{position:relative;width:520px;margin:40px auto 0 auto;}
.zySearch .search-img{background:url("../images/chicken.gif") no-repeat scroll left top transparent;display:block;height:0;left:39%;margin-left:-12px;position:absolute;top:10px;width:24px;}
.zySearch .search-input{color:#999;border:1px solid #D0D0D0;height:33px;line-height:33px;margin-right:5px;padding:0 10px;width:268px;}
.zySearch .search-btn{background:none repeat scroll 0 0 #F04243;border:0 none;border-radius:0;color:#FFFFFF;cursor:pointer;height:35px;line-height:33px;padding:0;vertical-align:baseline !important;width:76px;text-align:center;vertical-align:middle;white-space:nowrap;margin-bottom:0;font-weight:normal;font-size:14px;display:inline-block;position:relative;}

附件:下载该文件资源,减少时间成本(增值服务)