邊做邊學jQuery系列12 - 站在巨人肩膀上-jQuery Plugin

課程錄製時間: 2009年

站在巨人肩膀上-jQuery Plugin

易於擴充是一個優秀架構不可或缺的特性，jQuery自然也提供了方便的擴充之道--jQuery Plugin。

簡單來說，要引用jQuery Plugin的步驟非常簡單，只需加一行<script type="text/javascript" src="plug_name.js"></script>引用Plugin程式檔，$("...")就多了新的Method可用。舉個簡單的例子，有個特效Plugin叫做Cycle，可以做出投影片放映或廣告輪播般的效果。載入jquery.cycle.js後，只要在網頁中用<div>或其他容器元素將多個<img>包起來，接著$("#myDiv").cycle("shuffle")就大功告成，如以下範例:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="../jquery-1.3.2.js" type="text/javascript"></script>
    <script src="jquery.cycle.js" type="text/javascript"></script>
    <style type="text/css">
    body { background-color: #222222; }
    #myDiv { margin: 50px; }
    #myDiv img { border: solid 5px white }
    </style>
</head>
<body>
<div id="myDiv">
    <img src="Pic01.JPG" />
    <img src="Pic02.JPG" />
    <img src="Pic03.JPG" />
    <img src="Pic04.JPG" />
    <img src="Pic05.JPG" />
</div>
<script type="text/javascript">
    $(function() { $("#myDiv").cycle("shuffle"); });
</script>
</body>
</html>

複雜的邏輯被包藏在Plugin的黑盒子中，我們只需呼叫Plugin增設的Method，傳入適當的參數，馬上就可以享用其他高手精心研發的成果，讓我們的網頁瞬間獲得加持，這就是Plugin的魔力。

【Plugin資源】

jQuery問市已有一段時間，深受網頁開發社群喜愛，各方高手紛紛投入，開發出各式好用的Plugin。在官方網站上有一個專區(http://plugins.jquery.com/)，網羅了已發表的Plugin，目前已經超1000種，數目十分驚人。

不過，Plugin數量龐大也未必全然是優點，選項太多常讓人難以抉擇，有時光是同一件任務，就有五六種Plugin可供選擇，每種都親身試用評比要枆去可觀的時間。官網提供了評價機制，每個Plugin都有網友投票數及評價星星數的統計，選擇時可優先考量票數及星數多者，減少逐一摸索的時間。

超過1000種的Plugin當然不可能在此一一細數，而每個開發者所專注的領域與網站性質架構不一，有的強調酷炫的視覺效果、有的則著重表單輸入與驗證輔助、有的靠簡化XmlHttpRequest傳輸取勝，各有巧妙不同，每個開發者會動用的Plugin也各異。在此依個人的使用經驗挑選幾個實用的Plugin稍作介紹，眾多遺珠就留給大家自行摸索發掘。

了解Plugin的概念後，未來在實作網頁功能過程中，可以先找找有無現成的Plugin可用，一步躍上巨人的肩膀，節省可觀的徒手打造工程。

【BlockUI】

在網頁操作過程中，我們需要顯示某些訊息，要求使用者等待或做出特殊回應，在此一過程沒有完成前，使用者不能進行其他操作。這就是所謂強制式對話框(Modal Dialog)的概念，IE有所謂的showModalDialog，但此一函數無法跨瀏覽器使用。BlockUI提供了如Modal Dialog的效果，會在網頁或元素表面放上一層遮罩，阻止使用者進行任何操作，還可同時顯示指定的訊息。

Plugin網站: http://malsup.com/jquery/block/

【ThickBox】

可以將單一圖檔、多圖檔、HTML內容、IFrame、AJAX更新內容顯示為Modal Dialog的型式，介面比BlockUI漂亮，可客製的彈性也較多，並具備簡單的多照片切換展示功能。

Plugin網址: http://jquery.com/demo/thickbox/

【tablesorter】

可以直接在<table>加上動態排序功能。使用時必須區分出<thead>及<tbody>，並配合CSS，可提供如Excel般點選標題就重新排序的功能。

Plugin網址: http://tablesorter.com/docs/

【ScrollTo】

指供網頁捲動的輔助功能，可將畫面捲動到指定座標或特定元素上。另外還有延伸的Plugin: LocalScroll可在同頁連結(<a name="anchorName">)間捲動，及SerialScroll可設定類似上一步下一步的循序捲動。

Plugin網址: http://plugins.jquery.com/project/ScrollTo

【Tooltip】

可將元素的title="..."屬性以客製化Tooltip的方式呈現。

Plugin網址: http://plugins.jquery.com/project/tooltip

【Cycle】

即第一個範例介紹的輪播效果Plugin，有洗牌、放大、淡出、下翻、翻面、捲動等效果，很適合做照片或廣告的輪播展示。

Plugin網址: http://www.malsup.com/jquery/cycle/

【Validation】

提供欄位即時驗證功能，並內建了不少預設的驗證邏輯，如必要欄位、最大/最小長度、數值範圍、Email、URL、日期等，也開放自訂。採納用於表單填寫與送出時的欄位檢查，可節省不少自己動手的苦工。

Plugin網址: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

【History】

網頁在AJAX動態變化內容後URL不變，無法讓使用者透過瀏覽器回上一頁的直覺操作退回更新前的狀況，常造成不少抱怨。較新版本的瀏覽器已加入相關的支援，而History Plugin則簡化了實作方式及克服了跨瀏覽器的問題。

Plugin網址: http://plugins.jquery.com/project/history

【3D Image Carousel】

讓圖片以立體旋轉木馬方式繞圓圈，呈現效果蠻炫的，不過頗耗資源。

Plugin網址: http://plugins.jquery.com/project/carousel3d

【Metadata】

可以將Javascript元件形式的資料藏在元素的CSS Class宣告、自訂屬性及子元素中，常被其他Plugin引用。設定資料的格式範例如下:


                                    <li class="someclass {some:
                                    'data'} anotherclass">...</li>

                                    OR

                                    <li data="{some:'random', json: 'data'}">...</li>

                                    OR

                                    <li><script type="data">{some:"json",data:true}</script> ...</li>

Plugin網址: http://plugins.jquery.com/project/metadata

【Cookie】

很小的Plugin，但可以將讀寫Cookie簡化為一行程式搞定，支援設定有效期限、domain等等。

Plugin網址: http://plugins.jquery.com/project/cookie

【Lightbox】

Lightbox是非常有名的網頁照片展示Library，這是它的jQuery版。

Plugin網址: http://plugins.jquery.com/project/jquerylightbox_bal

【DropShadow】

為元素加上懸浮式的立體陰影效果。

Plugin網址: http://eyebulb.com/dropshadow/

【Pagination】

產生分頁顯示時的頁數選擇器，可以節省一些自己動手做的時間。

Plugin網址: http://plugins.jquery.com/project/pagination

【MaskedInput】

限定textbox的輸入格式，會預先在輸入位置顯示底線的設計很不錯。

Plugin網址: http://digitalbush.com/projects/masked-input-plugin/

【Auto Growing Textareas】

會隨著輸入內容增加自動長大的<textarea>

Plugin網址: http://plugins.jquery.com/project/autogrow

【Autocomplete】

由Google帶起的自動完成輸入提示風潮儼然已是AJAX網站不可或缺的重要功能，這個Plugin提供了一些簡化。不過原版在使用中文輸入法時有些問題，但網路上可找到解決方案。

Plugin網址: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

【結論】

以上只揭露了上千種jQuery Plugin的一小部分，在看過Plugin解決特定問題的犀利後，相信大家未來在開發網頁時，動手前不妨搜尋一下是否已有現成的Plugin，善用Plugin將可節省可觀的開發時間。更進一步，我們也能將自己常用的功能包裝成Plugin方便重覆使用，甚至還能分享出去、回饋社群，讓jQuery的可用資源更加豐富，下一次我們就要來看看如何自己動手開發一個Plugin。

歡迎推文分享: