使用 jQuery Mobile API 實現細粒度的自定義控制

jopen 12年前發布 | 52K 次閱讀 移動開發 jQuery Mobile

jQuery Mobile API 針對移動網站定制提供了另一個級別的控制。從全局選項的自定義設置，到鉤住交互事件和曝光的方法，一切都可以使用該 API 實現，并且在本文中進行介紹。在本文結束時，您就會知道如何精細地定義您想在移動網站中使用的自定義選項，以及如何編寫與 jQuery Mobile 框架進行交互的自定義代碼。

本文介紹了一系列來自 jQuery Mobile 框架的有用的屬性、事件和曝光的方法。在每一節中，將介紹各個選項，并提供代碼樣例，以說明它是如何完成的。要運行任何代碼樣例，您必須先下載 jQuery 和 jQuery Mobile 框架的最新版本，或在您的 HTML 文件中直接引用來自 jQuery 內容交付網絡 (CDN) 的文件。

全局選項

以下全局選項都可以通過 jQuery Mobile API 提供，它們使您能夠改變 jQuery Mobile 的默認行為：

  • 擴展 jQuery Mobile 的初始化事件

  • 創建自定義名稱空間

  • 頁面初始化

  • 自定義子頁面的 URL 鍵

  • 設置活動頁面和按鈕類

  • 設置默認的頁面和對話轉換

  • 自定義加載和錯誤消息
    • </ul>

    擴展 jQuery Mobile 的初始化事件

    jQuery Mobile 包括一個初始化事件，該事件甚至會先于 jQuery 的 document.ready 事件進行加載。jQuery Mobile 實際上在文檔對象本身上觸發其初始化事件，該事件名稱為 mobileinit。這使您可以覆蓋和擴展 jQuery Mobile 的默認全局選項，這是整篇文章的出發點。要擴展 mobileinit 事件，您需要在 jQuery Mobile 被加載之前，以及 jQuery 框架加載之后，添加自定義的 JavaScript 事件處理程序（參見清單 1）。


    清單 1. 擴展 jQuery Mobile mobileinit 事件

    </tr> </tbody> </table>
    清單 2. 綁定到 mobileinit 事件
    <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="custom-jqm-mobileinit.js"></script>
<script type="text/javascript" src="jquery.mobile.js"></script>

    要擴展 mobileinit 事件，您首先需要將它與一個自定義函數進行綁定。清單 2 顯示了一個示例，使用 bind 方法擴展 mobileinit 事件。

    </tr> </tbody> </table>
    清單 3. 擴展 $.mobile 對象
    $(document).bind("mobileinit", function() {
  // Override global options here
});

    當您成功綁定到 mobileinit 事件后，您就可以覆蓋全局選項。要覆蓋全局選項，您可以使用 jQuery 的 extend 方法來擴展 $.mobile 對象（見清單 3），也可以簡單地通過直接設置每個屬性來覆蓋它們。

    </tr> </tbody> </table>
    清單 4. 覆蓋每個屬性值
    $(document).bind("mobileinit", function() {
  $.extend(  $.mobile , {
    property = value
  });
});

    如果有多個您想更新的屬性，extend 方法是一個更清晰的選項，因為您不需要多次寫入 $.mobile 對象。然而，如果您只想更新一個屬性，只需很少的代碼行就可以設置每個屬性（見清單 4）。

    </tr> </tbody> </table>

    創建自定義名稱空間

    您可以通過名稱空間自定義 HTML5 data- 屬性，如 data-role。名稱空間允許您添加一個自定義名稱，例如，它將出現在 data-role 屬性的 data- 和 -role 部分之間。允許您自定義的名稱空間的 $.mobile 屬性是 ns。清單 5 顯示了一個使用 ns 屬性設置自定義名稱空間的示例。


    清單 5. 創建自定義名稱空間
    $(document).bind("mobileinit", function() {
  $.mobile.property = value;
});

    $.mobile 對象是設置所有屬性的起始點。

    </tr> </tbody> </table>

    頁面初始化

    jQuery Mobile 包括一個名稱為 autoInitializePage 的屬性，它確定 Web 頁面是否應該被初始化。默認情況下，該屬性值被設置為 true，因此當文檔就緒時，頁面總是被初始化。然而，通過擴展 $.mobile 對象，您可以將該屬性設置為 false，并在稍后再處理頁面初始化。清單 6 顯示了一個如何能夠在其他腳本運行時暫時延遲頁面初始化的示例。如果在 Web 頁面上有大量客戶端 JavaScript 在運行，將初始化延遲至 DOM 完成加載可能是一個好主意，這樣客戶端 JavaScript 就會有機會運行。


    清單 6. 為移動 Web 頁面設置自動初始化
    $(document).bind("mobileinit", function() {
  $.mobile.ns = "my-custom-ns";
});

    在清單 5 中使用的自定義名稱空間生成 data-my-custom-ns-role 而不是 data-role，這使您可以通過 CSS 選擇器定位這些名稱空間。通過 CSS 選擇器定位自定義名稱空間提供了另一種方式來為使用那些名稱空間的移動小部件設計自定義主題。    		 

    <!DOCTYPE HTML>
<html>
<head>
  <title>Understanding the jQuery Mobile API</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    $(document).bind("mobileinit", function() {
      $.mobile.autoInitializePage = false;
    });
  </script>
  <script type="text/javascript" src="jquery.mobile.js"></script>
</head>
    

    <body>
    

    <div data-role="page">
    <div data-role="content">
      <ul data-role="listview" id="my-list"></ul>
    </div>
  </div>
    

    <script type="text/javascript">
    $('#my-list').html('<li><a href="page-2.html">Link to another page</a></li>');
    $.mobile.autoInitializePage = true;
  </script>
    

    </body>
</html></pre> 
    
自定義子頁面的 URL 鍵</td>
</tr>
</tbody>
</table>
    

    當引用子頁面時，jQuery Mobile 默認使用一個 URL 參數鍵 ui-page。您可以通過 $.mobile 對象中一個名為 subPageUrlKey 的屬性來修改該鍵。這個屬性中被更新的任何字符串值，都反映在部件生成的子頁面 URL。例如，如果您使用 my-page 的一個自定義 subPageUrlKey，web-page.html&ui-page=value 這個默認的 URL 將變成 web-page.html&my-page=value。
    

    除了提供一種方式來創建更具吸引力的 URL，自定義子頁面的 URL 鍵還可以提供一種方式來縮短 URL，或將其值設置為更特定于要使用它們的網站的值。
    

    設置活動頁面和按鈕類
    

    當一個 Web 頁面包括 jQuery Mobile 框架時，有一個默認的 CSS 類會自動被應用到 ui-page 元素。要修改默認值 ui-page-active，您只需修改 $.mobile 對象的 activePageClass 屬性。通過更新該類，包含在框架中的默認 CSS 不再將其樣式應用到 ui-page-active 類，因為它不再存在。因此，重要的是對應您為該屬性提供的值來創建自己自定義的 CSS 類。
    

    設置默認的頁面和對話轉換
    

    默認情況下，在 jQuery Mobile 中，當通過 Ajax 處理 Web 頁面變更時，頁面和對話包括一個轉換效果。默認的頁面轉換是 slide，而默認的對話轉換是 pop。如需修改這些值，您需要定位 defaultPageTransition 或 defaultDialogTransition 屬性。清單 7 顯示了修改這些屬性值有多容易。
    

    
清單 7. 設置默認頁面和對話轉換 
    
</tr>
</tbody>
</table>
    自定義加載和錯誤消息
    該框架控制的其他兩種選項，分別是加載和錯誤消息。加載消息默認顯示 loading 字符串值。要更新該屬性，您只需定位 loadingMessage 屬性。在清單 8 中，我將默認加載信息從 loading 修改為 Please wait。結果，當使用 Ajax 加載頁面時，一個小對話框出現，其中顯示了我的自定義加載消息。
    清單 8. 設置默認加載消息
    


    

    $(document).bind("mobileinit", function() {
  $.mobile.defaultPageTransition = "fade";
  $.mobile.defaultDialogTransition = "fade";
});
     
    
在該示例中，頁面和對話的轉換都是淡化效果。該框架包括六種基于 CSS 的轉換效果：  slide、slideup、slidedown、pop、fade 和 flip。您也可以通過包括 data-transition 屬性，將這些效果直接應用到超鏈接上。    		


 
    
</tr>
</tbody>
</table>

    清單 9. 設置默認錯誤消息
    


    

    $(document).bind("mobileinit", function() {
  $.mobile.loadingMessage = "Please wait";
});
     
    
pageLoadErrorMessage 的默認值是 Error Loading Page。我將更新該消息，將它修改為清單 9 中更加用戶友好的消息。    		
 
    
</tr>
</tbody>
</table>
    您可以使用 jQuery Mobile API 擴展以下事件類型：
      

    • 觸摸事件
      • 

    • 方向事件
      • 

    • 滾動事件
      • 
</ul>
      

      觸摸事件
      

      在 jQuery Mobile 中有一些觸摸事件是可定制的。然而，這些事件僅當與支持觸摸功能的設備進行交互的用戶訪問您的 jQuery Mobile 網站時才可用。當這些事件可用時，您可以觸發任何自定義 JavaScript 作為對五種不同的事件的響應 tap、taphold、swipe、swipeleft 和 swiperight。這些事件全都是不言而喻的，如 表 1 所示。
      

      
表 1. jQuery Mobile 的可定制觸摸事件 
      

    


    

    $(document).bind("mobileinit", function() {
  $.mobile.pageLoadErrorMessage = 'Sorry, something went wrong. Please try again.';
});
     
    
鉤住 jQuery Mobile 事件    		


    
</tr>
    
</tr>
    
</tr>
    
</tr>
    
</tr>
    
</tr>
</tbody>
</table>

    要綁定到任意這些觸摸事件，您需要使用 document.ready 事件。當文檔就緒時，您可以訪問一個元素并綁定您選擇的觸摸事件（見清單 10）。

    清單 10. 綁定到觸摸事件
    


    
事件
描述

    
tap
當快速點擊屏幕時觸發。

    
taphold
當點擊屏幕并繼續接觸屏幕大約一秒時觸發。

    
swipe
當 Web 頁面被水平或垂直拖動時觸發。該事件實際上是惟一與屬性關聯的事件。這些屬性是 scrollSupressionThreshold、 durationThreshold、 horizontalDistanceThreshold 和 verticalDistanceThreshold。

    
swipeleft
當 Web 頁面被向左拖動時觸發。

    
swiperight
當 Web 頁面被向右拖動時觸發。


 
    


    

    <!DOCTYPE HTML>
<html>
<head>
  <title>Understanding the jQuery Mobile API</title>
  <link rel="stylesheet" href="jquery.mobile.css" />
  <script src="jquery.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $(".tap-hold-test").bind("taphold", function(event) {
        $(this).html("Tapped and held");
      });
    
    });
  </script>
  <script src="jquery.mobile.js"></script>
</head>
    

    <body>
  <div data-role="page" id="my-page">
    <div data-role="header">
            <h1>Header</h1>
        </div>
        <div data-role="content">
            <ul data-role="listview" id="my-list">
                <li class="tap-hold-test">Tap and hold test</li>
            </ul>
    </div>
  </div>
</body>
</html></pre> 
    
如您所見，代碼將 taphold 觸摸事件綁定到一個列表項。當文檔就緒時，可通過 jQuery 定位該示例中的這個列表項。那么，它被定位并綁定到 taphold 事件，該事件修改列表項內的 HTML。</td>
</tr>
</tbody>
</table>
    

    方向事件
    

    在智能手機和平板設備上，只有一個名稱為 orientationchange 的方向事件。該事件在設備被垂直或水平旋轉時觸發。要確定設備按哪個方向旋轉，您可以訪問方向屬性，它提供一個只讀值 portrait 或 landscape。綁定到 orientationchange 事件要求您定位 body 元素，然后使用 bind 方法來綁定事件（見清單 11）。
    

    
清單 11. 將 orientationchange 事件綁定到 body 元素 
    
</tr>
</tbody>
</table>

    清單 12. 當文檔就緒時觸發 orientationchange 事件
    


    

    $(document).ready(function(){
  $('body').bind('orientationchange', function(event) {
    alert('orientationchange: '+ event.orientation);
  });
});
     
    
在文檔就緒后綁定事件，這也很重要。否則，您會獲得不一致的結果，因為 body 元素可能在綁定時不可用。您也可以進一步增強該代碼，當文檔就緒時觸發 orientationchange 事件（見清單 12）。    		
 
    


    

    $(document).ready(function(){
  $('body').bind('orientationchange', function(event) {
    alert('orientationchange: '+ event.orientation);
  });
    

    $('body').trigger('orientationchange');
});</pre> 
    
當文檔就緒時觸發事件，這使您可以確定 Web 頁面初始加載時的方向。當您需要根據在用設備的當前方向顯示內容時，這特別有用。您也可以通過 CSS 訪問方向值，因為它們被添加到 Web 頁面中的 HTML 元素。這些強大的特性使您可以根據設備的方向修改內容布局。</td>
</tr>
</tbody>
</table>
    

    滾動事件
    

    jQuery Mobile 包括滾動事件，當用戶滾動 Web 頁面時觸發。第一個事件是 scrollstart 事件，它在頁面滾動開始時觸發。清單 13 顯示了如何能夠綁定到該事件，并添加在頁面滾動開始時運行的自定義 JavaScript 代碼。
    

    
清單 13. 綁定到 scrollstart 事件 
    • 


    

    $(document).ready(function(){
    

    $('body').bind('scrollstart', function(event) {
    // Add scroll start code here
  });
    

    });</pre> 
    
名稱為 scrollstop 的另一個事件，在頁面滾動停止時應用。如清單 14 所示，綁定到 scrollstop 事件的方法就和 scrollstart 綁定一樣。</td>
</tr>
</tbody>
</table>

    
清單 14. 綁定到 scrollstop 事件 
    


    

    $(document).ready(function(){
    

    $('body').bind('scrollstop', function(event) {
    // Add scroll stop code here
  });
    

    });</pre> 
    
綁定到這兩個事件都必須在文檔正式就緒時完成。這保證了 body 元素存在，并可以被成功地綁定到事件。作為一個示例，在運行 JavaScript 代碼時（頁面滾動時顯示在 Web 頁面下方的選項），這兩個事件很是有用的，被稱為延遲加載，其中當 Web 頁面初次加載時，不會加載圖片。這使得頁面加載時間較短，同時還提供了訪問內容時相同的視覺吸引力。</td>
</tr>
</tbody>
</table>
    

    使用曝光的方法
    

    通過使用 jQuery Mobile API 所提供的曝光方法，可以實現以下功能：
    

      

    • 以編程方式修改頁面
      • 

    • 靜默地加載頁面
      • 

    • 使用實用程序方法
      • 
</ul>
      

      以編程方式修改頁面
      

      jQuery Mobile 框架中有若干個曝光的方法，其中一個方法除了能夠默認使用超鏈接和表單提交之外，還使您能夠以編程方式修改頁面。當您以編程方式修改頁面時，會包括了從頁面加載到頁面轉換時所發生的所有視覺效果。清單 15 顯示了如何使用 $.mobile 對象的 changePage 方法修改頁面。
      
清單 15. 使用 changePage 方法修改頁面 
    • 


      

      <!DOCTYPE HTML>
<html>
<head>
  <link rel="stylesheet" href="jquery.mobile.css" />
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    $("#my-page").live('pagecreate', function(event) {
        $("#alt-link").bind("click", function(event) {
            $.mobile.changePage("page-2.html");
        });
    });
  </script>
  <script type="text/javascript" src="jquery.mobile.js"></script>
</head>
      

      <body>
      

      <div data-role="page" id="my-page">
    <div data-role="content">
      <ul data-role="listview" id="my-list"></ul>
    </div>
  </div>
      

      <script type="text/javascript">
    $('#my-list').append('<li><a href="page-2.html">Link to another page</a></li>');
    $('#my-list').append('<li><a href="#" id="alt-link">Link to another 
    page programmatically</a></li>');
  </script>
      

      </body>
</html></pre> 
      
有一個必需的參數，其名稱為 to。該參數可以是一個字符串或對象。to 參數可以是絕對的或相對的 URL。對象參數必須是一個 jQuery 集合對象，換句話說，是被用作一個額外頁面的內聯元素。還有一些可選參數，您可以將其傳遞為一個對象：</td>
</tr>
</tbody>
</table>
      

        

      • transition
        • 

      • reverse
        • 

      • changeHash
        • 

      • role
        • 

      • pageContainer
        • 

      • type
        • 

      • data
        • 

      • reloadPage
        • 
</ul>
        

        清單 15 沒有使用任何可選參數。它只是傳遞了另一個 HTML 文件的名稱。
        

        要使用 changePage 方法，您需要做幾件事。首先，您必須用 page 的一個 data-role 值創建一個 div 元素，并添加一個 ID 給它。有了這個 ID 后，您需要添加 pagecreate 事件，而不是 jQuery 的 document.ready。現在您可以添加您們的 click 事件。jQuery Mobile 建議您綁定一個鏈接，而不是直接調用 click 事件。最后，您可以使用 changePage 方法修改頁面。
        

        靜默地加載頁面
        

        另一個很棒的 $.mobile 對象方法是 loadPage。您可以使用 loadPage 方法加載外部頁面，而不需要顯示它們。這是一種很有用的頁面預加載方式，使頁面可以在用戶單擊鏈接時更快速地顯示出來。要使用這個方法，您需要編寫與使用 changePage 方法時類似的代碼。首先，您需要一個 page 元素，該元素有一個 ID，您可以訪問它，以綁定 pagecreate 事件。然后，當 pagecreate 事件觸發時，您可以調用 loadPage 事件（見清單 16）。
        

        
清單 16. 使用 loadPage 方法預加載頁面 
        


        

        <!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="jquery.mobile.css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $("#my-page").live('pagecreate', function(event) {
            $.mobile.loadPage("page-2.html");
        });
    </script>
   <script type="text/javascript" src="jquery.mobile.js"></script>
</head>
        

        <body>
        


        <div data-role="page" id="my-page">
    <div data-role="content">
        <ul data-role="listview" id="my-list">
    <li><a href="page-2.html">Link to another page</a></li>
</ul>
    </div>
</div>


        

        </body>
</html></pre> 
        
loadPage 方法包括一個必需的 URL 參數，該參數可以是一個代表一個相對或絕對 URL 的字符串，您也可以傳遞一個對象。還有一個可選參數，可以接受擁有一個或多個以下屬性的對象：</td>
</tr>
</tbody>
</table>
sesese色