小狐狸事務所: jQuery UI 學習筆記 (二) : 按鈕 (Button)

2019年3月10日星期日

jQuery UI 學習筆記 (二) : 按鈕 (Button)

由於前陣子在為 Django 專案準備 Template 模版而複習 jQuery UI, 發現之前我記錄的 jQuery UI 測試學習筆記甚少, 可能當時忙著完成公司的網頁專案, 只顧著實作, 沒時間紀錄之故. 現在有空想將專案中的 jQuery UI 元件用法有系統整理起來, 以備將來參考之用.

首先測試最常用的人機介面元件 : 按鈕元件, jQuery UI 可將 button, input 或超連結 a 元素加上指定樣式 class 後變成主題式按鈕 (themed), 且具有 hover (滑鼠滑過) 與 active (按下) 樣式之功能, 參考 :

# https://jqueryui.com/button/

只要在 input, button, a 元素上加上 class="ui-button ui-widget ui-corner-all" 這個樣式等級 (class), 不需要呼叫 jQuery 物件的函數, 它們就會變身為主題式按鈕了.

下面測試 1 先來看看原始的 HTML 陽春超連結與按鈕 :

測試 1 : 原始的 HTML 超連結與按鈕 [看原始碼]

<a href="#">Anchor</a>
<input type="button" value="Input element type=button">
<button>Button element</button>

執行結果如下 :

這是原味的 HTML 超連結與按鈕. 如果加上特定的 jQuery UI 樣式等級, 馬上變身為漂亮的按鈕, 如下面範例所示 :

測試 2 : 加上特定 class 變身為主題式按鈕 [看原始碼]

<a href="#" class="ui-button ui-widget ui-corner-all">Anchor</a>

<button class="ui-button ui-widget ui-corner-all">Button element</button>

執行結果如下 :

可見超連結也變身為具主題式布景的按鈕, 滑鼠滑過或按下按鈕也會變色.

主題式按鈕上除了放置文字外, 還可以加上 jQuery UI 特製小圖案 (icon), 這必須使用加上特定樣式等級的 span 元素串在按鈕文字的前面或後面來完成, 而非將樣式串在主題式按鈕的 class 後面, 故只有 a 與 button 元素才能用, 因為 input 元素的按鈕文字是放在 value 屬性裡面, 不像 a 與 button 是放在元素內容中被起始與結束標籤包起來, 因此無法使用 span 元素.

此樣式等級包含兩個樣式, 前面固定為 ui-icon, 後面則是 icon 的樣式名稱, 此處為 ui-icon-trash 垃圾桶圖案. 完整 icon 樣式名稱參考 :

# https://api.jqueryui.com/resources/icons-list.html

範例如下 :

測試 3 : 為按鈕加上小圖案 (icon) [看原始碼]

<a href="#" class="ui-button ui-widget ui-corner-all">Anchor <span class="ui-icon ui-icon-volume-on"></span></a>

</span><input type="button" value="Input element type=button" class="ui-button ui-widget ui-corner-all">

<button class="ui-button ui-widget ui-corner-all"><span class="ui-icon ui-icon-gear"></span> Button element</button>

此處在 a 與 button 的內容中, 分別於按鈕文字前後加上含有 icon 的 span 元素, 執行結果如下 :

有了 icon 使主題式按鈕更能傳達意義.

按鈕主要是用來觸發 click 事件, jQuery 的事件處理方式是呼叫按鈕的 jQuery 物件的 click() 方法, 並在傳入的回呼函數中處理事件, 這樣此按鈕就被綁定了一個 click 事件了 :

$("#button1").click(function(e) {
//event handling
}

為了要取得 jQuery 物件, button 元素必須加入 id 屬性, 例如 :

<button id="button1">Click</button>

下面範例在按下 "放入購物車" 按鈕後觸發 click 事件, 事件處理程式只是簡單地用 alert() 回應物品已加入購物車 :

<button id="cart" class="ui-button ui-widget ui-corner-all"><span class="ui-icon ui-icon-cart"></span> 放入購物車</button>

jQuery 程式 :

$("#cart").click(function(e) {
alert("已放入購物車!");
e.preventDefault();
});

測試 4 : 為按鈕綁定 click 事件 (1) [看原始碼]

執行結果 :

上面的範例可以使用 jQuery UI 的訊息盒 (Message Box) 來使介面一致化, 即全部使用主題布景, 訊息盒需使用 div 元素作為訊息容器, 例如 :

<div id="msgbox">
<p>已加入購物車</p>
</div>

然後取得 div 元素之 jQuery 物件並呼叫其 dialog() 方法, 傳入設定物件進行特性設定 :

$("#cart" ).click(function(e) {
$("#msgbox").dialog("open");
e.preventDefault();
});
$("#msgbox").dialog({
autoOpen: false,
title: "Info",
buttons: {
確定: function() {
$(this).dialog("close");
}
}
});

測試 5 : 為按鈕綁定 click 事件 (2) [看原始碼]

執行結果如下 :

此訊息盒預設為非強制性 (non-modal), 若要改為強制, 則在 dialog() 的傳入物件中必須加上 modal: true 這個屬性.

如果要製作只有 icon 的按鈕要怎麼做? 這必須在 button 或 a 元素的 class 內添加 ui-button-icon-only 樣式才行, 有此樣式後, 就算 button 裡面有內容也不會顯示出來, 不過可以在 button 元素中添加 title 屬性, 這樣滑鼠移過時就會有 tooltip 浮現, 如下面範例所示 :

測試 6 : 只有 icon 圖像的按鈕 [看原始碼]

<button id="cart" class="ui-button ui-widget ui-corner-all ui-button-icon-only" title="放入購物車"><span class="ui-icon ui-icon-cart"></span>放入購物車</button>

此例程式與上面相同, 執行結果如下 :

注意, 在 </span> 與 </button> 之間一定要放個字串, 例如上面的 "放入購物車", 這樣按鈕才會方方正正的, 雖然這個字串因為 ui-button-icon-only 樣式不會顯示, 但如果沒有它的話, 按鈕就會變成細細扁扁的不好看.

jQuery UI 提供高達 173 個內建的按鈕樣式, 如下列範例所示 :

測試 7 : 只有 icon 圖像的按鈕全展示 [看原始碼]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI 測試</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
}
button {margin: 2px;}
</style>
</head>
<body>
<button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title=".ui-icon-caret-1-n"><span class="ui-icon ui-icon-caret-1-n"></span>icon</button>
<button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title=".ui-icon-caret-1-ne"><span class="ui-icon ui-icon-caret-1-ne"></span>icon</button>
<button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title=".ui-icon-caret-1-e"><span class="ui-icon ui-icon-caret-1-e"></span>icon</button>
<button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title=".ui-icon-caret-1-se"><span class="ui-icon ui-icon-caret-1-se"></span>icon</button>
<button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title=".ui-icon-caret-1-s"><span class="ui-icon ui-icon-caret-1-s"></span>icon</button>
...... (略)
<button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title=".ui-icon-gripsmall-diagonal-se"><span class="ui-icon ui-icon-gripsmall-diagonal-se"></span>icon</button>
<button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se" id="cart"></span>icon</button>
</body>
</html>

注意在 </span> 與 </button> 之間必須有個字串例如此處用 "icon", 這樣按鈕才會看來方正. 結果如下 :