站在巨人肩膀上 - jQuery Plugin - i.LeavingMe.cn

站在巨人肩膀上 - jQuery Plugin

2009-08-05 17:38:00

【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引用。設定資料的格式範例如下:

</span>

<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](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