本篇繼續測試 jQuery Mobile 頁面中最常用的控制項 : 按鈕, 它其實是表單元件的一種, 但因為它不只用在表單中, 因此獨立出來做測試. 在 jQuery Mobile 中按鈕分成兩類 :
- 超連結按鈕 : 將 a 元素套上 data-role="button" 屬性所建立的按鈕
- 表單按鈕 : 以 button 元素與 type="button"/"reset"/"submit" 的 input 元素所建立之按鈕
表單按鈕適合用在表單中, 操作換頁應該使用具有 data-role="button" 屬性的超連結按鈕, 因為超連結本質上具有重導向功能, 不需要程式碼即可達成換頁效果, 而表單元素按鈕則需要用 Javascript 程式處理 click 等事件.
本系列之前的文章參考 :
#
jQuery Mobile 學習筆記 (一) : 環境配置與頁面結構
教學文件參考 :
#
https://demos.jquerymobile.com/1.4.5/button-markup/
一. 標題列與註腳列上的按鈕 :
jQuery Mobile 頁面中的 header (標題列), content (內容區), 與 footer (註腳列) 均可放置按鈕, 比較特別的是, 放在標題列與註腳列的超連結 a 元素會自動轉成按鈕,
不需要 data-role="button" 屬性設定, 放在 content 內容區的超連結則一定要有此屬性設定才會成為按鈕.
標題列的按鈕位置只能放在標題的左邊或右邊, 可用 class="ui-btn-right" 與 class="ui-btn-left" 指定放置的位置, 若未指定則預設放在左邊, 例如 :
測試 1 : 標題列與註腳列的超連結按鈕 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<!-- 第一頁頁面 -->
<section data-role="page">
<header data-role="header">
<a href="#page2">第二頁</a>
<h1>按鈕測試</h1>
<a href="#page3" class="ui-btn-right">第三頁</a>
</header>
<article data-role="content">
<p>這是第一頁</p>
</article>
<footer data-role="footer">
<a href="#page2">第二頁</a>
<h3>頁尾</h3>
<a href="#page3" class="ui-btn-right">第三頁</a>
</footer>
</section>
<!-- 第二頁頁面 -->
<section data-role="page" id="page2">
<header data-role="header" data-add-back-btn="true" data-back-btn-text="返回">
<h1>第二頁</h1>
</header>
<article data-role="content">
<p>這是第二頁</p>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<!-- 第三頁頁面 -->
<section data-role="page" id="page3">
<header data-role="header" data-add-back-btn="true" data-back-btn-text="返回">
<h1>第三頁</h1>
</header>
<article data-role="content">
<p>這是第二頁</p>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例含有三個頁面, 在第一頁的標題列與註腳列中各有兩個超連結, 分別放在標題與註腳的左右兩側, 注意, 這些標題列與註腳列中的超連結即使沒加上 data-role="button" 屬性也會被自動轉成按鈕, 結果如下 :
可見標題列與註腳列對於超連結按鈕的擺放位置方式不同, 標題列會將按鈕放在標題的兩側且文字與按鈕會在同一列 (即使文字是用 h1~h6, p 或 div 之類的區塊元素); 而註腳列則不同, 如果文字是用區塊元素包覆, 則文字會跳列放置, 即按鈕與註腳文字會分開為不同列. 此例網址 QR code 如下 :
二. 內容區的按鈕 :
內容區可放置任何一種按鈕元素, 如下面範例所示 :
測試 2 : 使用不同元素製作按鈕 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<section data-role="page">
<header data-role="header">
<h1>按鈕測試</h1>
</header>
<article data-role="content">
<a href="#"
data-role="button" id="a_btn">超連結按鈕</a>
<button id="button_btn">Button 按鈕</button>
<input id="input_btn" type="button" value="Input 按鈕">
<input id="reset_btn" type="reset" value="Reset 按鈕">
<input id="submit_btn" type="submit" value="Submit 按鈕">
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<script>
$(function(){
$(document).on("click", "#a_btn", function(e){
e.preventDefault();
alert("你按了" + $(this).html());
});
$(document).on("click", "#button_btn", function(e){
e.preventDefault();
alert("你按了" + $(this).html());
});
$(document).on("click", "#input_btn", function(e){
e.preventDefault();
alert("你按了" + $(this).val());
});
$(document).on("click", "#reset_btn", function(e){
e.preventDefault();
alert("你按了" + $(this).val());
});
$(document).on("click", "#submit_btn", function(e){
e.preventDefault();
alert("你按了" + $(this).val());
});
});
</script>
</body>
</html>
此例在內容區放置了五個按鈕, 注意, 其中的
超連結按鈕必須指定 data-role="button" 屬性才會轉變成按鈕外觀, 否則仍然是超連結. 其次, 因為在 jQuery Mobile 頁面中, 網頁元素是動態載入頁面中, 按鈕事件的處理不能使用 $(document).ready(), 必須改用 $(document).on(), 否則不會有作用 (因為元素可能在另一個頁面堆疊中), 參考 :
#
jQuery mobile click event not working
結果如下 :
按下任一按鈕會跳出與下圖類似之對話框, 按確定會消失 :
此例網址 QR code 如下 :
一般來說如果只是要操作換頁 (載入其他頁面) 通常會使用超連結按鈕, 但在表單中則會使用 button, input, reset, submit 等表單按鈕.
三. 添加按鈕圖示 :
按鈕上也可以利用 data-icon 屬性來添加圖示以增進介面親和性, 可用的圖示如下表 :
| data-icon 屬性值 | 說明 |
| action | 動作 |
| alert | 注意 |
| arrow-l | 左箭頭 |
| arrow-d | 下箭頭 |
| arrow-d-l | 下左箭頭 |
| arrow-d-r | 下右箭頭 |
| arrow-r | 右箭頭 |
| arrow-u | 上箭頭 |
| arrow-u-l | 上左箭頭 |
| arrow-u-r | 上右箭頭 |
| audio | 音訊 |
| back | 後退 |
| bars | 橫槓 |
| bullets | 子彈 |
| calendar | 日曆 |
| camera | 照相機 |
| carat-d | 向下 |
| carat-l | 向左 |
| carat-r | 向右 |
| carat-u | 向下 |
| check | 選取 |
| clock | 時鐘 |
| cloud | 雲端 |
| comment | 評論 |
| delete | 刪除 |
| edit | 編輯 |
| eye | 眼睛 |
| forbidden | 禁止 |
| forward | 前進 |
| gear | 齒輪 (常用於設定) |
| grid | 網格 |
| heart | 愛心 |
| home | 首頁 |
| info | 訊息 |
| location | 定位 |
| lock | 上鎖 |
| mail | 郵件 |
| navigation | 導覽 |
| phone | 電話 |
| minus | 減號 |
| plus | 加號 |
| power | 電源 |
| recycle | 回收 |
| refresh | 重新整理 |
| search | 搜尋 |
| shop | 購物 |
| star | 星號 |
| tag | 標籤 |
| user | 使用者 |
| video | 音訊
|
參考 :
#
https://demos.jquerymobile.com/1.4.5/icons/
例如 :
測試 3 : 在按鈕上添加圖示 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<section data-role="page" id="page1">
<header data-role="header">
<a href="#page2">第二頁</a>
<h1>按鈕圖示測試 (1)</h1>
</header>
<article data-role="content">
<a href="#" data-role="button" data-icon="action">動作</a>
<a href="#" data-role="button" data-icon="alert">注意</a>
<a href="#" data-role="button" data-icon="arrow-l">左箭頭</a>
<a href="#" data-role="button" data-icon="arrow-d">下箭頭</a>
<a href="#" data-role="button" data-icon="arrow-d-l">下左箭頭</a>
<a href="#" data-role="button" data-icon="arrow-d-r">下右箭頭</a>
<a href="#" data-role="button" data-icon="arrow-r">右箭頭</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<!-- 第二頁頁面 -->
<section data-role="page" id="page2">
<header data-role="header">
<a href="#page1">上一頁</a>
<h1>按鈕圖示測試 (2)</h1>
</header>
<article data-role="content">
<a href="#" data-role="button" data-icon="arrow-u">上箭頭</a>
<a href="#" data-role="button" data-icon="arrow-u-l">上左箭頭</a>
<a href="#" data-role="button" data-icon="arrow-u-r">上右箭頭</a>
<a href="#" data-role="button" data-icon="audio">音訊</a>
<a href="#" data-role="button" data-icon="back">返回</a>
<a href="#" data-role="button" data-icon="bars">橫槓</a>
<a href="#" data-role="button" data-icon="bullets">子彈</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<!-- 第三頁頁面 -->
<section data-role="page" id="page3">
<header data-role="header">
<a href="#page2">上一頁</a>
<h1>按鈕圖示測試 (3)</h1>
</header>
<article data-role="content">
<a href="#" data-role="button" data-icon="calendar">日曆</a>
<a href="#" data-role="button" data-icon="camera">照相機</a>
<a href="#" data-role="button" data-icon="carat-d">向下</a>
<a href="#" data-role="button" data-icon="carat-l">向左</a>
<a href="#" data-role="button" data-icon="carat-r">向右</a>
<a href="#" data-role="button" data-icon="carat-u">向上</a>
<a href="#" data-role="button" data-icon="check">選取</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<!-- 第四頁頁面 -->
<section data-role="page" id="page4">
<header data-role="header">
<a href="#page3">上一頁</a>
<h1>按鈕圖示測試 (4)</h1>
</header>
<article data-role="content">
<a href="#" data-role="button" data-icon="clock">時鐘</a>
<a href="#" data-role="button" data-icon="cloud">雲端</a>
<a href="#" data-role="button" data-icon="comment">評論</a>
<a href="#" data-role="button" data-icon="delete">刪除</a>
<a href="#" data-role="button" data-icon="edit">編輯</a>
<a href="#" data-role="button" data-icon="eye">眼睛</a>
<a href="#" data-role="button" data-icon="forbidden">禁止</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<!-- 第五頁頁面 -->
<section data-role="page" id="page5">
<header data-role="header">
<a href="#page4">上一頁</a>
<h1>按鈕圖示測試 (5)</h1>
</header>
<article data-role="content">
<a href="#" data-role="button" data-icon="forward">前進</a>
<a href="#" data-role="button" data-icon="gear">齒輪</a>
<a href="#" data-role="button" data-icon="grid">網格</a>
<a href="#" data-role="button" data-icon="heart">愛心</a>
<a href="#" data-role="button" data-icon="home">首頁</a>
<a href="#" data-role="button" data-icon="info">訊息</a>
<a href="#" data-role="button" data-icon="location">定位</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<!-- 第六頁頁面 -->
<section data-role="page" id="page6">
<header data-role="header">
<a href="#page5">上一頁</a>
<h1>按鈕圖示測試 (6)</h1>
</header>
<article data-role="content">
<a href="#" data-role="button" data-icon="lock">上鎖</a>
<a href="#" data-role="button" data-icon="mail">郵件</a>
<a href="#" data-role="button" data-icon="navigation">導覽</a>
<a href="#" data-role="button" data-icon="phone">電話</a>
<a href="#" data-role="button" data-icon="minus">減號</a>
<a href="#" data-role="button" data-icon="plus">加號</a>
<a href="#" data-role="button" data-icon="power">電源</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<!-- 第七頁頁面 -->
<section data-role="page" id="page7">
<header data-role="header">
<a href="#page6">上一頁</a>
<h1>按鈕圖示測試 (7)</h1>
</header>
<article data-role="content">
<a href="#" data-role="button" data-icon="recycle">回收</a>
<a href="#" data-role="button" data-icon="refresh">重新整理</a>
<a href="#" data-role="button" data-icon="search">搜尋</a>
<a href="#" data-role="button" data-icon="shop">購物</a>
<a href="#" data-role="button" data-icon="star">星號</a>
<a href="#" data-role="button" data-icon="tag">標籤</a>
<a href="#" data-role="button" data-icon="user">使用者</a>
<a href="#" data-role="button" data-icon="video">視訊</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例將 50 個按鈕圖示分成七個頁面呈現, 結果如下 :
此例網址之 QR code 如下 :
如果要節省頁面空間, 可在超連結按鈕上添加 data-mini="true" 屬性來縮小按鈕尺寸, 例如 :
測試 4 : 縮小版的按鈕 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<!-- 第一頁頁面 -->
<section data-role="page" id="page1">
<header data-role="header">
<a href="#page2">第二頁</a>
<h1>按鈕測試 (1)</h1>
</header>
<article data-role="content">
<a href="#" data-role="button" data-icon="alert" data-mini="true">注意</a>
<a href="#" data-role="button" data-icon="arrow-l" data-mini="true">左箭頭</a>
<a href="#" data-role="button" data-icon="arrow-r" data-mini="true">右箭頭</a>
<a href="#" data-role="button" data-icon="arrow-u" data-mini="true">上箭頭</a>
<a href="#" data-role="button" data-icon="arrow-d" data-mini="true">下箭頭</a>
<a href="#" data-role="button" data-icon="back" data-mini="true">下箭頭</a>
<a href="#" data-role="button" data-icon="check" data-mini="true">選取</a>
<a href="#" data-role="button" data-icon="delete" data-mini="true">刪除</a>
<a href="#" data-role="button" data-icon="forward" data-mini="true">前進</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<!-- 第二頁頁面 -->
<section data-role="page" id="page2">
<header data-role="header">
<a href="#page1">第一頁</a>
<h1>按鈕測試 (2)</h1>
</header>
<article data-role="content">
<a href="#" data-role="button" data-icon="gear"
data-mini="true">齒輪</a>
<a href="#" data-role="button" data-icon="grid" data-mini="true">格子</a>
<a href="#" data-role="button" data-icon="home" data-mini="true">首頁</a>
<a href="#" data-role="button" data-icon="info" data-mini="true">訊息</a>
<a href="#" data-role="button" data-icon="minus" data-mini="true">減號</a>
<a href="#" data-role="button" data-icon="plus" data-mini="true">加號</a>
<a href="#" data-role="button" data-icon="refresh" data-mini="true">重新整理</a>
<a href="#" data-role="button" data-icon="search" data-mini="true">搜尋</a>
<a href="#" data-role="button" data-icon="star" data-mini="true">星號</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例中的每個超連結按鈕都添加了 data-mini="true" 屬性, 按鈕尺寸都縮小了, 結果如下 :
此例網頁 QR code 如下 :
按鈕圖示擺放的位置可用 data-iconpos 屬性來指定, 除位置外還可取消文字 :
- left : 文字的左方 (預設)
- right : 文字的右方
- top : 文字的上方
- bottom : 文字的下方
- notext : 取消文字, 只顯示圖示
例如 :
測試 5 : 指定按鈕圖示位置 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<!-- 第一頁頁面 -->
<section data-role="page" id="page1">
<header data-role="header">
<h1>按鈕測試</h1>
</header>
<article data-role="content">
<a href="#" data-role="button" data-icon="alert"
data-iconpos="left">注意</a>
<a href="#" data-role="button" data-icon="gear"
data-iconpos="right">齒輪</a>
<a href="#" data-role="button" data-icon="grid"
data-iconpos="top">格子</a>
<a href="#" data-role="button" data-icon="home"
data-iconpos="bottom">首頁</a>
<a href="#" data-role="button" data-icon="info"
data-iconpos="notext">訊息</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
結果如下 :
四. 與內容同寬的按鈕 :
不管是連結按鈕還是表單按鈕, 其寬度預設都會佔據整列 (即 display:block 區塊樣式), 有時考量頁面空間配置不需要這麼寬的按鈕, 可以添加 data-inline="true" 屬性將按鈕寬度縮小到剛好容納圖示與文字內容即可, 一連串這樣的按鈕排列在一起會以流水式依序排在後面, 例如 :
測試 6 : 與內容同寬的按鈕 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<!-- 第一頁頁面 -->
<section data-role="page" id="page1">
<header data-role="header">
<h1>按鈕測試</h1>
</header>
<article data-role="content">
<a href="#" data-role="button" data-icon="alert"
data-inline="true">注意</a>
<a href="#" data-role="button" data-icon="gear" data-inline="true">齒輪</a>
<a href="#" data-role="button" data-icon="grid" data-inline="true">格子</a>
<a href="#" data-role="button" data-icon="home" data-inline="true">首頁</a>
<a href="#" data-role="button" data-icon="info" data-inline="true">訊息</a>
<a href="#" data-role="button" data-icon="search" data-inline="true">搜尋</a>
<a href="#" data-role="button" data-icon="delete" data-inline="true">刪除</a>
<a href="#" data-role="button" data-icon="forward" data-inline="true">前進</a>
<a href="#" data-role="button" data-icon="back" data-inline="true">後退</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
結果如下 :
可見按鈕的寬度都縮小至內容大小, 不再佔據整列. 此例網址 QR code 如下 :
五. 控制群組按鈕 :
在製作導覽列時需要將一群按鈕組合在一起, 這時就需要用一個具有 data-role="controlgroup" 的 div 元素將這些按鈕包覆起來 :
<div
data-role="controlgroup">
<a href="#" data-role="button">Python</a>
<a href="#" data-role="button">Swift</a>
<a href="#" data-role="button">Java</a>
</div>
預設這些按鈕會垂直排列黏在一起, 例如 :
測試 7 : 預設垂直排列的按鈕群組 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<!-- 第一頁頁面 -->
<section data-role="page" id="page1">
<header data-role="header">
<h1>按鈕測試</h1>
</header>
<article data-role="content">
<div
data-role="controlgroup">
<a href="#" data-role="button">Python</a>
<a href="#" data-role="button">Swift</a>
<a href="#" data-role="button">Java</a>
</div>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
結果如下 :
此例網址之 QR code 如下 :
如果要讓群組內的按鈕水平排列, 則包覆的 div 元素需添加 data-type="horizontal" 屬性 :
<div
data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button">Python</a>
<a href="#" data-role="button">Swift</a>
<a href="#" data-role="button">Java</a>
</div>
例如 :
測試 8 : 水平排列的按鈕群組 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<!-- 第一頁頁面 -->
<section data-role="page" id="page1">
<header data-role="header">
<h1>按鈕測試</h1>
</header>
<article data-role="content">
<div data-role="controlgroup"
data-type="horizontal">
<a href="#" data-role="button">Python</a>
<a href="#" data-role="button">Swift</a>
<a href="#" data-role="button">Java</a>
</div>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
結果如下 :
此例網址之 QR code 如下 :
六. 按鈕的啟用與關閉控制 :
有時按鈕需要被關閉 (disabled) 禁止使用者操作 (例如未登入), 方法有四 :
- 套用 class"=ui-disabled" 樣式類別
- 呼叫 addClass("ui-disabled") 方法
- 呼叫 attr("disabled", true) 方法 (只有表單按鈕有效)
- 添加 disable 或 disabled="true" 屬性 (只有表單按鈕有效)
例如 :
測試 9 : 啟用 (enable) 與關閉 (disable) 按鈕 (1) [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<!-- 第一頁頁面 -->
<section data-role="page" id="page1">
<header data-role="header">
<h1>按鈕測試</h1>
</header>
<article data-role="content">
<!-- 套用 class="ui-disabled" -->
<a href="#" data-role="button" data-icon="alert"
class="ui-disabled">注意</a>
<button data-icon="check"
class="ui-disabled">選取</button>
<!-- 呼叫 addClass("ui-disabled") -->
<a href="#" data-role="button" data-icon="grid" id="grid">格子</a>
<button data-icon="star" id="star">星號</button>
<!-- 呼叫 attr("disabled", true) : 僅表單按鈕有效 -->
<a href="#" data-role="button" data-icon="search" id="search">搜尋</a>
<button data-icon="gear" id="gear">設定</button>
<!-- 套用 disabled 屬性 : 僅表單按鈕有效 -->
<a href="#" data-role="button" data-icon="home"
disabled>首頁</a>
<button data-icon="info"
disabled>訊息</button>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<script>
$(document).on("pageinit", "#page1", function(e){
$("#grid").
addClass("ui-disabled");
$("#star").
addClass("ui-disabled");
$("#search").
attr("disabled", true); //無效
$("#gear").
attr("disabled", true);
});
</script>
</body>
</html>
此例中四個關閉按鈕的方式都分別套用到超連結按鈕與表單按鈕上 :
可見 "搜尋" 與 "首頁" 這兩個按鈕仍然是開啟可按狀態, 前者表示超連結按鈕無法用呼叫 attr("disabled", true) 方法來關閉; 而後者表示超連結按鈕無法用 disabled 屬性來關閉. 此例網址之 QR code 如下 :
下面的範例則是添加兩個按鈕用來測試按鈕的關閉與啟用 :
測試 10 : 啟用 (enable) 與關閉 (disable) 按鈕 (2) [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<!-- 第一頁頁面 -->
<section data-role="page" id="page1">
<header data-role="header">
<h1>按鈕測試</h1>
</header>
<article data-role="content">
<!-- 套用 class="ui-disabled" -->
<a href="#" data-role="button" data-icon="alert" class="ui-disabled" id="alert">注意</a>
<button data-icon="check" class="ui-disabled" id="check">選取</button>
<!-- 呼叫 addClass("ui-disabled") -->
<a href="#" data-role="button" data-icon="grid" id="grid">格子</a>
<button data-icon="star" id="star">星號</button>
<!-- 呼叫 attr("disabled", true) : 僅表單按鈕有效 -->
<button data-icon="gear" id="gear">設定</button>
<!-- 套用 disabled 屬性 : 僅表單按鈕有效 -->
<button data-icon="info" disabled id="info">訊息</button>
<!-- 關閉與啟用按鈕 -->
<button id="enable">全部啟用</button>
<button id="disable">全部關閉</button>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<script>
$(document).on("pageinit", "#page1", function(e){
$("#grid").addClass("ui-disabled");
$("#star").addClass("ui-disabled");
$("#gear").attr("disabled", true);
$("#enable").on("click", function(e) {
$("#alert").removeClass("ui-disabled");
$("#check").removeClass("ui-disabled");
$("#grid").removeClass("ui-disabled");
$("#star").removeClass("ui-disabled");
$("#gear").attr("disabled", false);
$("#info").attr("disabled", false);
});
$("#disable").on("click", function(e) {
$("#alert").addClass("ui-disabled");
$("#check").addClass("ui-disabled");
$("#grid").addClass("ui-disabled");
$("#star").addClass("ui-disabled");
$("#gear").attr("disabled", true);
$("#info").attr("disabled", true);
});
});
</script>
</body>
</html>
網頁剛開啟時全部按鈕預設為關閉, 按 "全部開啟" 與 "全部關閉" 結果如下 :
此例網址之 QR code 如下 :
