2020年9月30日 星期三

雙人座的太陽能飛機 Sunseeker Duo

我對太陽能飛機還停留在無人機測試構想階段, 但實際上這種夢想早已有人實現並開始商用. 今天在 Youtube 上看到一台雙人座太陽能飛機 Sunseeker Duo 在 2014 年的飛行實測影片, 實在令人驚豔 :

https://www.youtube.com/watch?v=uBA4XeMddMY




依據 Wiki 與官網資料, Sunseeker Duo 是義大利 Solar Flight 公司開發的高性能雙人座太陽能飛機, 翼展 22 公尺, 機身輕盈僅 280 公斤, 採用尾翼前置推進器, 全機依賴機翼上方的 1510 片太陽能板 (5 KW) 與鋰電池組提供動力, 能源轉換效率達 23%, 於陽光良好天氣下可持續飛行 12 小時, 爬升高度最高 12000 呎 (3700 公尺).

此機於 2014-05-30 於義大利進行首航, 並於 2015 年完成飛越阿爾卑斯山的壯舉. 此影片是 Solar Flight 公司老闆 Eric Scott Raymond (也是飛機的設計師) 與 Irena Raymond (是夫妻嗎?) 於 2014 年六月駕駛 Sunseeker Duo 飛越義大利全境的紀錄片, 參考 :

https://en.wikipedia.org/wiki/Sunseeker_Duo
https://www.solar-flight.com/sunseeker-duo/

2020年9月27日 星期日

2020 年第 39 周記事

時序來到九月底, 秋天的腳步近了, 晚上吹電扇都覺得有些涼, 但不吹又有點悶, 真是容易感冒的季節. 本周六為了下周的中秋連假上週六補班, 菁菁學校將其挪到運動會不用補, 二哥也沒課, 所以週六只有我要出勤, 但不用早起趕上學也挺好, 哈.

租給阿正兄的農地這期他打算改種芭樂, 今天早上整地, 下午就開始種直到太陽下山我去爬山回來還沒收工. 種芭樂好處是全年收成, 但缺點是工很多, 特別是套袋很費工. 好消息是明年起就會有吃不完的芭樂啦!

本周沒再追韓劇了, 閒暇時間都在專心研究 jQuery Mobile 用法, 雖然遲了點, 但這也是將應用程式移到手機上的最快方法, 雖然也開始在學 iPhone 的原生 App 開發語言 Swift, 但那可能需要較長時間來學, 而且我也還沒打算付費成為開發者, 充其量就是自用, 能在我 iPad 上跑即可. 但可以確定的是 Swift 我可以接受, Android 的 Kotlin 我是不會學的, 因為學的東西太多太雜了.


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 如下 :



2020年9月25日 星期五

PChome 商店街買書 : 翻轉英文能力的7個習慣

今天在整理市圖的預約書時發現這本書預約了大半年居然還排在第 10 順位 :


Source : 博客來

難道之前預約時是排第 15 嗎? 我查母校圖書館無, 查露天也無, 問明儀也沒有, 最後上 momo, 博客來, 各大書店也都售完補貨中, 不放棄繼續找, 最後在 PChome 商店街找到這本二手書 :

https://seller.pcstore.com.tw/S111933518/C1414130083.htm $160

加運費 60 合計 240 元.

此書市圖就總館一本, 再等下去要明年才能排到.

2020年9月23日 星期三

居家監控的太陽能無人機

今天在 Youtube 看到美國一個居家安防器材公司 SimpliSafe 的太陽能無人機測試影片, 主要是測試依賴太陽能電池白天不間斷飛行的時數 :

RC Solar Plane Flight Duration Test






所使用的 APM 自動飛行控制軟體透過飛行軌跡規劃讓飛機在農場上空不斷地繞圈圈盤旋, 並且實時記錄鋰電池電壓與電流 :



下面是此飛機的電源管理方塊圖  :




太陽電池先經過 GENASUN 電池模組 2 後再經過 MPTT 電池管理模組向鋰電池 (4S LIPO) 充電, 同時經電源模組 1 調整電壓後驅動電變 (ESC) :




這是機艙內的電源模組與飛控板, 鋰電池, 電變等 :




三角翼的設計比直翼可擺放更多太陽電池 (2.5 倍) :




從早上飛到下午, 總飛行時數近 9 小時. 利用太陽能飛機的不間斷盤旋進行居家安全監控是很棒的想法, 但如果要在夜間持續飛行到次日太陽升起, 利用氣體動力學原理改善飛機設計與充分採用高能量鋰電池提升電源管理效能是第一要務.

2020年9月22日 星期二

jQuery Mobile 學習筆記 (一) : 環境配置與頁面結構

第一次學習 jQuery Mobile 是在 2013 年時, 但當時卻只開了個頭就忙別的學習科目去了. 最近因為阿正學弟的詢問, Web App 又重新進入眼簾, 但睽違了七年之後行動網頁前端技術面貌已大大改變, React/Angular/Vue 引領風騷, jQuery/jQuery Mobile 似乎已黯然失色. 雖曾求新學過一些 Vue, 但是時間有限, 我又不是做大專案, 用 jQuery 能做到的功能為何還要花時間去學新的前端技術? 所以還是回來重溫 jQuery/jQuery Mobile 較實在.

首先須釐清的是, jQuery Mobile 只是行動網頁的 UI (使用者介面) 框架, 負責生成與原生 App 類似之行動網頁介面. 如果要存取手機的照相, 訊息, 簡訊等功能則需依靠 Cordova (舊名 PhoneGap), 將 jQuery Mobile 所設計的 Web App 轉成手機原生 App. 其次, jQuery Mobile 依賴 jQuery 才能運作.

以下測試參考了這幾本書 (都很舊了 2014~2017 年的) :
  1. jQuery Mobile 智慧型手機程式開發 (博碩, 岡本隆史)
  2. HTML5+CSS3+jQuery Mobile 輕鬆打造 App 與行動網站 (博碩, 陳婉凌)
  3. PhoneGap 跨平台手機程式開發實戰 (上奇, 張亞飛)
  4. 徹底研究 jQuery Mobile + PHP 手機程式及網站開發 (上奇, 張亞飛)
  5. jQuery Mobile 跨平台開發寶典 (上奇, 陶國榮)
  6. PHP+MySQL+jQuery Mobile 跨行動裝置網站開發 (碁峰, 陳會安)
  7. Visual Studio 2015 X Cordova跨平台App實戰特訓班 (碁峰, 文淵閣工作室)
  8. Javascript + jQuery Mobile + Node.js 跨平台網頁設計範例教本 (碁峰, 陳會安) 
  9. 錢沾計畫啟動:jQuery Mobile 跨平台賺錢 App 錢途無量 (佳魁, 李科泉) 
其中第一本岡本隆史寫的很好, 適合初學者自學.

jQuery Mobile 教學文件參考 :

https://demos.jquerymobile.com/1.4.5/
https://www.tutorialspoint.com/jquery_mobile/index.htm
CHAPTER 12 - jQuery Mobile 教學 ( 基礎 )

jQuery Mobile 制定的 data-xxx 屬性說明參考 :

https://api.jquerymobile.com/data-attribute/
jQuery Mobile Data 属性

之前的 jQuery Mobile 筆記參考 (2013 年) :

jQuery Mobile 測試 (一) : 環境佈置與頁面控制

以下測試程式放在 GitHub 上, 可用手機瀏覽器測試.


1. 環境配置 :

jQuery Mobile 最新版本為 v1.4.5, 而 jQuery 最新版為 v3.5.1, 但根據官網資料, jQuery Mobile v1.4.5 支援 jQuery v1.8~v1.11 與 v2.1 :




下載頁建議使用 jQuery v1.11.1 :

https://jquerymobile.com/download/

解壓縮後將 jQuery, jQuery Mobile 之 js 程式碼與 css 樣式檔分別複製到專案資料夾的 js 與 css 子目錄下 :
  • jquery-1.11.1.min.js (94KB)
  • jquery.mobile-1.4.5.min.js (196KB)
  • jquery.mobile-1.4.5.min.css (203KB)
另外 images 資料夾也要複製到專案資料夾下.

本地端供檔的網頁範本如下 :

<!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="js/jquery-1.11.1.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    <link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet">
  </head>
  <body>
    <script>
      $(function(){
        }); 
    </script>
  </body>
</html>

利用 CDN 供檔即無需準備執行環境, CDN 的網頁模板如下 :

<!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="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
  </head>
  <body>
    <script>
      $(function(){
        }); 
    </script>
  </body>
</html>

注意, 如果是 HTTPS 網站, 則 CDN 的 URL 也要改成 https 開頭.


2. 網頁架構: 

jQuery Mobile 的 Web App 網頁是以兩層 div 元素搭配 data-role 屬性建立行動網頁之頁面結構, 行動網頁內容可分散在不同 HTML 檔, 也可以整合在一個 HTML 檔案內, 透過超連結 a 元素之 href 屬性切換不同之瀏覽頁面, 幾乎不用寫一行程式碼即可建立漂亮的行動網頁使用者介面.

jQuery Mobile 依據 HTML5 制定了 data-role 屬性, 其值如下表所示 :


 data-role 屬性 說明
 page 建立一個瀏覽頁面 (page view)
 header 建立瀏覽頁面的標題列
 content 建立瀏覽頁面的內容列
 footer 建立瀏覽頁面的註解
 dialog 建立一個對話框
 navbar 建立一個導覽工具列
 button 建立一個按鈕
 controlgroup 建立一個控制群組
 listview 建立列表 (list view)
 slider 建立一個滑桿
 fieldcontain 建立一個表單欄位容器
 collapsible 建立一個可折疊容器
 collapsible-set 建立一個折疊選單


關於 jQueryMobile 的 data-xxx 屬性參考 :

https://api.jquerymobile.com/data-attribute/


基本的頁面結構分成 header (頁首或標題), content (內容), 以及 footer (頁尾或註腳) 三個部分 :

<div data-role="page">
  <div data-role="header">
    <h1>頁首</h1>
  </div>
  <div data-role="content">
    <p>內容</p>
  </div>
  <div data-role="footer">
    <h3>頁尾</h3>
  </div>
</div>

目前手機瀏覽器都已支援 HTML5, 故可將上面的 div 改成 HTML5 如下的語意標籤 :

<section data-role="page">
  <header data-role="header">
    <h1>頁首</h1>
  </header>
  <article data-role="content">
    <p>內容</p>
  </article>
  <footer data-role="footer">
    <h3>頁尾</h3>
  </footer>
</section>

其中 content 是必要的部分, header 與 footer 則是可有可無. header 用來放置頁面標題, 通常用 h1~h6 元素來包覆標題文字, 如果文字太長, 則後面無法顯示的部分會以 "..." 縮略. content 用來呈現文字, 圖片, 視訊等主體資訊, footer 部分通常用來放置作者, 公司, 或版權資訊.


(1). 多檔案架構 : 

如果網頁內容太多, 可分割放在多個 HTML 檔案頁中, 以 a 元素的 href 屬性切換 :

<a href="page2.htm" data-ajax="false">第二頁</a>

注意, 因為 jQuery Mobile 預設是以 Ajax 方式載入網頁, 而 Ajax 不支援載入本地檔案, 因此這裡超連結必須加入 data-ajax 屬性並將其設為 false (預設為 true), 否則會出現 "error loading page" 錯誤訊息, 參考 :

使用 JQueryMobile 點選超連結提示“error loading page” 錯誤

超連結 a 元素在 jQuery Mobile 中扮演了關鍵的頁面切換角色, jQuery Mobile 為其定義了一些 data- 開頭之屬性, 如下表所示 :


 a 的 data-xxx 屬性 說明
 data-ajax 是否要以 Ajax 方式載入網頁, 值="true" (預設), "false"
 data-rel 超連結的行為, 值="back" (上一頁), "dialog" (對話框), "external" (外部) 等
 data-icon 超連結按鈕上的小圖示, 值="home" (首頁), "back" (上一頁) 等
 data-transition 頁面轉換特效, 值="fade" (預設), "pop", "slide", "flip" 等六種


例如下面測試 1 有三個網頁檔 :


測試 1 : 多檔案換頁 [看原始碼 1_1看原始碼 1_2看原始碼 1_3]

第一頁 : jqueryuimobile_test_1_1.htm

<!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="jqueryuimobile_test_1_2.htm" data-ajax="false">第二頁</a><br>
        <a href="jqueryuimobile_test_1_3.htm" data-ajax="false">第三頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <script>
      $(function(){
        });
    </script>
  </body>
</html>

第二頁 : jqueryuimobile_test_1_2.htm

<!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="jqueryuimobile_test_1_1.htm" data-ajax="false">第一頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <script>
      $(function(){
        });
    </script>
  </body>
</html>

第三頁 : jqueryuimobile_test_1_3.htm

<!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="jqueryuimobile_test_1_1.htm" data-ajax="false">第一頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <script>
      $(function(){
        });
    </script>
  </body>
</html>

瀏覽首頁 jqueryuimobile_test_1_1.htm 按內容區的 "第二頁", "第三頁" 超連結會分別載入 jqueryuimobile_test_1_2.htm 與 jqueryuimobile_test_1_3.htm, 結果如下 :






此範例網址可用 Quick Mark 線上轉換為 QR code, 方便用手機直接掃描測試 :

http://www.quickmark.com.tw/cht/qrcode-datamatrix-generator/default.asp?qrLink





注意, 這種多檔方式有三個限制 :
  • 不可連結至其它網域之檔案
  • 連結之檔案只能有單一頁面
  • a 元素不可以有 target 屬性
也可將多頁內容整合於單一檔案中方便管理, 每一個頁面的 div 都需指定 id 屬性值, jQuery Mobile 就是以頁面的 id 屬性作為錨點, 利用 a 元素的 href 切換不同之錨點 id 達到頁面切換之效果.

例如在第一頁的超連結中設定 href 指向第二頁頁面的 (id=page2) :

<a href="#page2">第二頁</a><br>

則按此超連結就會切換到第二頁 :

<section data-role="page" id="page2">

例如上面的三檔案範例可以整合於下面範例的單一檔案中 : 


測試 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">
        <a href="#page2">第二頁</a><br>
        <a href="#page3">第三頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <!-- 第二頁頁面 -->
    <section data-role="page" id="page2">
      <header data-role="header">
        <h1>第二頁</h1>
      </header>
      <article data-role="content">
        <a href="#page1">第一頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <!-- 第三頁頁面 -->
    <section data-role="page" id="page3">
      <header data-role="header">
        <h1>第三頁</h1>
      </header>
      <article data-role="content">
        <a href="#page1">第一頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <script>
      $(function(){
        });
    </script>
  </body>
</html>

此例中三個頁面的 div 都必須指定 id 屬性, 以便 a 元素利用此 id 屬性值當作錨點以 href 屬性進行換頁, 結果與上面測試一完全相同. 此範例測試網址 QR code 如下 :




3. 回上一頁按鈕 : 

在上面的範例中, 用超連結來操作回上一頁不甚方便, 若超連結文字太短可能不好按. 其實 jQuery Mobile 提供了兩個 data-xxx 屬性, 可用來在標題列左上角添加 Back 按鈕 :
  • data-add-back-btn : 設定是否要添加回上一頁按鈕, 值="true", "false" (預設)
  • data-back-btn-text : 設定回上一頁按鈕上的文字, 值預設為 "Back"
不過要注意的是, 在 jQuery Mobile 1.4 以前, 此屬性是加在頁面 div 元素中, 而在 1.4 版後則必須要放在 header 中才會有效, 而且放在首頁無效, 只有在非首頁頁面才會出現, 參考 :


其次, 這兩個屬性只能放在 header 標題列, 放在 footer 註腳列無效.

例如 :


測試 3 : 標題列 header 上的 Back 按鈕 [看原始碼]

<!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="#page2">第二頁</a><br>
        <a href="#page3">第三頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <!-- 第二頁頁面 -->
    <section data-role="page" id="page2">
      <header data-role="header" data-add-back-btn="true">
        <h1>第二頁</h1>
      </header>
      <article data-role="content">
        <a href="#page1">第一頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <!-- 第三頁頁面 -->
    <section data-role="page" id="page3">
      <header data-role="header" data-add-back-btn="true">
        <h1>第三頁</h1>
      </header>
      <article data-role="content">
        <a href="#page1">第一頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <script>
      $(function(){
        });
    </script>
  </body>
</html>

此例中在第二頁與第三頁的 header 部分加入 data-add-back-btn="true" 後, 結果這兩個頁面標題列左邊就會出現一個 "Back" 按鈕, 結果如下 :






可見第二頁與第三頁標題列左邊都出現一個 Back 按鈕, 可回到上一頁. 此例之 QR code 如下 :




可見標題列的回上一頁按鈕預設顯示 "Back", 但可以用 data-back-btn-text 屬性設定, 例如 :


測試 4 : 自訂標題列 header 上的 Back 按鈕文字 [看原始碼]

<!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="#page2">第二頁</a><br>
        <a href="#page3">第三頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </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">
        <a href="#page1">第一頁</a>
      </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">
        <a href="#page1">第一頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <script>
      $(function(){
        });
    </script>
  </body>
</html>

結果如下 :






可見標題列按鈕已經從預設的 "Back" 改成 "返回" 了. 此例網址 QR code 如下 :




4. 固定標題列與註腳列 : 

由上面範例可知, 頁尾標題列預設是緊隨在內容區後面, 當內容很長必須用卷軸捲動時, 標題列與註腳列可能會從頁面中消失, 如果頁首與頁尾上有放置導覽按鈕 (例如上面範例中的返回按鈕), 操作起來就不太方便, 這可用 data-position="fixed" 屬性設定解決, 只要為標題列與註腳列天加此屬性, 就可將標題列固定在最上方, 註腳列固定在最下方, 例如 :


測試 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" data-position="fixed">
        <h1>第一頁</h1>
      </header>
      <article data-role="content">
        <a href="#page2">第二頁</a><br>
        <a href="#page3">第三頁</a>
      </article>
      <footer data-role="footer" data-position="fixed">
        <h3>頁尾</h3>
      </footer>
    </section>
    <!-- 第二頁頁面 -->
    <section data-role="page" id="page2">
      <header data-role="header" data-add-back-btn="true" data-back-btn-text="返回" data-position="fixed">
        <h1>第二頁</h1>
      </header>
      <article data-role="content">
        <a href="#page1">第一頁</a>
      </article>
      <footer data-role="footer" data-position="fixed">
        <h3>頁尾</h3>
      </footer>
    </section>
    <!-- 第三頁頁面 -->
    <section data-role="page" id="page3">
      <header data-role="header" data-add-back-btn="true" data-back-btn-text="返回" data-position="fixed">
        <h1>第三頁</h1>
      </header>
      <article data-role="content">
        <a href="#page1">第一頁</a>
      </article>
      <footer data-role="footer" data-position="fixed">
        <h3>頁尾</h3>
      </footer>
    </section>
    <script>
      $(function(){
        });
    </script>
  </body>
</html>

此例每個頁面的標題列與註腳列都加上 data-position="fixed" 屬性, 結果如下 :






此例網址 QR code 如下 :




5. 預設 Ajax 換頁 : 

jQuery Mobile 網頁在載入時是同時載入全部頁面, 但只顯示第一頁, 其他頁面是放在頁面池中暫存, 按超連結按鈕進行換頁時預設是使用 Ajax 模式從頁面池中取得目標頁面, 原頁面則放入頁面池中暫存, 此種作法可增進頁面載入速度, 這對靜態頁面沒有問題, 但對動態須更新資料的頁面就會產生資料不即時問題, 這時可用 data-ajax="false" 關閉預設之 Ajax 功能來解決, 例如 :



<!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="#page2">第二頁</a><br>
        <a href="#page3" data-ajax="false">第三頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <!-- 第二頁頁面 -->
    <section data-role="page" id="page2">
      <header data-role="header" data-add-back-btn="true">
        <h1>第二頁</h1>
      </header>
      <article data-role="content">
        <a href="#page1">第一頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <!-- 第三頁頁面 -->
    <section data-role="page" id="page3">
      <header data-role="header" data-add-back-btn="true">
        <h1>第三頁</h1>
      </header>
      <article data-role="content">
        <a href="#page1">第一頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <script>
      $(function(){
        });
    </script>
  </body>
</html>

此例在 page1 頁面中有兩個超連結按鈕, 前往 page2 者使用預設 Ajax 模式載入第二頁, 而前往 page3 者使用 data-ajax="false" 關閉 Ajax 功能, 結果如下 :






可見因為到 page2 的按鈕維持預設的 Ajax 模式載入, 故在第二頁中可看到返回鈕; 而到 page3 的頁面取消了 Ajax 功能重新載入該頁, 導致沒有顯示返回鈕. 此例 QR code 如下 :