2021年2月28日 星期日

jQuery Mobile 學習筆記 (十六) : 事件處理

jQuery Mobile 是基於 jQuery 而建立的行動網頁框架, 由於多了頁面控制與行動裝置觸控等操作需求, jQuery Mobile 除了繼承 jQuery 的事件處理函式外, 還定義了專屬於頁面與行動觸控等事件之處理函式. 本系列測試文章索引參考 :


jQuery Mobile 的特有的事件可分為下列五類 :
  • 頁面事件 (pagexxx)
  • 觸控事件 (tapxxx/swipexxx)
  • 捲動事件 (scrollstart/scrollstop)
  • 方向改變事件 (orientationchange)
  • 初始化事件 (mobileinit)
各類事件名稱如下表 :


 頁面事件 說明
 pagebeforecreate 頁面建立前觸發
 pagecreate 頁面建立時觸發
 pagebeforeshow 頁面顯示前觸發
 pageshow 頁面顯示後觸發
 pagebeforehide 頁面隱藏前觸發
 pagehide 頁面隱藏後觸發

 觸控事件 說明
 tap 快速點擊螢幕觸發
 taphold 長按螢幕觸發
 swipe 於 1 秒內在螢幕上水平拖曳滑動超過 30px, 但垂直距離不超過 75px 觸發
 swipeleft 於螢幕上水平向左拖曳滑動觸發
 swiperight 於螢幕上水平向右拖曳滑動觸發

 捲動事件 說明
 scrollstart 於螢幕上捲動開始時觸發
 scrollstop 於螢幕上捲動結束時觸發

 方向改變事件 說明
 orientationchange 螢幕方位改變時觸發


mobileinit 事件是指在 jQuery Mobile 載入後, 於全部元件建立之前所觸發之初始化事件, 主要用 $.mobile 物件之屬性來變更 jQuery Mobile 之系統預設值, 常用的物件屬性如下表 : 


 初始化事件 說明
 ajaxEnabled 是否允許以 Ajax 方式提交 (預設 true)
 defaultPageTransition 預設頁面切換特效 (預設 "fade")
 allowCrossDomainPages 以 Ajax 連結外部網頁時是否允許跨網域存取 (預設 false)
 pageLoadErrorMessage 頁面載入錯誤時顯示之訊息 (預設 "Error Loading Page")
 pageLoadErrorMessageTheme 錯誤訊息之主題佈景 (預設 "e")
 phonegapNavigationEnabled 以 PhoneGap 的導覽取代 window.history.back (預設 false)


初始化事件只要用來做 jQuery Mobile 的全域設定 (global configuration), 參考 :


監聽這些事件的方式是先選取 document 或 body 元素取得其  jQuery 物件, 然後呼叫 on() 方法並傳入事件名稱, 語法如下 :

$("document").on("事件名稱", function(e)){
    事件處理程式碼
    });

但方位改變事件卻必須綁定在 window 物件上, 用事件物件的 orientation 可取得行動裝置目前擺放的方位是直放 (portrait) 還是橫放 (landscape) : 

$(window).on("orientationchange" , function(e){
    alert(e.orientation);
    });

監聽初始化事件時在處理函式中以 $.mobile.屬性值來變更系統預設值 :

$(document).on("mobileinit", function(e) {
    $.mobile.ajaxEnabled=false;
    $.mobile.defaultPageTransition="turn";
    .....
    });


下面範例為頁面事件之測試 : 



<!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>
    <script>
    $(document).on("pagebeforecreate" , function(e){
      alert("頁面即將新增 (pagebeforecreate) : " + e.target.id);
      });
    $(document).on("pagecreate" , function(e){
      alert("頁面新增 (pagecreate) : " + e.target.id);
      });
    $(document).on("pagebeforeshow" , function(e){
      alert("即將要顯示的是 (pagebeforeshow) : " + e.target.id);
      });    
    $(document).on("pageshow" , function(e){
      alert("顯示頁面 (pageshow) : " + e.target.id);
      });
    $(document).on("pagebeforehide" , function(e){
      alert("即將要隱藏的是 (pagebeforehide) : " + e.target.id);
      });
    $(document).on("pagehide" , function(e){
      alert("隱藏的是 (pagehide) : " + e.target.id);
      });
    </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">
        <ul data-role="listview" data-inset="true">
          <li><a href="#page2">第 2 頁</a></li>
          <li><a href="#page3">第 3 頁</a></li>                 
        </ul> 
      </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">
        <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">
        <h1>頁面事件測試</h1>
      </header>
      <article data-role="content">
        <p>第三頁</p>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
  </body>
</html>

此例有三個頁面, 第一個頁面上有兩個放在列表清單中的超連結按鈕, 分別前往第一頁與第三頁, 頁面事件監聽器程式放在 head 內以便在網頁未載入前執行.

網頁載入過程會依序觸發下列 4 個事件 :
  1. pagebeforecreate
  2. pagecreate
  3. pagebeforeshow
  4. pageshow
然後整份網頁載入完成就顯示第一個頁面, 結果如下 :








點第 2 頁超連結會切換頁面至第 2 頁, 切換到新頁的過程會依序觸發下列 6 個事件 :
  1. pagebeforecreate (新頁)
  2. pagecreate (新頁)
  3. pagebeforehide (舊頁)
  4. pagebeforeshow (新頁)
  5. pagehide (舊頁)
  6. pageshow (新頁)
結果如下 : 










尚未顯示過的頁面第一次切進去時都會觸發 pagebeforecreate 與 pagecreate 這兩個建立頁面相關的事件, 而舊的頁面會被放進頁面堆疊中暫存. 按左上方的 Back 按鈕返回時會依序觸發下列 4 個事件 : 
  1. pagebeforehide (舊頁)
  2. pagebeforeshow (新頁)
  3. pagehide (舊頁)
  4. pageshow (新頁)
亦即第 2 頁頁面會被送進頁面池暫存而隱藏, 然後從頁面池中取出第 1 頁顯示, 結果如下 : 








這時若再點第 1 頁按鈕進去, 因為第 2 頁頁面之前已經建立過了, 就會直接從頁面池中直接取出並顯示, 因此不會觸發 pagebeforecreate 與 pagecreate 事件, 而是跟上面按 Back 鈕返回第 1 頁那樣依序觸發 pagebeforehide, pagebeforeshow, pagehide, pageshow 這四個事件, 結果與上面第一次進入 page2 時之後面四步相同. 本例測試網頁 QR code 如下 :




在單檔多頁面架構中, 我們可以很方便地利用 data-role="page" 屬性在超連結按鈕中以 href="#page_id" 方式進行換頁, 事實上也可以透過 $.mobile.changePage() 函式用程式控制換頁, 特別是在需要一些判斷才能決定換到哪一頁的情況時. 下面測試是將上面測試 1 改用 $.mobile.changePage() 控制換頁 :



<!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>
    <script>
    $(document).on("pagebeforecreate" , function(e){
      alert("頁面即將新增 (pagebeforecreate) : " + e.target.id);
      });
    $(document).on("pagecreate" , function(e){
      alert("頁面新增 (pagecreate) : " + e.target.id);
      });
    $(document).on("pagebeforeshow" , function(e){
      alert("即將要顯示的是 (pagebeforeshow) : " + e.target.id);
      });    
    $(document).on("pageshow" , function(e){
      alert("顯示頁面 (pageshow) : " + e.target.id);
      });
    $(document).on("pagebeforehide" , function(e){
      alert("即將要隱藏的是 (pagebeforehide) : " + e.target.id);
      });
    $(document).on("pagehide" , function(e){
      alert("隱藏的是 (pagehide) : " + e.target.id);
      });    
    </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">
        <ul data-role="listview" data-inset="true">
          <li><a href="#" id="to_page2">第 2 頁</a></li>
          <li><a href="#" id="to_page3">第 3 頁</a></li>                 
        </ul> 
      </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">
        <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">
        <h1>頁面事件測試</h1>
      </header>
      <article data-role="content">
        <p>第三頁</p>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <script>
      $(document).ready(function() {
        $("#to_page2").on("click", function(e) {
          $.mobile.changePage("#page2");
          });
        $("#to_page3").on("click", function(e) {
          $.mobile.changePage("#page3");
          });
        });
    </script>
  </body>
</html>

此例取消兩個 a 元素超連結按鈕 href 中的 page id, 新增 id 屬性, 並在程式中為此二超連結綁定 click 事件處理器, 呼叫 $.mobile.changePage() 函式進行換頁, 結果與上面測試 1 相同. 本例測試網頁 QR code 如下 :




 $.mobile.changePage() 除了可傳入 "#page_id" 參數進行 HTML 檔內換頁外, 也可以傳入 URL 切換到外部網頁, 還可以用第二參數以物件形式傳遞變數到其他頁面, 其介面如下 :

 $.mobile.changePage(dest [,attr])

其中第一參數 dest 可以是頁面 id 或 URL, 第二參數 attr 為物件, 可用之屬性如下表 :


 $.mobile.changePage() 之屬性 說明
 allowSamePageTransition 是否允許同頁切換 (預設 false)
 changeHash 是否更新瀏覽紀錄 (預設 true), 若設為 false 無法回上一頁
 data 以 Ajax 方式換頁時所傳遞之資料 (物件)
 loadMsgDelay 頁面載入之延遲時間 (預設 50 毫秒), 超過設定值會顯示訊息
 reload 是否要重新載入頁面至 DOM 中 (預設 false)
 reverse 回上一頁時是否要使用逆向的換頁特效 (預設 false)
 showLoadMsg 是否要顯示載入訊息 (預設 false)
 transition 換頁時之特效名稱
 type 以 Ajax 方式換頁時使用之 HTTP 方法 (預設 get)

 
例如 : 


<!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">
    <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
    <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>
  </head>
  <body>
    <!-- 第一頁頁面 -->
    <section data-role="page" id="page1">
      <header data-role="header">
        <h1>頁面事件測試</h1>
      </header>
      <article data-role="content">
        <ul data-role="listview" data-inset="true">
          <li><a href="#" id="to_page2">第 2 頁</a></li>
          <li><a href="#" id="to_page3">第 3 頁</a></li>                 
        </ul> 
      </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">
        <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">
        <h1>頁面事件測試</h1>
      </header>
      <article data-role="content">
        <p>第三頁</p>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <script>
      $(document).ready(function() {
        $("#to_page2").on("click", function(e) {
          $.mobile.changePage("#page2", {transition:"slideup"});
          });
        $("#to_page3").on("click", function(e) {
          $.mobile.changePage("#page3", {transition:"slidedown"});
          });
        });
    </script>
  </body>
</html>

此例測試網頁 QR code 如下 :




用 $.mobile.changePage() 換頁也可以切換到外部網頁, 特別是切換到後端網頁程式 (例如 PHP) 時可以用 type 與 data 屬性透過 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">
    <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
    <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>
  </head>
  <body>
    <!-- 第一頁頁面 -->
    <section data-role="page" id="page1">
      <header data-role="header">
        <h1>換頁測試</h1>
      </header>
      <article data-role="content">
        <ul data-role="listview" data-inset="true">
          <li><a href="#" id="to_page2">第 2 頁</a></li>
          <li><a href="#" id="to_page3">第 3 頁</a></li>                 
        </ul> 
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <script>
      $(document).one("pageinit", function(){
        $("#to_page2").on("click", function(e) {
          $.mobile.changePage("change_page_test.php, {  
            type:"post",
            data:{name:"tony", msg:"hello"}
            });
          });
        $("#to_page3").on("click", function(e) {
          $.mobile.changePage("hello.htm");
          });
        });
    </script>
  </body>
</html>

此例因為用到 Ajax 傳遞變數至後端,  GitHub 不支援動態網頁, 故改在 Hostinger 虛擬主機上測試. 其次, 書中範例呼叫 jQuery 的 one() 方法綁定 pageinit 事件, 其實用 $(document).ready(function() {} 也是可以的. 按 "第二頁" 會載入 change_page_test.php, 此程式會用 $_REQUEST[] 取得前一頁所傳來的變數, 程式內容如下 :

# change_page_test.php
<!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">
    <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
    <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>
  </head>
  <body>
    <!-- 第一頁頁面 -->
    <section data-role="page" id="page1">
      <header data-role="header">
        <h1>換頁傳送 data 測試</h1>
      </header>
      <article data-role="content">
<?php
echo "name:".$_REQUEST["name"]."<br>".
     "msg:".$_REQUEST["msg"];
?>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
  </body>
</html>

按 "第三頁" 則是載入純網頁 hello.htm, 內容如下 : 

#hello.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">
    <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
    <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>
  </head>
  <body>
    <!-- 第一頁頁面 -->
    <section data-role="page" id="page1">
      <header data-role="header">
        <h1>換頁測試</h1>
      </header>
      <article data-role="content">
        <p>Hello</p>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
  </body>
</html>

結果如下 : 






此例測試網頁 QR code 為 :




接下來測試觸控事件 :



<!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>
    <script>
      $(document).on("tap" , function(e){
        $("#msg").html("<h1>觸發 tap 事件</h1>");
        });
      $(document).on("taphold" , function(e){
        $("#msg").html("<h1>觸發 taphold 事件</h1>");
        });
      $(document).on("swipe" , function(e){
        $("#msg").html("<h1>觸發 swipe 事件</h1>");
        });
      $(document).on("swipeleft" , function(e){
        $("#msg").html("<h1>觸發 swipeleft 事件</h1>");
        });
      $(document).on("swiperight" , function(e){
        $("#msg").html("<h1>觸發 swiperight 事件</h1>");
        });
    </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">
        <h1 id="msg"></h1>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
  </body>
</html>

此例在頁面中用一個 id=msg 的 p 元素來顯示所發生的觸控事件, 結果如下 : 







實際操作發現 swipeleft 與 swiperight 都很容易觸發, 唯獨 swipe 我怎麼滑都沒辦法, 只好算了. 此例測試網頁 QR code 如下 : 




接著測試捲動事件 scrollstart 與 scrollstop : 



<!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>
    <script>
      $(document).on("scrollstart" , function(e){
        $("#msg").html("<h1>觸發 scrollstart 事件</h1>");
        });
      $(document).on("scrollstop" , function(e){
        $("#msg").html("<h1>觸發 scrollstop 事件</h1>");
        });
    </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">
        <h1 id="msg"></h1>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
  </body>
</html>

結果如下 : 




此例測試網頁 QR code : 



接下來是 orientationchange 事件測試, 所謂 orientation 是指行動裝置的方位是直的 (portrait) 還是恆的 (landscape), 注意, 此事件要選取 window 物件來綁定 orientationchange 事件 : 



<!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>
    <script>
      $(window).on("orientationchange" , function(e){
        $("#msg").html("目前螢幕的方向是 : " + e.orientation);
        });
    </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">
        <h1 id="msg"></h1>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
  </body>
</html>

將手機直放與橫放切換, 結果如下 : 





此例測試網頁 QR code : 



最後來測試 mobileinit 事件, 此事件也是綁定在 document 物件上, 並且事件處理程式碼須放在 head 內, 重要的是, 初始化事件處理程式必須放在 jQuery Mobile 函式庫前面, 以便函式庫初始化之前這些設定值就已存在, 這樣才能夠執行初始化動作, 順序若顛倒則初始化設定將無效, 例如 : 



<!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">
    <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
    $(document).on("mobileinit" , function(e){   //須在 jQuery Mobile 函式庫之前
      $.mobile.defaultPageTransition="turn";
      $.mobile.pageLoadErrorMessage="無法載入頁面";
      $.mobile.pageLoadErrorMessageTheme="b";
      });
    </script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <!-- 第一頁頁面 -->
    <section data-role="page" id="page1">
      <header data-role="header">
        <h1>初始化事件測試</h1>
      </header>
      <article data-role="content">
        <ul data-role="listview" data-inset="true">
          <li><a href="#page2">第 2 頁</a></li>
          <li><a href="nothispage.htm">第 3 頁</a></li>                 
        </ul> 
      </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">
        <p>第二頁</p>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    </section>
  </body>
</html>

結果如下 : 




此例測試網頁 QR code 為 :



2021 年第 9 周記事

前天元宵節, 我晚上去全聯買元宵時貨架早已被一掃而空, 只剩幾盒黃金流沙, 但買回來吃卻發現甜甜鹹鹹的還不錯, 菁菁說以後就買這款的. 過了十五年味便盡失, 不像元旦過後還有個春節, 該捲起袖子努力幹活啦! 

本周從高雄帶回一支水某已前買的新不沾鍋, 因為鄉下那個平底鍋經過兩年後已經變成會沾鍋, 煎魚煎豆腐都越來越醜, 只好換新. 聽說平底不沾鍋要保養, 就是洗淨後用餐巾紙擦乾, 再滴些沙拉油塗抹後用瓦斯爐稍微熱鍋即可, 參考 :


今年芒果花期 (春節前後) 剛好都沒雨水, 枝頭的花苞都開好開滿, 預期五月芒果應該豐收 :




早上在菜園摘菜給小舅, 發現茼蒿居然已經開花, 年前種茼蒿其實只吃不到兩次, 原本是準備除夕煮火鍋用的, 但高麗菜太多了根本輪不到它, 等啊等的就開花了, 雖然它開的黃花鰻漂亮的, 但爸說不如鋤掉改種別的, 買菜苗就好不需要留種子 :




我想也對, 早上去種子行買了 30 株大陸妹與 20 株奶油波蘿才有地方種. 前陣子阿泉伯母給我們一些菜苗, 最近已可採收, 聽說這比大陸妹更好吃, 我原先不知其名, 到了種子行向老闆娘描述菜的樣子 (忘了照相帶去), 她馬上說這必是奶油波蘿, 所以就買了一些來種 :




之前跟種子行買的青蔥苗今年初居然開花結果 : 




但媽以前留下來的蔥卻從來不開花 :




所以決定以後放棄種子行的蔥苗, 爸已先將媽留下那些蔥分株在旁邊另闢菜畦繁殖. 我查資料發現這種會開花的似乎稱為北蔥; 而媽已前種的應該是四季蔥, 參考 : 

蔥?三星蔥白為何特別長?專家教你挑蔥

本周原先都在學習 Python 爬蟲, 但突然發現網頁設計的書被預約要還, 所以暫停下來整理了 CSS 與補寫 jQuery Mobile 未完成的部分, 下周再回到爬蟲唄, 加油, 不要浪費時間看 Yahoo 新聞那些垃圾了. 

一段時間沒在追韓劇了, 只剩下周末回鄉下時, 偶而看一集 "暗行御史", 該劇已播畢, 但我從元旦後看到現在只看到第九集, 因為這部就是那種可看可不看的戲, 純消遣而已. 沒追劇的好處就是學習速度變快了! 

2021年2月27日 星期六

jQuery Mobile 學習筆記 (十五) : 換頁特效

最近在複習 jQuery Mobile 時發現有一個基本 (但並非很重要) 的功能一直沒測試, 那就是換頁特效, 這是利用 jQuery 操控 CSS 的應用, 而 jQuery Mobile 將其包裝成 data-transition 屬性, 當然更方便好用 (雖然我覺得那是花拳繡腿). 本系列測試文章索引參考 :


單檔多頁的 jQuery Mobile 行動網頁透過超連結按鈕在多個頁面中切換, 預設會以 Ajax 方式從頁面池 (page stack) 中取出新頁面, 並將前一頁面丟回頁面池中暫存, 這種頁面切換預設會以 fade 方式進行, 但可利用在超連結按鈕上添加 data-transition 屬性加以改變, 可用之屬性值如下 :


 data-transition 屬性值 說明
 fade 淡入效果 (預設)
 flip 翻轉
 flow 原頁面縮小移出, 新頁面縮小移入後放大
 none 無特效
 pop 新頁面跳出展開
 slide 原頁面由右至左滑出, 新頁面由右至左滑入
 slidedown 原頁面由上至下滑出, 新頁面由上至下滑入
 slidefade 原頁面由右至左淡出, 新頁面由右至左淡入
 slideup 原頁面由下至上滑出, 新頁面由下至上滑入
 turn 以頁面中心為軸轉換


下面測試將上面 10 種換頁特效放在列表清單超連結按鈕中 (id=page1), 按其中項目會以指定效果轉換至第二頁 (id=page2) : 



<!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">
        <ul data-role="listview" data-inset="true">
          <li><a href="#page2" data-transition="fade">Fade</a></li>
          <li><a href="#page2" data-transition="flip">Flip</a></li>
          <li><a href="#page2" data-transition="flow">Flow</a></li>
          <li><a href="#page2" data-transition="pop">Pop</a></li>
          <li><a href="#page2" data-transition="slide">Slide</a></li>
          <li><a href="#page2" data-transition="slidedown">Slidedown</a></li>
          <li><a href="#page2" data-transition="slidefade">Slidefade</a></li>
          <li><a href="#page2" data-transition="slideup">Slideup</a></li>
          <li><a href="#page2" data-transition="turn">Turn</a></li>
          <li><a href="#page2" data-transition="none">None</a></li>
        </ul>
      </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">
        <p><a href="#page1" data-role="button">返回</a></p>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
  </body>
</html>

結果如下 : 





此例測試網頁 QR code 如下 : 



碁峰的兩本前端網頁設計好書

最近從母校圖書館借到兩本碁峰出版的網頁設計好書 :

1.  學好跨平台網頁設計第二版 (碁峰, 文淵閣工作室, 2019)


Source : 博客來


此書完整介紹前端網頁設計相關技術 : HTML5, CSS, Javascript, jQuery, jQuery Moble, 以及 Bootstrap, 只要熟習這五大項目即可掌握前端網頁技術的精要了. 鄧文淵工作室的系列作品特色就是條理清楚, 範例簡單易懂, 還附有 100 分鐘的影音教學+範例程式, 可在碁峰網站下載 :





Source : 博客來


此書的主角是 Bootstrap 框架, 全書 18 章裡前 12 章都是 Bootstrap 主題, 13~15 章為 Javascript 精要, 16 章為 jQuery 重要函式, 17 章為 jQuery Mobile 重點介紹, 18 章為 Cordova 平台介紹, 附錄則有 MTA Javascript 國際認證模擬試題. 可見與上面那本不同的是, Javascript, jQuery, 與 jQuery Mobile 在此書中為重點濃縮, 重點完全是在 Bootstrap 功能敘述, 特色是最後一章談如何用 Cordova 平台將 jQuery Mobile 行動網頁轉成 App. 書中範例可在碁峰網站下載 :


2021年2月26日 星期五

市圖還書 5 本 (Swift & Python & 機器學習)

本周市圖還書如下 : 
Swift 目前沒時間看, 況且已有買新書, 舊書便還了吧. No.2 這本為魏巍所寫, 這個非科班軟體人寫過之前我借的 Lua 的書, 跨界能這麼厲害不簡單. No.4 這本是 Python CAE 應用的書, 可惜是 Python 2.x 時代的舊書, 用不到也還了. No.5 這本我已買進, 不須再借. 

用 Python 學線性代數 (一) : 教科書與參考書

這學期二哥選修線性代數, 這本是電機系一下排的課, 但那時他還在物理系, 所以算是補選. 我打算跟他們進度複習線性代數, 因為線代是機器學習的基礎, 而我以前在學校時這門課學得不算好 (大概是 70 幾分的水準), 那時也不知道學這門課除了解聯立方程式還有甚麼用.

 二哥他們老師指定的教科書是下面這本 : 

Linear Algebra with Applications 9th edition (Steven J. Leon, 2015, Pearson)


Source : 天瓏


這本教科書已出到第十版, 但其實第九版就很好了. 

此書也有繁體中譯本 (母校圖書館有, 但還是看原文書較好) :

線性代數, 9/e (Leon: Linear Algebra with Application, 9/e) (蔡政穆, 滄海, 2016)

事實上我比較喜歡的是下面這本以 Python 為計算工具的參考書, 作者 Hyun-Seok Son 為南韓國立首爾大學 PhD, 是精通 Python 與 R 的資料科學家 : 



Source : Amazon


下面這幾本參考書也很不錯 : 

Linear algebra for everyone (LinearAlgebra, 2011, Springer)
Linear Algebra Step by Step (Kuldeep Singh, 2014, Oxford)
Linear Algebra Done Right 3rd (Sheldon Axler, 2015, Springer)
Schaums Outline of Linear Algebra, 6h Edition (Seymour Lipschutz, 2017, McGraw-Hill)
Linear algebra for everyone (Gilbert Strang, 2020, Cambridge)

特別是 "Linear Algebra Step by Step" 這本除了可作為教科書, 也適合自修. 

線上教材非常多, 例如 :


Youtube 的教學影片參考 :




2021年2月25日 星期四

jQuery Mobile 語法小抄

最近向母校圖書館借的 "學好跨平台網頁設計第二版 (碁峰, 文淵閣工作室)" 有人預約須還 (這本書編得真好), 我翻閱了一遍大致都是已熟習沒必要再借, 但其中 jQuery Mobile 部分語法表具有快速查閱價值, 故綜合之前筆記中所測試的功能整理如下, 參考 :



1.  data-role 屬性值列表 :

jQuery Mobile 利用 HTML5 的 data-* 屬性功能自訂了一組 data-role 自訂屬性, jQuery Mobile 的全部元件與版面配置都是靠 data-role 控制與排版 :


 data-role 屬性值 說明
 page 定義一個行動網頁頁面或對話框 (dialog) 頁面
 header 定義行動網頁頁面的頁首
 content 定義行動網頁頁面的內容
 footer 定義行動網頁頁面的頁尾
 button 定義按鈕元件 (用來將 a 元素轉成超連結按鈕)
 listview 定義列表清單元件 (用來將 ul 或 ol 元素轉成列表清單)
 dialog 定義對話框
 popup 定義彈出式訊息窗 (用來將 div 元素轉成訊息窗)
 navbar  定義導覽列 (用在頁首或頁尾內的 div 元素, 按鈕數 <= 5)
 controlgroup 定義控制群組 (將 div 區塊內元件視為群組)
 collapsible 定義可折疊區塊
 collapsible-set 定義可折疊區塊組合 (製作 accordion 手風琴元件)
 panel 定義側邊欄
 tabs 定義頁籤
 fieldcontain 表單欄位之容器 (使每欄以橫線隔開)
 slider 表單欄位之滑動開關元件
 rangeslider 表單欄位之雙柄滑桿元件
 none 取消 jQuery Mobile 將此表單欄位初始化 (維持 HTML5)

  • 第一頁除外的頁面, 其 header 可用 data-add-back-btn="true" 屬性添加返回按鈕, 但預設是 "Back", 可用 data-back-btn-text="返回" 修改. 
  • 設定為 controlgroup 的 div 區塊可以用 data-type="horizontal" 控制容器內元件為水平排列.
  • 超連結按鈕可用 data-inline="true" 設定寬度不佔用螢幕寬 (可容納文字/圖示即可), 以利按鈕不分行配置 (但超過 5 個還是會跳行). 
  • 列表清單元件可用 data-inset="true" 設定清單內縮, 不占用螢幕全寬. 其清單項目 (li 元素) 可添加 data-role="list-divider" 屬性作為分類項目, 添加 data-filter="true" 則可在上面加上一個搜尋框. 


2. 按鈕圖示 (data-icon 與 data-iconpost) :    


 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 音訊

 data-iconpos 屬性值 說明
 left 按鈕圖示在左
 right 按鈕圖示在右
 top 按鈕圖示在上
 bottom 按鈕圖示在下
 notext 無文字 (僅顯示按鈕圖示)


3. 主題佈景 (data-theme 與 data-overlay-theme) :


 data-[overlay-]theme 屬性值 說明
 a 預設主題 a
 b 備選主題 b
 c~z 自訂主題 c~z


4. 換頁特效 (data-transition) : 


 data-transition 屬性值 說明
 fade 淡入效果 (預設)
 flip 翻轉
 flow 原頁面縮小移出, 新頁面縮小移入後放大
 none 無特效
 pop 新頁面跳出展開
 slide 原頁面由右至左滑出, 新頁面由右至左滑入
 slidedown 原頁面由上至下滑出, 新頁面由上至下滑入
 slidefade 原頁面由右至左淡出, 新頁面由右至左淡入
 slideup 原頁面由下至上滑出, 新頁面由下至上滑入
 turn 以頁面中心為軸轉換


5. 超連結按鈕動作屬性 data-rel  : 

此屬性用在超連結按鈕之動作 : 


 data-rel 屬性值 說明
 popup 跳出訊息窗
 dialog 開啟對話框
 back 回上一頁
 external 前往外部資源

  • jQuery Mobile 用超連結按鈕切換頁面時預設都是使用 Ajax, 頁面移出時會被放入暫存區以增進效能, 但對於需動態從資料庫更新者會造成資料不即時問題, 可用 data-ajax="false" 屬性關閉 Ajax.