搜尋

隨機推薦

21 十一月 2010

用 jQuery UI 幫按鈕做造型

視覺化的使用者介面,如果缺少按鈕的話,就會全然改觀。在網頁上,瀏覽器提供預設的按鈕以及其他一些的按鈕形態。利用 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 主題所控制。


圖1—複選按鈕轉化為兩種狀態的按鈕。

從程式開發的角度來說,這和傳統的複選按鈕沒有兩樣。在 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 的按鈕元件試圖統一程式開發的介面以及產生視覺化圖形的方法。從這個角度來說,第一個能派上用場的,就是可以用相同的方式產生(及處理)按鈕和連結。其 次,按鈕元件是一個很好的起點,你可以將一些簡單按鈕結合在一起,從而建造出更為精巧的按鈕,像是分割按鈕、工具列或其他在開發網頁時需要的按鈕形態。

廣告

无觅相关文章插件,快速提升流量

Please publish modules in offcanvas position.