案例研究:符水印的TextBox(使用jQuery)

在web 2.0常用的模組之一就是帶有浮水印效果的textbox
這個在實做上並不困難，現有的套件也非常多，不過今天是想探討jQuery的擴充函式實作方式


浮水印textbox，在失去焦點的狀態會有提示文字


在得到焦點會後，提示文字會消失，讓使用者可以正常輸入

今天來探討如何用jQuery去實現他

首先請準備兩個示範用的textbox

<input type="text" name="txt1" />
<input type="text" name="txt2" />
<input type="submit" />


之後直接進入jQuery的部分

jQuery擴充常用的部分分下列三種

1. 
   jQuery.foo=function(){....}
   這是最直接也最簡單的方式，這樣之後就可以用$.foo()的方式呼叫


2. jQuery.extend({
foo:function(){}
});
   第二種使用他提供的extend並使用物件形式擴充，一般來講比較建議這種方式
   因為可讀性比較高
   
3. jQuery.myplugin={
foo:function(){.......}
};
   第三種如上，像這種中間在安插一個名稱，這樣一來可以防止名子跟別人的plug-in相衝
   之後就可以使用$.myplugin.foo();的方式呼叫
   而上面這作法也可以用jQuery.extend配合巢狀物件實現如下
   var myplugin={
myfunction:{
foo:function(){.......}
}
};
jQuery.extend(myplugin);
   之後就可以使用$.myfunction.foo();的方式去呼叫了
   
   

上面是擴充global member的部分，那如果想要擴充jQuery物件member呢?
可以使用jQuery.fn，他有兩種方式可以擴充函式

1. jQuery.fn.test=function(){....}
   第一個方法一樣最簡單，直接開一個新名稱去指向一個function
   之後就可以使用$(obj).test();的方式去呼叫他
2. jQuery.fn.extend({
bar:function(){.......}}
);
   上面是第2個方法，使用他提供extend去做，這種作法可讀性比較高，之後可以用$(obj).bar()去呼叫他
   

擴充一個jQuery物件function有什麼好處?
好處是我們可以用$(this)的方式去抓到觸發此函式的物件
也就是我們實作的方法

我們可以用這種方法來做一個屬於我們的plug-in
直接看程式碼

jQuery.fn.watermark =function(className,message){

$(this).addClass(className);
$(this).val(message);
$(this).focus(function(){

var str=$(this).val();
if(str==message)
{
$(this).val("");
$(this).toggleClass(className);
}
});
$(this).blur(function(){

var str=$(this).val();
if(str.length<=0) {
$(this).toggleClass(className);
$(this).val(message);
}
});
}
我們用jQuery.fn去擴充一個jquery物件函式watermark，他會接受兩個參數
一個是浮水印的顯示格式，一個是浮水印的顯示文字
一開始我們可以用val()這個函式去設定textbox的value
form相關物件的值都必須仰賴這個function去替我們抓
用$().text()可是什麼都抓不到

之後要設定失去焦點跟獲得焦點要做的事，在此我們用了toggleClass來替我們簡化作業
他會自動判斷物件是否有此class，有的話就移除他，沒有的話就增加他
這樣我們就不用自己去判斷了

設計理念很簡單
當失去焦點的時候，如果沒有輸入任何文字(str.length<=0)就回復浮水印狀態
當獲得焦點的時候，如果當前文字跟浮水印文字一樣，就清空浮水印訊息


最後就是享受成果的時候啦
$(function(){
$("input[type='text']").watermark("input","請輸入字串");
}

這是初始化的部分，$(function(){})其效果就相當於$(document).ready(function(){});
也就是當DOM生成結束後要做的動作
此時我們只要一行程式碼，就可以替所有的textbox加上浮水印

$("input[type='text']")是抓取所有input底下所有type是text的物件
也就是我前面的textbox，然後執行我擴充的watermark函式
在這邊input是我設定的class name，在此只須要把文字顏色弄成灰色

,input{color:red}


如何!上面的程式碼是不是很像jQuery UI的使用方法阿
只要有這些知識，我們也能設計屬於我們的jQuery UI plug-in了