改善交互體驗-巧用底圖+JS做搜索框動態效果

    本文關鍵字:搜索框 js改變文字 代碼與效果分離

    做前台的親們也許經常用到這個東西,即使您不是做前台的同學,想必在瀏覽網頁的時候也經常碰到某些網站有諸如此類的搜索框.

我們點擊它,提示性文字消失,如圖然后離開它,文字再現.或者當我們沒有輸入任何內容的時候,依然返回提示性文字.

    諸如此類的需求,可以說已經非常古老,網上案例也是一搜一大堆.但盡管如此,我們也能從中發現,這些所謂的實現可謂非常簡單,就是利用JS判斷輸入框然后決定是否將文字替換.

例如:

<script>
$("#tbxKeyword").focus(function(){
     if($("#tbxKeyword").val() == "請輸入關鍵字"){

　　    $("#tbxKeyword").val("");

    }
});

$("#tbxKeyword").blur(function(){
    if($("#tbxKeyword").val() == ""){

　　    $("#tbxKeyword").val("請輸入關鍵字");

    }
});
</script>

    這確實能直觀地解決基本的問題,但更多的問題有待解決:

    1.當提示性文字要求更換顏色,或者干脆用藝術字體,區別於客戶輸入的文字樣式.

    2.某次變更界面時,需要將文字改變內容,例如換成"請輸入您的關鍵字",而作為美工而言,對編譯好的JS沒有任何操作權限.即便可以更改,因為界面少量內容的改動,牽扯到JS的修改也是非常費時費力.

    3.您的網站有不止一個這樣的搜索框,它們的內容大致有"請輸入關鍵字","關鍵字","搜索內容"......如果再去更改JS,將非常可能導致出錯.

我也是曾經深陷這個怪圈很久,某一天突然看到這個不起眼的放大鏡底圖,讓我眼前頓時一亮,能否將這個底圖發揚一下光輝,也好讓頁面JS程序和界面徹底分離一下?

css樣式中有關backgroud-position的章節對此UI們應該不會陌生.我的思路是放大鏡圖片稍微擴大一下,然后根據用戶行為去改變它的position就可以了.

更改之后的放大鏡底圖如下:

從此它有兩種狀態了,在JS中根據用戶行為去改變它的position.

主要代碼如下:

<script type="text/javascript">
function chkCss(){	
	$("input[rel='search']").each(function(){
											  setCss($(this));
											  $(this).focus(function(){
											      clearCss($(this));
											  });
											  $(this).blur(function(){
											      setCss($(this));
											  });
	});	
}
 
function setCss(obj){
			if(obj.val() != "")	clearCss(obj);
			else fillCss(obj);
} 
function clearCss(obj){
		obj.css("background-position","0px -35px");
}
function fillCss(obj){
		obj.css("background-position","0px -5px");
}
setTimeout(function(){chkCss();},100);
</script>

    用了這樣的方式之后,以上的諸多問題都能很好地解決.

    1.我們可以讓美工盡情更改底圖中文字的顏色.內容.更改時直觀,獨立,絕不影響其它的內容.

    2.我們可以把所有搜索框的提示性內容全部放在一張圖中,然后為不同的搜索框定制不同的樣式效果.

    3.下次更改時,不用到處去找文字.也不用害怕會出錯,因為圖片又不大,一眼就知道該動哪里.前提是美工要有基本的像素概念,如果認為一兩個像素不對齊也不要緊的那種人,我建議還是不能承擔這種重任.

....其它的更多妙用,只有用過的人才知道!

當然,本示例中用到了jquery組件,您可根據需求進行取舍.另外說明:代碼中最后一行是為了保證某些瀏覽器的搜索記憶功能.

完整Demo在此下載:

 http://files.cnblogs.com/CoreCaiNiao/searchDemo.rar

轉載請說明出處.

 http://www.cnblogs.com/CoreCaiNiao/archive/2013/02/17/2914285.html