jQuery（七）UI庫

8、The jQuery UI Library

jQuery自己僅僅提供核心的DOM，CSS，事件處理，Ajax功能。這些爲構建高級別的抽象，好比UI部件，提供了完美的基礎。jQuery UI庫就是這樣的抽象。這裏咱們就簡單的介紹下jQueryUI庫，更詳細的資料能夠在http://jqueryui.com上查看文檔說明。

jQueryUI庫定義了不少的UI部件：有自動完成功能的輸入框，日期選擇器，組織信息用的摺疊卡或者選項卡，滑動條和滾動條，模態對話框等。

除了這些部件之外，jQueryUI庫實現了更通用的交互性，它能夠很容易地使文檔中的任意元素可以被拖放，改變大寫，排序和選擇。

最後jQueryUI在jQuery庫的基礎上增長了許多視覺效果方法（包括對顏色進行動畫的效果），而且定義了不少的緩動函數。

 

能夠認爲jQueryUI庫是許多的jQuery插件打包在一個單獨的javascript文件中，要使用jQueryUI庫，只須要在引入jQuery代碼後，再引入jQueryUI的代碼便可。不過在jQueryUI的下載頁面上，你能夠只下載你想要使用的組件，與加載整個jQueryUI庫相比，這樣能夠減小javascript代碼的加載時間。

 

jQuery是徹底主題化的，它的主題採用CSS文件的形式提供，全部除了加載UI庫的代碼，還須要加載你想要的主題CSS文件。jQueryUI網站提供了預約義的主題，也能夠在網站上定義你本身的主題而後下載。

 

jQueryUI部件是插件形式組織的，每一個插件定義了一個jQuery的方法。當在已經存在的文檔元素上調用這個方法，它把這個元素轉成對應的UI部件。好比，把文本輸入框轉成日期選擇器：

$("input.date").datepicker();//把全部帶有屬性class="date"的<input>元素轉成date picker部件

 

爲了充分使用jQueryUI的部件，你應該熟悉它的三件事：部件的配置選項，部件的方法，部件的事件。全部部件都是可配置的，有些還有許多的配置項，你能夠自定義部件的外觀和行爲，經過傳遞一個選項對象。

 

每一個部件經過定義了不少的方法來與部件交互，可是這些部件方法都不是真正的jQuery方法，每一個部件只提供了一個jQuery方法。經過傳遞一個部件方法名到這個jQuery方法中，實現對部件方法的調用。好比要是一個日期選擇部件不可用，咱們調用datepicker("disable");

 

jQueryUI的部件一般定義了一些自定義的事件，你能夠經過正常的bind方法來綁定事件處理器，處理器的第一個參數爲Event對象，有的部件會有第二個參數，是一個UI的對象，提供有關部件的狀態信息。

jQueryUI文檔中描述的事件有時不是真正的自定義事件，而只是回調函數，能夠經過配置選項對象進行設置。