經典收藏 50個jQuery Mobile開發技巧集萃

一、Backbone移動實例

這是在Safari中運行的一款Backbone移動應用程序。想開始體驗移動開發，一個好的出發點就是關注這個應用程序的構建方式。先不妨在你的瀏覽器中查看該應用程序。

相關連接：http://bennolan.com/2010/11/24/backbone-jquery-demo.html

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

你可能會問如何使用CSS來鎖定設備(根據屏幕尺寸)。好比說，你想要爲iPad設計兩列布局、爲智能手機設計單列布局。要作到這一點，最佳辦法就是使用媒體查詢。只要一些簡單的媒體查詢已到位，你就能迅速讓CSS鎖定屏幕尺寸。

相關連接：http://css-tricks.com/6731-css-media-queries/

三、快速技巧：如何使用@Font-face

可幾個字體更換方法可使用，好比cufon、sIFR、FLIR、@font-face和Google Fonts API。使用jQuery Mobile構建web應用程序時，我發現@font-face方法是用起來最容易的方法，其性能讓人至關滿意。

相關連接：http://net.tutsplus.com/tutorials/design-tutorials/quick-tip-how-to-work-with-font-face/

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

若是你想在移動插件被觸發以前改動頁面上的內容，那麼建議的解決辦法就是隻要把傳統的jQuery調用放在裝入移動插件的引用以前。這樣，你的jQuery命令就有機會在庫裝入以前運行。

相關連接：http://www.webdesignerdepot.com/2011/05/10-handy-jquery-mobile-tips-and-snippets-to-get-you-started/

五、完整的基本頁面

你可能發現本身一再須要爲基本頁面創建完整的標記。正由於如此，這裏是建立一個基本頁面所須要的所有代碼。

相關連接：http://www.webdesignerdepot.com/2011/05/10-handy-jquery-mobile-tips-and-snippets-to-get-you-started/

六、自行建立列結構

若是你想爲多個設備設計最佳的單個頁面結構，會發現本身常常結合運用上述的媒體查詢技巧和「隨意順序的列」(columns in any order)方法。幸虧，web開發人員很早之前就弄清楚瞭如何移動列以及結合運用這個方法和媒體查詢。

相關連接：http://www.positioniseverything.net/articles/onetruelayout/anyorder

七、結合使用谷歌分析(Google Analytics)工具和jQuery Mobile

能夠學習如何結合使用谷歌分析(Google Analytics)工具和jQuery Mobile。

相關連接：http://www.jongales.com/blog/2011/01/10/google-analytics-and-jquery-mobile/

八、經過AJAX和PHP，提交jQuery Mobile表單

能夠學習如何經過AJAX和PHP，提交jQuery Mobile表單。

相關連接：http://www.giantflyingsaucer.com/blog/?p=2574

九、如何使用jQuery Mobile來建立移動WordPress主題

這個工具讓你很容易建立移動網站和web應用程序。在這個教程中，我會介紹如何建立針對移動設備優化的WordPress主題。

相關連接：http://www.catswhocode.com/blog/how-to-create-a-mobile-wordpress-theme-with-jquery-mobile

十、使用jQuery Mobile來建立網站，第一個部分

在這個教程中，我會介紹如何使用jQuery Mobile來建立網站。在該教程的這第一個部分中，我會解釋網站的特色，還會實施網站的主頁。

相關連接：http://miamicoder.com/2011/creating-a-website-using-jquery-mobile-part1/

十一、使用jQuery Mobile來建立網站，第二個部分

做爲如何使用jQuery Mobile來建立網站這個系列的下一個部分，如今介紹構建揚聲器(Speakers)頁面。

相關連接：http://miamicoder.com/2011/creating-a-website-using-jquery-mobile-part-2/

十二、禁用按鈕動做

下面介紹如何禁用按鈕動做(好比說禁止打開頁面)，添加下列JavaScript。

相關連接：http://eisabainyo.net/weblog/2011/01/31/top-10-jquery-mobile-code-snippets-that-you-need-to-know/

1三、建立彈出式對話框

jQuery Mobile庫的一項便利特性就是內置的彈出內容或對話框特性。建立這項便利的特性簡單得很。注意：首先，目標頁面必須是完整的jQuery Mobile頁面，如第一個技巧所概述。其次，這隻適用於外部頁面;它必須是完整的單獨頁面才能正常工做。

相關連接：http://www.webdesignerdepot.com/2011/05/10-handy-jquery-mobile-tips-and-snippets-to-get-you-started/

1四、jQuery Mobile簡介

能夠學習如何使用jQuery Mobile框架。這個基本簡介主要介紹瞭如何創建頁面、連接、導航和按鈕。

相關連接：http://www.youtube.com/watch?v=VY20Q6ON4QA

1五、設定頁面的背景顏色

這聽起來可能很簡單，但我花了好幾分鐘才弄清楚如何給頁面添加背景顏色，又不會被jQuery Mobile CSS所覆蓋。一般你會給主體元素設定背景顏色，但若是你在使用jQuery Mobile框架，就須要把它設成ui-page類。

相關連接：http://eisabainyo.net/weblog/2011/01/31/top-10-jquery-mobile-code-snippets-that-you-need-to-know/

1六、jQuery Mobile：我能爲你作些什麼?

能夠弄清楚新的jQuery Mobile框架如何幫你輕鬆構建外觀出色、跨設備運行的web應用程序。包括許多代碼示例和演示。能夠學習建立一個簡單的jQuery Mobile應用程序。

相關連接：http://www.elated.com/articles/jquery-mobile-what-can-it-do-for-you/

1七、禁止裝入彈出式消息

我以爲裝入彈出式消息有點煩人，由於每當你裝入不一樣的頁面，該操做就會被觸發。想禁止這個操做，只要往你的JS文件中添加下面這行代碼。

相關連接：http://eisabainyo.net/weblog/2011/01/31/top-10-jquery-mobile-code-snippets-that-you-need-to-know/

1八、如何使用jQuery Mobile來建立RSS閱讀程序

現在，咱們會深刻介紹使用PHP 和jQuery Mobile，建立一個簡單的Tuts+ RSS閱讀程序。建立完畢後，你只要點擊一下按鈕，而且運用構建web應用程序的技能，就能夠把這個簡單項目添加到你的iPhone或Android手機上。

相關連接：http://net.tutsplus.com/tutorials/javascript-ajax/how-to-build-an-rss-reader-with-jquery-mobile-2/

1九、「Cancel」和「Save」按鈕組合

這段代碼知足了兩個基本要求。第一個要求是，讓兩個按鈕彼此相鄰。幸虧，jQuery Mobile庫有一種內置的列結構，只要使用fieldset標籤和合適的類，很容易利用這種結構，以下所示。第二個要求是，讓兩個按鈕有不一樣的主題。這段代碼直接來自說明文檔，我把它留在手邊，以便常用。

相關連接：http://www.webdesignerdepot.com/2011/05/10-handy-jquery-mobile-tips-and-snippets-to-get-you-started/

20、使用jQuery鎖定平臺

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

相關連接：http://snipplr.com/view/31607/iphone-ipad-ipod-detect/

 

 

2一、建立自定義主題

jQuery Mobile框架隨帶五個主題：主題A、主題B、主題C、主題D和主題E。可是你很容易爲本身的web應用程序建立一個新主題。

相關連接：http://eisabainyo.net/weblog/2011/01/31/top-10-jquery-mobile-code-snippets-that-you-need-to-know/

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

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

在兩種狀況下這可能很煩人。首先在列表項目中，我更喜歡看到所有文本。其次是在腳註文本中。

相關連接：http://www.webdesignerdepot.com/2011/05/10-handy-jquery-mobile-tips-and-snippets-to-get-you-started/

2三、兩個iPhone開發技巧，jQuery出手相助

第一個也是最簡單的技巧是，使用視口。(你可能須要向蘋果公司註冊，才能查看該連接。須要登陸才能訪問簡單的文檔，對蘋果扣兩分!)視口是一個簡單的元標籤。這是個例子：

相關連接：http://www.coldfusionjedi.com/index.cfm/2008/10/9/Two-iPhone-development-tips-and-jQuery-to-the-rescue

2四、從列表項移除箭頭

默認狀況下，jQuery Mobile框架在每一個列表項旁邊添加一個箭頭。想禁用這項功能，只要針對你想移除箭頭的那個列表項，將data-icon屬性設成「false」。

相關連接：http://eisabainyo.net/weblog/2011/01/31/top-10-jquery-mobile-code-snippets-that-you-need-to-know/

2五、jQuery Mobile表單驗證

能夠經過這個教程學習jQuery Mobile表單驗證。

相關連接：http://www.elijahmanor.com/2011/02/jquery-mobile-form-validation.html

2六、使用JQuery Mobile的HTML5畫布元素，偵聽iPad和Android瀏覽器上的觸摸事件

JQuery Mobile支持衆多的觸摸事件，大大簡化了開發人員的工做。實際上，JQuery Mobile確保你的web應用程序在移動瀏覽器和臺式機/筆記本電腦瀏覽器上均可以運行。 遺憾的是，你根本沒法預料JavaScript點擊事件在移動設備上會如同在臺式機/筆記本電腦瀏覽器上那樣運行。

相關連接：http://www.giantflyingsaucer.com/blog/?p=2658

2七、jQuery Mobile觸摸事件：快速按下

能夠學習如何檢測智能手機設備上的「快速按下」觸摸事件。

相關連接：http://www.youtube.com/watch?v=-ywcCfbnQhM&feature=related

2八、使用帶appMobi的JQuery Mobile

這個教學視頻向你代表瞭如何使用帶appMobi的流行JQuery JavaScript庫的新移動版本。JQuery Mobile讓你能夠很容易建立具備原生應用程序全部外觀感受的應用程序，擁有內置的按鈕、轉換效果和表單等。

相關連接：http://www.youtube.com/watch?v=otBNufYLXNc&feature=related

2九、同時禁用全部連接的AJAX導航功能

儘管AJAX導航功能很出色，但有時候你徹底想要禁用這項功能。使用這段jQuery代碼，告訴移動庫不要使用AJAX導航功能。

相關連接：http://www.webdesignerdepot.com/2011/05/10-handy-jquery-mobile-tips-and-snippets-to-get-you-started/

30、頁面裝入時，顯示隨機性的背景圖像

jQuery Mobile有許多頁面初始化事件，你能夠用來在頁面裝入時觸發某些方法。下列CSS + JavaScript能夠用來每當頁面裝入時，就顯示隨機性的背景圖像。

相關連接：http://eisabainyo.net/weblog/2011/01/31/top-10-jquery-mobile-code-snippets-that-you-need-to-know/

 

3一、建立只有圖像、沒有文本的按鈕

有時候，你可能不但願按鈕有任何文本，但仍使用按鈕元素隨帶的其他特性。主頁按鈕或信息按鈕一般就是這種狀況。想隱藏與按鈕有關的任何文本，把data-iconpos屬性設成「notext」。好比：

相關連接：http://eisabainyo.net/weblog/2011/01/31/top-10-jquery-mobile-code-snippets-that-you-need-to-know/

3二、jQuery Mobile工具欄導航菜單

能夠學習如何使用jQuery Mobile的工具欄和導航欄，建立固定位置菜單及更多內容!

相關連接：http://www.youtube.com/watch?v=JTNp0CkIZio&feature=related

3三、jQuery Mobile中的搜索列表

咱們很容易建立一個列表，該列表包括了搜索元素，用戶經過該搜索元素，就能夠開始輸入文本，並得到適合該文本的從列表過濾出來的全部元素。

相關連接：http://www.youtube.com/watch?v=09sGNvHgIzE&feature=related

3四、jQuery Mobile：官方的jQuery Mobile開發框架

這個移動開發框架擁有衆多優秀的功能特性，容許移動開發人員把一些專業級的jQuery效果添加到iOS、Android、BlackBerry、bada、Windows Mobile、Palm OS、Symbian和MeeGo應用程序和web應用程序中。你應該會在移動版Safari中看到這個壞小子。

相關連接：http://iphonemonsta.com/jquery-iphone-mobile-development-framework-mobile-touch-optimized

3五、不使用AJAX的頁面轉換效果就打開連接

想不使用AJAX的頁面轉換效果就打開連接(即以傳統方式從新裝入整個頁面)，把rel屬性設成「external」便可。

相關連接：http://eisabainyo.net/weblog/2011/01/31/top-10-jquery-mobile-code-snippets-that-you-need-to-know/

3六、jQuery Mobile多頁內部連接

這個簡短的視頻片斷解釋了內部連接在jQuery Mobile中是如何工做的。

相關連接：http://www.youtube.com/watch?v=OqLPP70XnVY&feature=related

3七、jQuery Mobile中的對話轉換

能夠學習在jQuery Mobile中顯示對話時，如何設定轉換。

相關連接：http://www.youtube.com/watch?v=Zh0yxy8YWYs&feature=related

3八、爲jQuery Mobile網站添加駕駛方向

能夠學習如何爲jQuery Mobile網站添加駕駛方向。

相關連接：http://www.coldfusionjedi.com/index.cfm/2011/3/9/Adding-driving-directions-to-a-jQuery-Mobile-web-site

3九、jQuery Mobile框架——表單教程

在這個教程中，咱們將着重介紹jQuery Mobile的一些基本元素：頁面結構、表單和Ajax表單提交。該教程基於jQuery Mobile框架的版本1.0測試版2。

相關連接：http://mobile.tutsplus.com/tutorials/mobile-web-apps/jquery-mobile-forms/

40、jQuery Mobile中的簡單列表視圖

這個視頻片斷顯示瞭如何建立jQuery Mobile中的簡單列表視圖。

相關連接：http://www.youtube.com/watch?v=Jmg8GdEKDjA&feature=related

 

4一、jQuery Mobile中的分割列表

咱們能夠爲每個列表項添加輔助連接。它會連同項目右邊部分的圖標一塊兒顯示。

相關連接：http://www.youtube.com/watch?v=YaZhS_8vaYo&feature=related

4二、jQuery Mobile中的表單控件

這個簡短的視頻片斷代表了使用jQuery Mobile庫時可用的控件。

相關連接：http://www.youtube.com/watch?v=O2fvX4gtR4A&feature=related

4三、jQuery Mobile中的標題和腳註固定位置

這個簡短的視頻片斷顯示了爲jQuery Mobile中的標題和腳註設定固定位置具備的意義。

相關連接：http://www.youtube.com/watch?v=eDwwesKzzkU&feature=related

4四、jQuery Mobile內聯按鈕

咱們能夠爲按鈕添加data-inline=」true」屬性，就能夠得到寬度不是屏幕整個寬度的按鈕。這個視頻片斷顯示瞭如何作到這一點。

相關連接：http://www.youtube.com/watch?v=Bp0i4NqVE_4&feature=related

4五、jQuery Mobile中的Hello World

這個簡短的視頻片斷解釋瞭如何開發一個使用jQuery Mobile庫的簡單網頁。

相關連接：http://www.youtube.com/watch?v=8YR4XuxwtKc&feature=related

4六、使用jQuery Mobile構建具備離線功能的移動網站

能夠學習如何使用jQuery Mobile構建具備離線功能的移動網站。

相關連接：http://www.coldfusionjedi.com/index.cfm/2011/3/12/Building-an-offline-capable-mobile-web-site-with-jQuery-Mobile

4七、jQuery Mobile和JSON

這個教程介紹了可用於編寫移動web應用程序的jQuery Mobile(JQM)框架，面向移動行業幾款領先的瀏覽器。JQM可用於爲在衆多移動設備上運行的基於web的應用程序提供直觀而一致的用戶體驗，好比iPhone、iPad、Android、WebOS、BlackBerry版本6(Torch和Playbook)及其餘移動設備。該教程先綜述了JQM項目以及JQM與HTML5之間的關係。該教程介要介紹了構建JQM應用程序所用的多種方法中的一種，以及JQM改進基本web用戶界面元素的一些方式，最後介紹了基本的銷售隊伍自動化要求。

相關連接：http://www.ibm.com/developerworks/xml/tutorials/x-jquerymobilejsontut/index.html

4八、建立和使用jQuery Mobile中的自定義圖標

本文將介紹如何建立和實施自定義圖標。此外，我會介紹如何爲iPhone 4的視網膜屏幕及更新的高分辨率設備添加高分辨率圖標支持。

相關連接：http://www.andymatthews.net/read/2011/02/13/Creating-and-using-custom-icons-in-jQuery-Mobile

4九、jQuery Mobile & Rails 3入門

這個應用程序讓你能夠經過移動設備來建立、讀取、更新和刪除博文帖子。

相關連接：http://fuelyourcoding.com/getting-started-with-jquery-mobile-rails-3/

50、使用jQuery Mobile構建一個原生的Android新聞閱讀應用程序

能夠學習如何使用jQuery Mobile構建一個原生的Android新聞閱讀應用程序。

相關連接：http://mobile.tutsplus.com/tutorials/mobile-web-apps/jquery_android/