當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery Mobile高手必备的十大技巧和代码片段

發布時間：2023/12/9 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery Mobile高手必备的十大技巧和代码片段小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本文轉自51ito布加迪編譯版本: http://mobile.51cto.com/hot-276160.htm 其中未發現英文原作鏈接，為尊重版權，google之后附上: http://www.webdesignerdepot.com/2011/05/10-handy-jquery-mobile-tips-and-snippets-to-get-you-started/

jQuery Mobile高手必備的十大技巧和代碼片段

與任何新技術一樣，常常難就難在如何開始入手。

有鑒于此，我們整理出了與jQuery Mobile庫有關的我認為最便利的一些技巧、方法和代碼片段。

由于本文不是旨在全面介紹使用jQuery Mobile庫的入門知識，會忽略掉一些相當淺顯的東西，而是直接探討一些相當棘手的東西。

另外歡迎留言，告訴我們你覺得哪些代碼片段很實用，以及你所知道的其他任何實用的代碼片段。

1、完整的基本頁面

我一再發現自己需要為基本頁面建立完整的標記。正因為如此，下面是創建一個基本頁面所需要的全部代碼。

<!DOCTYPE html> <html> <head><title>Page Title</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body><div data-role="page"><div data-role="header"><h1>Page Title</h1></div><div data-role="content"><p>Page content goes here.</p></div><div data-role="footer"><h4>Page Footer</h4></div> </div></body> </html>

2、何處添加額外的jQuery調用

當我開始使用jQuery的這個優秀擴展時，立即發現自己需要在觸發移動插件之前改動頁面上的內容。

結果發現，建議的解決辦法就是只要把傳統的jQuery調用放在裝入移動插件的引用之前。這樣，你的jQuery命令就有機會在庫裝入之前運行。下面是要遵照的模式：

3、同時禁用所有鏈接的AJAX導航

盡管AJAX導航技術很出色，但有時候你倒希望禁用它。使用這一段jQuery代碼，告訴jQuery Mobile庫不要使用AJAX導航。

把它放在頁面標題中jQuery Mobile庫引用的后面。換句話說，庫必須已經在該代碼被引用之前裝入完畢。

4、阻止一些關鍵項目被截斷

庫的一項特性(或者是缺點，就看你的需要了)在于，它能夠智能化地截斷很長的項目，以適應用戶界面元素。

我發現在兩種情況下這可能很煩人。首先在列表項目中，我更喜歡看到全部文本。其次是在腳注文本中。一旦你在這里有好多個字符，它似乎就會開始用“…”來截斷。使用這個簡單的CSS來覆蓋這兩種默認情況。

對于列表項目：

body .ui-li .ui-li-desc { white-space: normal;}

對于腳注內容：

body .ui-footer .ui-title { white-space: normal; }

?5、使用媒體查詢來鎖定設備

我在使用這個庫時最先遇到的問題之一是，如何使用CSS來鎖定設備(根據屏幕尺寸)。比如說，我想要為iPad設計兩列布局、為智能手機設計單列布局。要做到這一點，最佳辦法絕對是使用媒體查詢。

只要一些簡單的媒體查詢已到位，你就能迅速讓CSS鎖定屏幕尺寸。有了這種鎖定技術，我們就能依賴傳統的CSS方法，根據可用的屏幕空間來迅速創建不同的布局。

這方面的兩篇出色的文章是：

CSS-Tricks網站的《CSS媒體查詢和使用可用空間》

Stuff and Nonsense網站的《切合實際的CSS3媒體查詢》

6、用jQuery鎖定平臺

盡管我們很想為某些設備執行某些CSS，但我們也想只在特定的設備上運行jQuery。下面對來自Snipplr的一些代碼作了改動，那樣我很容易把jQuery的一部分隔離開來，以便根據用戶的設備來運行。

7、為表單動作屬性的目標使用完全路徑

jQuery Mobile庫的一個不便之處似乎在于，很難找到張貼表單的目標頁面;也就是說，除非你使用來自網站根目錄的完全路徑。

比如說，我發現這個表單標簽從來找不到其目標：

而像這樣的完全路徑可以起到應有的工作：

另外，還要確信來自表單處理程序的結果會生成一個完整、有效的jQuery Mobile頁面，如第一個技巧所示。

8、創建彈出式對話框

jQuery Mobile庫的一項便利特性就是內置的彈出內容或對話框特性。創建這項便利的特性簡單得很。基本上只要添加需要鏈接的屬性，如下所示：data-rel="dialog"。

注意兩點。首先，目標頁面必須是完整的jQuery Mobile頁面，如第一個技巧所概述。其次，這只適用于外部頁面;它必須是完整的單獨頁面才能正常工作。

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>

10、自行創建列結構

我在竭力為多個設備設計最佳的單個頁面結構時，發現自己經常結合運用上述的媒體查詢技巧和“隨意順序的列”(columns in any order)方法。

幸好，Web開發人員很早以前就弄清楚了如何移動列。結合運用這個方法和媒體查詢，我們就可以根據所處理的屏幕尺寸，很容易創建各種結構。

Position Is Everything網站展示了最容易使用的方法之一。

結論

jQuery Mobile庫處理起來很方便。只要稍微下一點工夫，它就能獲得出色的效果。考慮到它目前仍處于測試階段，所以它起步不錯。但愿你在不斷鉆研這個新的庫時，這些快速技巧能讓你不斷前進。

轉載于:https://www.cnblogs.com/mrdo/p/jQueryMobile_Snippets.html

總結

以上是生活随笔為你收集整理的jQuery Mobile高手必备的十大技巧和代码片段的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。