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