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

時間 2020-09-26

標籤使用 jquery mobile api 實現細粒自定義控制欄目 JQuery 简体版

原文原文鏈接

jQuery Mobile API 針對移動網站定製提供了另外一個級別的控制。從全局選項的自定義設置，到鉤住交互事件和曝光的方法，一切均可以使用該 API 實現，而且在本文中進行介紹。在本文結束時，您就會知道如何精細地定義您想在移動網站中使用的自定義選項，以及如何編寫與 jQuery Mobile 框架進行交互的自定義代碼。
本文介紹了一系列來自 jQuery Mobile 框架的有用的屬性、事件和曝光的方法。在每一節中，將介紹各個選項，並提供代碼樣例，以說明它是如何完成的。要運行任何代碼樣例，您必須先下載 jQuery 和 jQuery Mobile 框架的最新版本，或在您的 HTML 文件中直接引用來自 jQuery 內容交付網絡 (CDN) 的文件。
全局選項
如下全局選項均可以經過 jQuery Mobile API 提供，它們使您可以改變 jQuery Mobile 的默認行爲：
擴展 jQuery Mobile 的初始化事件
建立自定義名稱空間
頁面初始化
自定義子頁面的 URL 鍵
設置活動頁面和按鈕類
設置默認的頁面和對話轉換
自定義加載和錯誤消息
擴展 jQuery Mobile 的初始化事件
jQuery Mobile 包括一個初始化事件，該事件甚至會先於 jQuery 的 document.ready 事件進行加載。jQuery Mobile 實際上在文檔對象自己上觸發其初始化事件，該事件名稱爲 mobileinit。這使您能夠覆蓋和擴展 jQuery Mobile 的默認全局選項，這是整篇文章的出發點。要擴展 mobileinit 事件，您須要在 jQuery Mobile 被加載以前，以及 jQuery 框架加載以後，添加自定義的 JavaScript 事件處理程序（參見清單 1）。

清單 1. 擴展 jQuery Mobile mobileinit 事件
查看源碼

打印?
1 <script type="text/javascript" src="jquery.js"></script>
2 <script type="text/javascript" src="custom-jqm-mobileinit.js"></script>
3 <script type="text/javascript" src="jquery.mobile.js"></script>
要擴展 mobileinit 事件，您首先須要將它與一個自定義函數進行綁定。清單 2 顯示了一個示例，使用 bind 方法擴展 mobileinit 事件。

清單 2. 綁定到 mobileinit 事件
查看源碼

打印?
1 $(document).bind("mobileinit", function() {
2 // Override global options here
3 });
當您成功綁定到 mobileinit 事件後，您就能夠覆蓋全局選項。要覆蓋全局選項，您可使用 jQuery 的 extend 方法來擴展 $.mobile 對象（見清單 3），也能夠簡單地經過直接設置每一個屬性來覆蓋它們。

清單 3. 擴展 $.mobile 對象
查看源碼

打印?
1 $(document).bind("mobileinit", function() {
2 $.extend( $.mobile , {
3 property = value
4 });
5 });
若是有多個您想更新的屬性，extend 方法是一個更清晰的選項，由於您不須要屢次寫入 $.mobile 對象。然而，若是您只想更新一個屬性，只需不多的代碼行就能夠設置每一個屬性（見清單 4）。

清單 4. 覆蓋每一個屬性值
查看源碼

打印?
1 $(document).bind("mobileinit", function() {
2 $.mobile.property = value;
3 });
$.mobile 對象是設置全部屬性的起始點。
建立自定義名稱空間
您能夠經過名稱空間自定義 HTML5 data- 屬性，如 data-role。名稱空間容許您添加一個自定義名稱，例如，它將出如今 data-role 屬性的 data- 和 -role 部分之間。容許您自定義的名稱空間的 $.mobile 屬性是 ns。清單 5 顯示了一個使用 ns 屬性設置自定義名稱空間的示例。

清單 5. 建立自定義名稱空間
查看源碼

打印?
1 $(document).bind("mobileinit", function() {
2 $.mobile.ns = "my-custom-ns";
3 });
在清單 5 中使用的自定義名稱空間生成 data-my-custom-ns-role 而不是 data-role，這使您能夠經過 CSS 選擇器定位這些名稱空間。經過 CSS 選擇器定位自定義名稱空間提供了另外一種方式來爲使用那些名稱空間的移動小部件設計自定義主題。
頁面初始化
jQuery Mobile 包括一個名稱爲 autoInitializePage 的屬性，它肯定 Web 頁面是否應該被初始化。默認狀況下，該屬性值被設置爲 true，所以當文檔就緒時，頁面老是被初始化。然而，經過擴展 $.mobile 對象，您能夠將該屬性設置爲 false，並在稍後再處理頁面初始化。清單 6 顯示了一個如何可以在其餘腳本運行時暫時延遲頁面初始化的示例。若是在 Web 頁面上有大量客戶端 JavaScript 在運行，將初始化延遲至 DOM 完成加載多是一個好主意，這樣客戶端 JavaScript 就會有機會運行。

清單 6. 爲移動 Web 頁面設置自動初始化
查看源碼

打印?
01 <!DOCTYPE HTML>
02 <html>
03 <head>
04 <title>Understanding the jQuery Mobile API</title>
05 <script type="text/javascript" src="jquery.js"></script>
06 <script type="text/javascript">
07 $(document).bind("mobileinit", function() {
08 $.mobile.autoInitializePage = false;
09 });
10 </script>
11 <script type="text/javascript" src="jquery.mobile.js"></script>
12 </head>
13
14 <body>
15
16 <div data-role="page">
17 <div data-role="content">
18 <ul data-role="listview" id="my-list"></ul>
19 </div>
20 </div>
21
22 <script type="text/javascript">
23 $('#my-list').html('<li><a href="page-2.html">Link to another page</a></li>');
24 $.mobile.autoInitializePage = true;
25 </script>
26
27 </body>
28 </html>
自定義子頁面的 URL 鍵
當引用子頁面時，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. 設置默認頁面和對話轉換
查看源碼

打印?
1 $(document).bind("mobileinit", function() {
2 $.mobile.defaultPageTransition = "fade";
3 $.mobile.defaultDialogTransition = "fade";
4 });
在該示例中，頁面和對話的轉換都是淡化效果。該框架包括六種基於 CSS 的轉換效果： slide、slideup、slidedown、pop、fade 和 flip。您也能夠經過包括 data-transition 屬性，將這些效果直接應用到超連接上。
自定義加載和錯誤消息
該框架控制的其餘兩種選項，分別是加載和錯誤消息。加載消息默認顯示 loading 字符串值。要更新該屬性，您只需定位 loadingMessage 屬性。在清單 8 中，我將默認加載信息從 loading 修改成 Please wait。結果，當使用 Ajax 加載頁面時，一個小對話框出現，其中顯示了個人自定義加載消息。
清單 8. 設置默認加載消息
查看源碼

打印?
1 $(document).bind("mobileinit", function() {
2 $.mobile.loadingMessage = "Please wait";
3 });
pageLoadErrorMessage 的默認值是 Error Loading Page。我將更新該消息，將它修改成清單 9 中更加用戶友好的消息。

清單 9. 設置默認錯誤消息
查看源碼

打印?
1 $(document).bind("mobileinit", function() {
2 $.mobile.pageLoadErrorMessage = 'Sorry, something went wrong. Please try again.';
3 });
鉤住 jQuery Mobile 事件
您可使用 jQuery Mobile API 擴展如下事件類型：
觸摸事件
方向事件
滾動事件
觸摸事件
在 jQuery Mobile 中有一些觸摸事件是可定製的。然而，這些事件僅當與支持觸摸功能的設備進行交互的用戶訪問您的 jQuery Mobile 網站時纔可用。當這些事件可用時，您能夠觸發任何自定義 JavaScript 做爲對五種不一樣的事件的響應 tap、taphold、swipe、swipeleft 和 swiperight。這些事件全都是不言而喻的，如表 1 所示。

表 1. jQuery Mobile 的可定製觸摸事件
事件描述
tap 當快速點擊屏幕時觸發。
taphold 當點擊屏幕並繼續接觸屏幕大約一秒時觸發。
swipe 當 Web 頁面被水平或垂直拖動時觸發。該事件其實是唯一與屬性關聯的事件。這些屬性是 scrollSupressionThreshold、 durationThreshold、 horizontalDistanceThreshold 和 verticalDistanceThreshold。
swipeleft 當 Web 頁面被向左拖動時觸發。
swiperight 當 Web 頁面被向右拖動時觸發。

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

清單 10. 綁定到觸摸事件
查看源碼

打印?
01 <!DOCTYPE HTML>
02 <html>
03 <head>
04 <title>Understanding the jQuery Mobile API</title>
05 <link rel="stylesheet" href="jquery.mobile.css" />
06 <script src="jquery.js"></script>
07 <script type="text/javascript">
08 $(document).ready(function(){
09 $(".tap-hold-test").bind("taphold", function(event) {
10 $(this).html("Tapped and held");
11 });
12 });
13 </script>
14 <script src="jquery.mobile.js"></script>
15 </head>
16
17 <body>
18 <div data-role="page" id="my-page">
19 <div data-role="header">
20 <h1>Header</h1>
21 </div>
22 <div data-role="content">
23 <ul data-role="listview" id="my-list">
24 <li class="tap-hold-test">Tap and hold test</li>
25 </ul>
26 </div>
27 </div>
28 </body>
29 </html>
如您所見，代碼將 taphold 觸摸事件綁定到一個列表項。當文檔就緒時，可經過 jQuery 定位該示例中的這個列表項。那麼，它被定位並綁定到 taphold 事件，該事件修改列表項內的 HTML。
方向事件
在智能手機和平板設備上，只有一個名稱爲 orientationchange 的方向事件。該事件在設備被垂直或水平旋轉時觸發。要肯定設備按哪一個方向旋轉，您能夠訪問方向屬性，它提供一個只讀值 portrait 或 landscape。綁定到 orientationchange 事件要求您定位 body 元素，而後使用 bind 方法來綁定事件（見清單 11）。

清單 11. 將 orientationchange 事件綁定到 body 元素
查看源碼

打印?
1 $(document).ready(function(){
2 $('body').bind('orientationchange', function(event) {
3 alert('orientationchange: '+ event.orientation);
4 });
5 });
在文檔就緒後綁定事件，這也很重要。不然，您會得到不一致的結果，由於 body 元素可能在綁定時不可用。您也能夠進一步加強該代碼，當文檔就緒時觸發 orientationchange 事件（見清單 12）。

清單 12. 當文檔就緒時觸發 orientationchange 事件
查看源碼

打印?
1 $(document).ready(function(){
2 $('body').bind('orientationchange', function(event) {
3 alert('orientationchange: '+ event.orientation);
4 });
5
6 $('body').trigger('orientationchange');
7 });
當文檔就緒時觸發事件，這使您能夠肯定 Web 頁面初始加載時的方向。當您須要根據在用設備的當前方向顯示內容時，這特別有用。您也能夠經過 CSS 訪問方向值，由於它們被添加到 Web 頁面中的 HTML 元素。這些強大的特性使您能夠根據設備的方向修改內容佈局。
滾動事件
jQuery Mobile 包括滾動事件，當用戶滾動 Web 頁面時觸發。第一個事件是 scrollstart 事件，它在頁面滾動開始時觸發。清單 13 顯示瞭如何可以綁定到該事件，並添加在頁面滾動開始時運行的自定義 JavaScript 代碼。

清單 13. 綁定到 scrollstart 事件
查看源碼

打印?
1 $(document).ready(function(){
2
3 $('body').bind('scrollstart', function(event) {
4 // Add scroll start code here
5 });
6
7 });
名稱爲 scrollstop 的另外一個事件，在頁面滾動中止時應用。如清單 14 所示，綁定到 scrollstop 事件的方法就和 scrollstart 綁定同樣。

清單 14. 綁定到 scrollstop 事件
查看源碼

打印?
1 $(document).ready(function(){
2
3 $('body').bind('scrollstop', function(event) {
4 // Add scroll stop code here
5 });
6
7 });
綁定到這兩個事件都必須在文檔正式就緒時完成。這保證了 body 元素存在，並能夠被成功地綁定到事件。做爲一個示例，在運行 JavaScript 代碼時（頁面滾動時顯示在 Web 頁面下方的選項），這兩個事件非常有用的，被稱爲延遲加載，其中當 Web 頁面初次加載時，不會加載圖片。這使得頁面加載時間較短，同時還提供了訪問內容時相同的視覺吸引力。
使用曝光的方法
經過使用 jQuery Mobile API 所提供的曝光方法，能夠實現如下功能：
以編程方式修改頁面
靜默地加載頁面
使用實用程序方法
以編程方式修改頁面
jQuery Mobile 框架中有若干個曝光的方法，其中一個方法除了可以默認使用超連接和表單提交以外，還使您可以以編程方式修改頁面。當您以編程方式修改頁面時，會包括了從頁面加載到頁面轉換時所發生的全部視覺效果。清單 15 顯示瞭如何使用 $.mobile 對象的 changePage 方法修改頁面。
清單 15. 使用 changePage 方法修改頁面
查看源碼

打印?
01 <!DOCTYPE HTML>
02 <html>
03 <head>
04 <link rel="stylesheet" href="jquery.mobile.css" />
05 <script type="text/javascript" src="jquery.js"></script>
06 <script type="text/javascript">
07 $("#my-page").live('pagecreate', function(event) {
08 $("#alt-link").bind("click", function(event) {
09 $.mobile.changePage("page-2.html");
10 });
11 });
12 </script>
13 <script type="text/javascript" src="jquery.mobile.js"></script>
14 </head>
15
16 <body>
17
18 <div data-role="page" id="my-page">
19 <div data-role="content">
20 <ul data-role="listview" id="my-list"></ul>
21 </div>
22 </div>
23
24 <script type="text/javascript">
25 $('#my-list').append('<li><a href="page-2.html">Link to another page</a></li>');
26 $('#my-list').append('<li><a href="#" id="alt-link">Link to another
27 page programmatically</a></li>');
28 </script>
29
30 </body>
31 </html>
有一個必需的參數，其名稱爲 to。該參數能夠是一個字符串或對象。to 參數能夠是絕對的或相對的 URL。對象參數必須是一個 jQuery 集合對象，換句話說，是被用做一個額外頁面的內聯元素。還有一些可選參數，您能夠將其傳遞爲一個對象：
transition
reverse
changeHash
role
pageContainer
type
data
reloadPage
清單 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 方法預加載頁面
查看源碼

表 2. jQuery Mobile 的當前內置實用程序方法方法描述 $.mobile.path.parseUrl 將一個 URL 解析成具備 16 個屬性的對象 $.mobile.path.makePathAbsolute 將相對文件或目錄轉換成絕對路徑 $.mobile.path.makeUrlAbsolute 將相對 URL 轉換成絕對 URL $.mobile.path.isSameDomain 比較兩個 URL $.mobile.path.isRelativeUrl 肯定 URL 是否相對 URL $.mobile.path.isAbsoluteUrl 肯定 URL 是否絕對 URL $.mobile.path.base 使用生成的基礎元素結束語 jQuery Mobile 框架的使用很簡單，但別讓它的簡單性愚弄您。幕後還發生了不少事情，而且有許多方法能夠添加自定義功能，以提供強大的移動網站和應用程序。經過點擊該 API，您能夠告訴框架在默認狀況下如何操做，經過使用曝光的方法加快頁面加載，甚至綁定到客戶端上發生的每一次交互。