jQuery UI是什麼?

jQuery UI是一個建立在jQuery JavaScript函式庫上的小工具跟互動式函式庫，你可以用來建立高互動的web應用程式，本指南的目的是讓你提高jQuery UI工作速度，跟著下面開始吧。

從查閱示範開始

要感覺一下jQuery UI的功能，可以查閱jQuery UI 的 Demos展示及說明文件。

在範例那裡，導覽列出所有jQuery UI提供的互動跟小工具，選一個互動或是小工具，你會看到特定外掛的幾個範例組態，每個範例允許你檢視原始碼，改變佈景，將網址加入書籤，舉一個例，查閱小工具的可折疊內容展示頁。

建構你自訂的jQuery UI下載

一旦你對jQuery UI有基礎的瞭解，你就可以準備嘗試一下！現在是你絞盡腦汁到jQuery UI 網站的Download Builder下載一份jQuery UI的時候了，jQuery UI的下載生成器允許你選擇想要下載的部份來取得你專案自訂的版本，這裡有三個步驟來建構你自訂的jQuery UI下載：

步驟 1：選擇你需要的部份

下載生成器的主要欄位列出jQuery UI所有的分類：核心、互動、小工具跟效果，jQuery UI的有些部份依賴另一個部份，只要勾選你要下載的小工具的核選框，任何需要的小工具也會自動被勾選，如果有不相依的情況，也會有警告出現，你選擇的部份會自動結合進入自訂的jQuery UI javascript的檔案叫做jquery-ui-1.7.1.custom.min.js

步驟 2：選擇一個佈景 (或是使用你自己的自訂佈景)

在下載生成器的右邊欄位，你會發現有一個欄位有很多預先設計好的佈景可以選擇給你的小工具用，你可以選擇我們提供的佈景，也可以使用ThemeRoller設計你自己的佈景（後面有更多的介紹）。

進階佈景設定：下載生成器的佈景部份也提供了一些進階的組態設定給你的佈景，假如你計畫使用多重佈景在單一頁面上，這些欄位就會派上用場，假如你只是在一個頁面上使用一個佈景，你可以完全忽略這些設定。

步驟 3：選一個jQuery UI版本

在下再生成器這裡最後一個步驟選擇一個版本編號，這是很重要的一個步驟因為jQuery UI版本被設計來配合特定版本的jQuery，目前的版本是：jQuery UI 1.7.1：跟jQuery 1.3搭配以及 jQuery UI 1.6：跟jQuery 1.2.6搭配。

按下Download！

你已經完成了下載生成器的設定！按下download按鈕，你會得到一個你選擇部份的自訂zip檔案，順著那些步驟，在這裡你也可以取得預設的jQuery UI 1.7 ( zip ~240k )下載，這個檔案包含UI 1.7的所有部份跟Smoothness佈景。

下載之後：介紹使用jQuery UI

一旦你下載了 jQuery UI，你會得到一個zip有下列的檔案：

• /css/
• /development-bundle/
• /js/
• index.html

基本概觀：在web網頁上使用jQuery UI

用文字編輯器打開index.html，你會看到連結：你的佈景、jQuery跟jQuery UI，一般來說，你會需要將這3個檔案放在任何要使用jQuery UI小工具跟互動的網頁上：

<link type="text/css" href="css/themename/jquery-ui-1.7.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>

一旦你放入了必要檔案，你就可以加些jQuery的工具在你的頁面上，舉例來說，要作一個日期選取的小工具，你可以文字輸入的元素到你的頁面上然後呼叫.datepicker()，項這樣： HTML: <input type="text" name="date" id="date" />

JS:

$('#date').datepicker();

T這是這樣！

所有jQuery UI小工具跟互動展示，可以查閱jQuery UI 的 Demos展示及說明文件。

自訂你需要的jQuery UI

jQuery UI允許你用幾個方法來自訂，你已經見過下載生成器如何允許你自訂你的jQuery UI那一份來收入你要的部份，但是還有一個別的方法可以自訂你要實作的的程式碼。

基本的jQuery UI：使用選項

每一個jQuery UI外掛都有一個預設的配置可以迎合最基本常用的使用情況，但是假如你想要一個不同預設組態的外掛，你可以使用”options”來覆蓋每一個預設組態，這些選項的參數是一些傳進jQuery UI小工具的特性，舉例來說，滑塊的小工具有個定位的選項，它允許你指定滑塊應該是水平或垂直方向的，要載你的頁面上設定滑塊的選項，你只要使用一個參數傳入，像這樣：

$('#mySliderDiv').slider({
      orientation: 'vertical'
});

你可以傳入很多不同你要的選項，每個選項後加一個逗號（除了最後一個之外）：

$('#mySliderDiv').slider({
      orientation: 'vertical',
      min: 0,
      max: 150,
      value: 50
});

只要記得要大括號{}刮起你的選項，你就可以弄得很好，當然，上面的例子僅僅提到你可以對jQuery UI作什麼，要取得jQuery UI小工具詳細的資訊，請瀏覽jQuery UI 文件說明。

視覺化自訂：設計一個jQuery UI佈景

假如你想要設計你自己的佈景jQuery UI有一個很炫的應用程式可以達到這個目的，叫做ThemeRoller，你可以按下在jQuery UI導覽裡的design a custom theme來取得，或只是進入這一頁：ThemeRoller.com（註：參閱本頁ThemeRoller中文說明）。

ThemeRoller提供了自訂的介面來設計jQuery UI小工具的所有元素，當你在左邊欄位調整”levers”，右邊的小工具就會反應你的設計，ThemeRoller的Gallery標籤提供很多預先設計好的佈景(這跟下載生成器提供的一樣）the same ones offered by the download builder) 讓你調整或下載使用。

下載你的佈景

當你在ThemeRoller那頁按下”Download theme”按鈕，你會直接到下載生成器，並且在佈景下拉選單中有一個自訂的佈景自動被選，可以在那裡進一步地設定你的下載套件，一旦你下載了，你就會看到example.html這一頁是照你自訂佈景的樣式做的。

快速提示：假如你也想要編輯你的佈景，只要開啟CSS檔，在43行那裡有這樣說著 “To view and modify this theme, visit …” 該網址會打開ThemeRoller的佈景來編輯。

支援：我可以得到什麼幫助？

JQuery UI使用者跟開發者資源在Support Center持續更新中。

徵求開發者！

想加入jQuery UI團隊嗎？我們很愛你的幫助！拜訪UI Development Center有關於如何加入的詳細資料。

回顧我們的開發指南有關於如何發展jQuery UI小工具的資訊。

歷史上的今天

• 2010: Google 地球與Google地圖
• 2009: 不定長度引數
• 2007: trackback

Tags: jQuery UI
作者：ㄚ琪 | 本文分類：[JavaScript],[翻譯] | 留言 | 引用