[譯] EXTENDING JQUERY – 2.2 A simple plugin

標籤：style   class   code   ext   c   color   

2.2 一個簡單的外掛程式樣本

jQuery 外掛程式能做任何事情，這個已經由浩如煙海的各類第三方外掛程式如證明。小到隻影響一個元素，大到改變多個元素的外觀和行為，jQuery 的各種功能等你來擴充。

2.2.1 佔位文本外掛程式

為了維持一個form 的空間，很多時候一個欄位的描述往往是省略的，取而代之的是用一個佔位文本。如果這個欄位是空的，佔位文本將會重新顯示。為了更好的使用者體驗，這個佔位文本往往是灰色的，用來區別真正的內容。這個功能有個比較通用的名字叫做浮水印(watermark)。

佔位的文本可以在外掛程式初始化的時候賦值，但是最好允許多個文字框同時賦值。因此input 的title 屬性是一個理想的佔位文本取值的所在。當該欄位獲得焦點的時候，你需要移除佔位文本並且移除灰色的樣式。相應的，當該欄位失去焦點的時候，如果值仍然是空白，就需要恢複原來的文字和樣式。為了有更好的擴充性，欄位的樣式需要由css去指定，能夠被外掛程式的使用者輕鬆的重寫樣式。

2.2.2 Watermark 外掛程式代碼

由於這個外掛程式的作用對象是頁面上的元素，則是一個集合外掛程式。因此需要擴充$.fn

$.fn.watermark = function (options) {    //set options    optoins = $.extend({ watermarkClass: ‘watermark‘ }, options || {});    //when field is focused    return this.focus(function () {        var field = $(this);        if (field.val() == field.attr(‘title‘)) {            field.val(‘‘);            removeClass(options.watermarkClass);        }    }).blur(function () {        var field = $(this);        if (field.val() == ‘‘) {            field.val(field.attr(‘title‘)).addClass(options.watermarkClass);        }    }).blur();};

該外掛程式擴充$.fn，聲明了$.fn.watermark 使得該外掛程式和jQuery 選取器無縫整合。定義了options 參數的預設值，watermarkClass 和值watermark. 通過extend 方法，允許被重寫該屬性。||{} 用來確保當options 沒有被提供的時候使用預設值。為了允許該外掛程式和其他外掛程式的鏈式調用，一個關鍵的jQuery 理念就是function 必須返回當前的集合。由於預設內建的jQuery 方法已經實現了該功能，只需要直接返回內建的方法傳回值即可。.blur 就是鏈式調用的例子。最後觸發blur 給欄位賦初始值。

這個簡單的集合外掛程式給了你一個第一印象。接下去的文章將會講解一些jQuery 外掛程式開發時候的最佳實務的理念。

2.3 小結

jQuery 開發人員很有遠見，提供了很多可供擴充的點。這章通過簡單的例子讓你初嘗jQuery 開發的概念。

欲知詳情，請繼續收看下一波。。。