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