2020年9月26日 星期六

jQuery Mobile 學習筆記 (二) : 按鈕

本篇繼續測試 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>
      <a href="#page3">下一頁</a>
      </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>
      <a href="#page4">下一頁</a>
      </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>
      <a href="#page5">下一頁</a>
      </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>
      <a href="#page6">下一頁</a>
      </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>
      <a href="#page7">下一頁</a>
      </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>
      <a href="#page1">第一頁</a>
      </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 如下 :



沒有留言 :