jQuery Mobile高手必備的十大技巧和代碼片段
原創與任何新技術一樣，常常難就難在如何開始入手。
有鑒于此，我們整理出了與jQuery Mobile庫有關的我認為最便利的一些技巧、方法和代碼片段。
由于本文不是旨在全面介紹使用jQuery Mobile庫的入門知識，會忽略掉一些相當淺顯的東西，而是直接探討一些相當棘手的東西。
另外歡迎留言，告訴我們你覺得哪些代碼片段很實用，以及你所知道的其他任何實用的代碼片段。
1、完整的基本頁面
我一再發現自己需要為基本頁面建立完整的標記。正因為如此，下面是創建一個基本頁面所需要的全部代碼。
- <!DOCTYPE html>
- <html>
- <head>
- <title>Page Title</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
- <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
- </head>
- <body>
- <div data-role="page" id="home">
- <div data-role="header">
- <h1>Header</h1>
- </div>
- <div data-role="content">
- <p>Content goes here</p>
- </div>
- <div data-role="footer">
- <h4>Footer</h4>
- </div>
- </div>
- </body>
- </html>
#p#
2、何處添加額外的jQuery調用
當我開始使用jQuery的這個優秀擴展時，立即發現自己需要在觸發移動插件之前改動頁面上的內容。
結果發現，建議的解決辦法就是只要把傳統的jQuery調用放在裝入移動插件的引用之前。這樣，你的jQuery命令就有機會在庫裝入之前運行。下面是要遵照的模式：
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
- <script>
- $(document).ready(function() {
- // Your jQuery commands go here before the mobile reference
- });
- </script>
- <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
#p#
3、同時禁用所有鏈接的AJAX導航
盡管AJAX導航技術很出色，但有時候你倒希望禁用它。使用這一段jQuery代碼，告訴jQuery Mobile庫不要使用AJAX導航。
把它放在頁面標題中jQuery Mobile庫引用的后面。換句話說，庫必須已經在該代碼被引用之前裝入完畢。
- <script>
- $(document).ready(function() {
- // disable ajax nav
- $.mobile.ajaxLinksEnabled = false;
- });
- </script>
#p#
4、阻止一些關鍵項目被截斷
庫的一項特性(或者是缺點，就看你的需要了)在于，它能夠智能化地截斷很長的項目，以適應用戶界面元素。
我發現在兩種情況下這可能很煩人。首先在列表項目中，我更喜歡看到全部文本。其次是在腳注文本中。一旦你在這里有好多個字符，它似乎就會開始用“…”來截斷。使用這個簡單的CSS來覆蓋這兩種默認情況。
對于列表項目：
- body .ui-li .ui-li-desc {
- white-space: normal;
- }
對于腳注內容：
- body .ui-footer .ui-title {
- white-space: normal;
- }
#p#
5、使用媒體查詢來鎖定設備
我在使用這個庫時***遇到的問題之一是，如何使用CSS來鎖定設備(根據屏幕尺寸)。比如說，我想要為iPad設計兩列布局、為智能手機設計單列布局。要做到這一點，***辦法絕對是使用媒體查詢。
只要一些簡單的媒體查詢已到位，你就能迅速讓CSS鎖定屏幕尺寸。有了這種鎖定技術，我們就能依賴傳統的CSS方法，根據可用的屏幕空間來迅速創建不同的布局。
這方面的兩篇出色的文章是：
CSS-Tricks網站的《CSS媒體查詢和使用可用空間》
Stuff and Nonsense網站的《切合實際的CSS3媒體查詢》#p#
6、用jQuery鎖定平臺
盡管我們很想為某些設備執行某些CSS，但我們也想只在特定的設備上運行jQuery。下面對來自Snipplr的一些代碼作了改動，那樣我很容易把jQuery的一部分隔離開來，以便根據用戶的設備來運行。
- var deviceAgent = navigator.userAgent.toLowerCase();
- var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);
- if(agentID.indexOf("iphone")>=0){
- alert("iphone");
- }
- if(agentID.indexOf("ipod")>=0){
- alert("ipod");
- }
- if(agentID.indexOf("ipad")>=0){
- alert("ipad");
- }
- if(agentID.indexOf("android")>=0){
- alert("android");
- }
#p#
7、為表單動作屬性的目標使用完全路徑
jQuery Mobile庫的一個不便之處似乎在于，很難找到張貼表單的目標頁面;也就是說，除非你使用來自網站根目錄的完全路徑。
比如說，我發現這個表單標簽從來找不到其目標：
- <form action=" form-handler.php " method="get" >
而像這樣的完全路徑可以起到應有的工作：
- <form action="/current-directory/form-handler.php" method="get" >
另外，還要確信來自表單處理程序的結果會生成一個完整、有效的jQuery Mobile頁面，如***個技巧所示。#p#
8、創建彈出式對話框
jQuery Mobile庫的一項便利特性就是內置的彈出內容或對話框特性。創建這項便利的特性簡單得很。基本上只要添加需要鏈接的屬性，如下所示：data-rel="dialog"。
注意兩點。首先，目標頁面必須是完整的jQuery Mobile頁面，如***個技巧所概述。其次，這只適用于外部頁面;它必須是完整的單獨頁面才能正常工作。
- <a href="#pop.html" data-rel="dialog">Pop up!</a>
#p#
9、“Cancel”和“Save”組合按鈕
這段代碼滿足了兩個基本要求。***個要求是，讓兩個按鈕彼此相鄰。幸好，jQuery Mobile庫有一種內置的列結構，只要使用標簽和合適的類，很容易利用這種結構，如下所示。第二個要求是，讓兩個按鈕有不同的主題。這段代碼直接來自說明文檔，我把它留在手邊，以便經常使用。
- <fieldset>
- <div><button type="submit" data-theme="c">Cancel</button></div>
- <div><button type="submit" data-theme="b">Submit</button></div>
- </fieldset>
#p#
10、自行創建列結構
我在竭力為多個設備設計***的單個頁面結構時，發現自己經常結合運用上述的媒體查詢技巧和“隨意順序的列”(columns in any order)方法。
幸好，Web開發人員很早以前就弄清楚了如何移動列。結合運用這個方法和媒體查詢，我們就可以根據所處理的屏幕尺寸，很容易創建各種結構。
Position Is Everything網站展示了最容易使用的方法之一。
結論
jQuery Mobile庫處理起來很方便。只要稍微下一點工夫，它就能獲得出色的效果。考慮到它目前仍處于測試階段，所以它起步不錯。但愿你在不斷鉆研這個新的庫時，這些快速技巧能讓你不斷前進。
