用 jQuery UI 幫按鈕做造型

轉貼自：http://inspire.twgg.org/programming/jquery/item/378-help-button-to-do-with-the-shape-of-jquery-ui.html

視覺化的使用者介面，如果缺少按鈕的話，就會全然改觀。在網頁上，瀏覽器提供預設的按鈕以及其他一些的按鈕形態。利用 CSS 樣式，你可以修改按鈕的視覺樣貌，但仍然保持它原有的形態，無論是一般按鈕、複選按鈕 (checkbox) 或是單選 (radio) 按鈕等。
在開發實務時，有時會一點需求上的差異，會導致需要開發更為複雜精巧的按鈕。舉例來說，你需要一列複選或單選的按鈕、一個工具列，或是一個分割的按鈕。這些組合可以透過程式辦到，但這就是關鍵之處－你必須一次又一次為了一點點需求上的差異，而不斷地寫程式。
而 jQuery UI 函式庫可以在按鈕開發上提供一些幫助。事實上在 1.8 版中，已經加入按鈕程式開發的支援，讓我們來深入了解一下。
 

 

簡單按鈕

jQuery UI 1.8 版包含了一個新的元件（widget），可以設定網頁中任何形態的按鈕樣式。你需要做的只有下面這一步：

$("#button1").button();

使用 "button1" 這個 ID 的元素，可以是任何 HTML 產生的按鈕，或是可以點擊的元素，像是連結。這裡有一個 HTML 按鈕元素的清單 (沒有包含全部)，可以成功地應用在上面的程式中。

<button id="btn1" type="submit"> OK </button> 
<input id="btn2" type="submit" value="Save" />  
<input id="btn3" type="reset" value="Reset" />  
<input id="btn4" type="button" value="Test" />  
<a id="btn5" href="#"> Click me </a>

如 你所見，你可以套用按鈕元件到 <button> 元素，同樣也可以套用 <input> 或是超連結上。在 HTML 中，<input> 元素可以當作按鈕的有 submit、reset、button 等；這些在 jQuery UI 按鈕元件中，都有完整支援。這個清單還可以加上一些特別的按鈕形態，像是單選和複選按鈕。所以下面的 HTML 元素，在元件中也都有支援：

<input id="btn2" type="checkbox" />  
<input id="btn3" type="radio" />

有個地方要特別注意，單選按鈕在個別獨立時並沒有支援，必須是多個組合在一起才有作用。因為在現實中，獨立的單選按鈕並沒有太大的意義。從另一個角度來說，複選按鈕無論是獨立或多個組合都有支援。
在 相應的 input 按鈕元素上呼叫 button()，會帶來什麼樣的效果呢？其實它只是改變原生的 HTML 元素，讓它變成可以設定主題化風格，並且提供按鈕的程式介面。事實證明，jQuery UI 元件大多用在 <button> 、submit 或一般按鈕元素上，套用主題化的風格。當你套用在複選按鈕、連結或單選按鈕元素時，一些進階的客製化機制就能拿來運用，就像一般傳統的按鈕的樣式和點擊事 件。
 

複選按鈕

複選按鈕是一個視覺化的元素，通常用來表達二取一的選擇：要或不要選。典型的樣子是一個四方型的框，讓使用者可以點擊來選取。你也可以表現相同的概念，藉由按鈕下壓或復原的狀態。下壓按鈕意味這個選項被選擇了；反過來說，沒有下壓的按鈕則代表沒有選擇。
下面的程式將傳統複選按鈕轉化成兩種狀態的按鈕。

$("#checkbox1").button();

原始的 HTML 如下：

<input id="checkbox1" type="checkbox" checked="checked" />
<label for="checkbox1">
Show more information
</label>

圖像化的輸出就如圖1，你可以看到按鈕的外觀，分別有下壓／復原的兩種狀態。樣式則是由 jQuery UI 函式庫的預設 Sunny 主題所控制。

圖１—複選按鈕轉化為兩種狀態的按鈕。
從程式開發的角度來說，這和傳統的複選按鈕沒有兩樣。在 DOM 的層次上說，事實上，它仍然是一個複選按鈕。任何轉變都只是視覺上的，沒有任何標準的功能被移除。
要 注意的是，複選按鈕並沒有任何跟隨文字。通常你見到在複選按鈕旁邊的文字，是由另一個 HTML 元素 <label> 使用 for 這個屬性，結合複選按鈕的 ID 屬性來達到效果。在 jQuery UI 中， 如果有 <label> 元素的值，就會被拿來當作按鈕的文字。你可以用程式來設定 label 的內容，只要去修改按鈕元件的 lable 屬性就可以了。下面是如何使用的方法：

$("#CheckBox1").button({ label: "Your button caption" });

同樣地，讀寫當前 jQuery UI 按鈕的標題，你可以在所有 jQueryUI 元件使用 option 方法。下面示範了讀取和設定 label 的典型用法：

// 這是讀取器
var caption = $("#CheckBox1").button( "option", "label" );
 
// 這是設定器
$("#CheckBox1").button( "option", "label", "Your button caption" );

無論是從什麼元素形態轉變而來的按鈕，都可以使用 option 方法。
 

建立複選清單

複選元素在讓使用者表達選擇時相當好用。當商業邏輯需要用多個選項讓人選擇時，你需要產生複選清單。在 jQuery UI，你可以將按鈕轉化成複選群組。雖然你需要一個稍稍不同的函式來協助你，但沒什麼大不了，畢竟就如下面例子示範的一樣：

$("#Toppings").buttonset();

你 需要使用一個稱作 buttonset() 的新函式。這個函式會將所有的選取的按鈕群組化。 在範例中，Toppings 是 <div> 標籤的 ID，而結果就是所有的子代按鈕都被群組在一起了。下面就是一個通過驗證的 HTML 語法，可以被轉化為按鈕列。

<div id="Toppings">
     <input type="checkbox" id="checkbox1" />
     <label for="check1"> Cheddar </label>
     <input type="checkbox" id="checkbox2" />
     <label for="check2"> Mushrooms </label>
     <input type="checkbox" id="checkbox3" />
     <label for="check3"> Bacon </label>
</div>

圖2 顯示上面程式視覺化的結果，它將 HTML 語法轉成 jQuery 的按鈕列。

圖2—將多個複選按鈕群組在一起，並且組成一個單位。
在圖2 中，前兩個元素被選取了，如果使用者再點 Bacon，按鈕就會呈現選取狀態。點擊一個已選取的按鈕，則會讓它恢復成未選擇前的狀態。
值得注意的關鍵是，jQuery UI 按鈕的 API 並未提供任何語法，可以查詢目前按鈕列的狀態。當你剛好使用像圖2 的複選按鈕時，有可能你需要知道哪些按鈕被選取了。這時，你可以依賴 jQuery API 的核心功能來查詢按鈕狀態。下面是一個可行的做法：

$("#Toppings input:checked").each(function() {
     alert(this.id);
});

你可以用 input:checked 的選取器來挑出 input 元素中，在 Options 這個 ID 底下，已經被選取的按鈕。之後再用 each 函式來遞迴處理它們。
 

更多的按鈕組合

讓我們再多花一點時間來談論一下按鈕組合的內部行為。當你對某個元素呼叫 buttonset 函式，所有子代元素都會被選取。每一個選取的元素會被套用 button() 函式進行轉化。因此，你應該要針對作轉換的按鈕的容器元素來呼叫 buttonset 函式。
要執行按鈕群組的操作，首先你需要寫 jQuery 選取器，選取器要找出所有需要的按鈕，然後呼叫你需要的 button 方法。例如你可以用下面的方法，停用按鈕群組：

//首先建立按鈕群組
// （它將傳統的複選轉化為按鈕）
$("#Toppings").buttonset();
 
//其次，你可以停用／使用／刪除所有的按鈕
// 藉由 jQuery 語法來選取它們
$("#Toppings input:checkbox").button("disable");

單選按鈕

承認吧，獨立的單選按鈕沒有什麼意義，要讓單選按鈕變得有意義，首先你必須先將它轉成按鈕群組。下面的程式碼幾乎和前面複選按鈕一樣：

$("#Options").buttonset();

原始的 HTML 碼，當然稍有不同。

<div id="Options">
     <input type="radio" id="radio1" />
     <label for="radio1"> True </label>
     <input type="radio" id="radio2" />
     <label for="radio2"> False </label>
     <input type="radio" id="radio3" />
     <label for="radio3"> Don’t know </label>
</div>

圖3—具互斥選擇效果的單選清單。

加上圖示

另一個常見的 Web 按鈕形式是混合文字和圖片。當你想要很炫的按鈕時，你會僱用設計師製作，然後拿到一堆有圖、文的按鈕。在另一種狀況，你純粹只想用超連結，但是這些超連結透過 CSS 的巧思創意，可以讓最後的成果看起來像按鈕一樣。
jQuery UI 函式庫能讓每個人都可以有好看的按鈕，不需要為此特別僱用設計師（當然設計師還是能為你帶來最好的品質，不過至少不用每次都要這樣做）。
最常見的需求是在按鈕中混合了文字和圖案，但保有舊有的程式介面和行為。一般而言，HTML 沒辦法讓你達到這個目的，除非混用 JavaScript 和 HTML。而按鈕元件則讓你可以快速達到這個目的。
按 鈕元件支援圖示（icon）屬性，而且支援兩個。主要的圖示是放在文字的左方；次要的圖示（如果有需要的話），則是放在文字的右方。而按鈕上的標題文字則 是選用的。你可以透過 text 屬性來控制文字是否顯示，它是透過傳入一個布林值來設定。要注意的是，如果文字關閉，你又沒有指定一個替代的圖示（或兩個），它會忽略隱藏的設定，照樣顯 示文字標題。
jQuery UI 函式庫不能讓你直接將圖就放在按鈕上。像 jQuyer UI 的主題套件中，圖示是透過 class 的定義套用上去。從另一方面來說，CSS 樣式可以透過手動或透過 ThemeRoller 工具進行客製化，你可以在 http://jqueryui.com/docs/Theming/Themeroller 找到 ThemeRoller 工具。下面是如何替按鈕設定圖示的作法：

$("#Button1"). button( {
                text: false,
                icons: {
                    primary: "ui-icon-triangle-1-s"
                }
            })

如果你需要第二個圖示，只需增加圖示物件上去，就像下面這樣做：

icons: {
    primary: "ui-icon-triangle-1-s",
    secondary: "ui-icon-locked"
}

就條之前提到，主要、次要的圖示的值，是使用 CSS 的 class 名稱，而這個名稱定義在 CSS 樣式中，就像下面的這樣：

.ui-icon { 
           width: 16px; 
           height: 16px; 
           background-image: url(images/ui-icons_d19405_256x240.png); 
}
:
.ui-icon-triangle-1-s { 
           background-position: -64px -16px; 
}

基 本的 class 名稱 ui-icon 定義了 PNG 檔案，它包含了所有的圖示、並且處理成適當的尺寸（預設是 16x16 像素）。下一步，每個 class 自行對應到特定的圖示，背後的機制是透過偏移 PNG 檔案達來達到不同圖片的顯示。圖4 顯示了整個 PNG 檔；實際的內容和顏色則視 jQuery 主題而有所不同。

圖4—支援圖示的範例檔案。

建立工具列

工 具列其實只是一系列按鈕的組成—無論是什麼形態的按鈕，像是一般按鈕、複選、單選按鈕等。事實證明，用 jQuery UI 來做工具列一點也不複雜。你所需要做的，就是將所有的按鈕放在一個唯一的 HTML 標籤容器中－通常使用 DIV 元素—然後為每個按鈕調用 button() 函式。下面是一個工具列 HTML 範本：

<div id="container">
   <button> ... </button>
   <button> ... </button>
   <button> ... </button>
   <input type="checkbox" ... />
   <span>
     <input type="radio" ... />
     <input type="radio" ... />
  </span>
</div>

不過，你需要個別地設定按鈕。才能替每個按鈕加上圖示和事件處理器，這也是必要的。下面是你需要為按鈕加上的程式。

$('#Button1').button({
    text: false,
    icons: { primary: 'ui-icon-play' }
})
.click(function() {
    // 在這裡做一些事...
});

按鈕元件的其他部分

在 Web 應用程式中，按鈕和連結是兩種能在用戶端執行命令的方式。在伺服器端的 ASP.NET 開發中，處理連結和按鈕的 click 事件都是相同的，這歸功於 ASP.NET 和 Web Forms 框架。在用戶端的按鈕（尤其是 submit 按鈕）和連結是兩種具備不同能力的動物。更別說各種主題化的按鈕可能帶來的差異— 像是工具列、單選、複選按鈕、三種狀態的複選按鈕、分割按鈕等。
jQuery UI 的按鈕元件試圖統一程式開發的介面以及產生視覺化圖形的方法。從這個角度來說，第一個能派上用場的，就是可以用相同的方式產生（及處理）按鈕和連結。其 次，按鈕元件是一個很好的起點，你可以將一些簡單按鈕結合在一起，從而建造出更為精巧的按鈕，像是分割按鈕、工具列或其他在開發網頁時需要的按鈕形態。