由入門到經典收藏開發技巧集
第一篇：jQuery Mobile入門
URL：http://www.guan8.net/Java/1080013.html
內容摘要：
簡介：jQuery Mobile框架可以輕鬆的幫助我們實現非常好看的、可跨設備的Web應用程序。我們將後續的介紹中向大家介紹大量的代碼及實例。
jQuery Msobile 都能做什麼?

1、jQuery Mobile為開發移動應用程序提供了非常簡單的用戶接口

2、這種接口的配置是標籤驅動的，這意味着我們可以在HTML中建立大量的程序接口而不不需要寫一行js代碼

3、提供了一些自定義的事件用來探測移動和觸摸動作。例如tap(敲擊)、tap-and-hold（點擊並按住）、swipe、orientation change

4、使用一些加強的功能時需要參照一下設備瀏覽器支持列表

5、使用預設主題可以輕鬆定製應用程序外觀
jQuery Mobile 基本頁面結構

大部分jQuery Mobile Web應用程序都要遵循下面的基本模板

<title>jQuery Mobile基本頁面結構</title>
<linkrel="stylesheet"href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css"/>
<scripttype="text/javascript"src="http://code.jquery.com/jquery-1.5.min.js"></script>
<scripttype="text/javascript"src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

<divdata-role="page"id="home">
<divdata-role="header">
<h1>Header</h1>
</div>
<divdata-role="content">
<p>Content goes here</p>
</div>
<divdata-role="footer">
<h4>Footer</h4>
</div>
</div>

在android模擬器中顯示效果如下：

第二篇：使用jQuery Mobile快速開發一個手機閱讀網站
URL：http://www.cnblogs.com/gbin1/archive/2011/10/25/2223965.html
內容摘要：
jQuery mobile已经慢慢进入了web开发人员的视野，随着jQuery mobile框架的发展，使用jQuery mobile开发手机端应用将会成为一个趋势，今天GBin1带给大家一个入门级的jQuery mobile开发，将讲解如何使用jQuery快速生成一个手机端的网站，你不需要写任何一行JS代码。

手机版页面效果如下：

第三篇：經典收藏 50個jQuery Mobile開發技巧集萃
URL：http://smartphone.emm3.net/forum.php?mod=viewthread&tid=31074&extra=
內容摘要：
1、Backbone挪動實例
這是在Safari中運轉的一款Backbone挪動使用次第。想開端體驗挪動開拓，一個好的動身點就是關心這個使用次第的樹立方式。先無妨在你的閱讀器中檢查該使用次第。

相關鏈接：http://bennolan.com/2010/11/24/backbone-jquery-dem o.html

2、使用媒體查詢來鎖定裝備
你可以會問如何使用CSS來鎖定裝備(依據屏幕尺寸)。比方說，你想要為iPad設想兩列布局、為智能手機設想單列布局。要做到這一點，最佳方法就是使用媒體查詢。只需一些復雜的媒體查詢已到位，你就能疾速讓CSS鎖定屏幕尺寸。

相關鏈接：http://css-tricks.com/6731-css-media-queries/
3、疾速技巧：如何使用@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/

4、何處增加額定的jQuery調用

假如你想在挪動插件被觸發之前改動頁面上的形式，那么倡議的處理方法就是只需把保守的jQuery調用放在裝入挪動插件的援用之前。這樣，你的jQuery命令就無時機在庫裝入之前運轉。

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

5、完好的基本頁面

你可以發覺本人一再需求為基本頁面樹立完好的標志。正由于如此，這里是創立一個基本頁面所需求的局部代碼。

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

6、自行創立列構造

假如你想為多個裝備設想最佳的單個頁面構造，會發覺本人常常分離使用上述的媒體查詢技巧和"隨便次第的列"(columns in any order)方法。幸虧，web開拓職員很早以前就弄分明了如何挪動列以及分離使用這個方法和媒體查詢。

相關鏈接：http://www.positioniseverything.net/articles/onetr uelayout/anyorder

7、分離使用谷歌剖析(Google Analytics)工具和jQuery Mobile

可以進修如何分離使用谷歌剖析(Google Analytics)工具和jQuery Mobile。

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

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

可以進修如何經過AJAX和PHP，提交jQuery Mobile表單。

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

9、如何使用jQuery Mobile來創立挪動WordPress主題

這個工具讓你很輕易創立挪動網站和web使用次第。在這個教程中，我會先容如何創立針對挪動裝備優化的WordPress主題。

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

10、使用jQuery Mobile來創立網站，第一個局部

在這個教程中，我會先容如何使用jQuery Mobile來創立網站。在該教程的這第一個局部中，我會注釋網站的特性，還會施行網站的主頁。

相關鏈接：http://miamicoder.com/2011/creating-a-website-usin g-jquery-mobile-part1/

11、使用jQuery Mobile來創立網站，第二個局部

作為如何使用jQuery Mobile來創立網站這個系列的下一個局部，往常先容樹立揚聲器(Speakers)頁面。

相關鏈接：http://miamicoder.com/2011/creating-a-website-usin g-jquery-mobile-part-2/

12、禁用按鈕舉措

上面先容如何禁用按鈕舉措(比方說制止翻開頁面)，增加下列JavaScript。

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

13、創立彈出式對話框

jQuery Mobile庫的一項便當特性就是內置的彈出形式或對話框特性。創立這項便當的特性復雜得很。留意：首先，目的頁面必需是完好的jQuery Mobile頁面，如第一個技巧所概述。其次，這只適用于內部頁面;它必需是完好的獨自頁面才干一般任務。

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

14、jQuery Mobile簡介

可以進修如何使用jQuery Mobile框架。這個基本簡介次要先容了如何樹立頁面、鏈接、導航和按鈕。

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

15、設定頁面的背景色彩

這聽起來可以很復雜，但我花了好幾分鐘才弄分明如何給頁面增加背景色彩，又不會被jQuery Mobile CSS所掩蓋。一般你會給主體元素設定背景色彩，但假如你在使用jQuery Mobile框架，就需求把它設成ui-page類。

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

16、jQuery Mobile：我能為你做些什么?

可以弄分明新的jQuery Mobile框架如何幫你緊張樹立外觀遜色、跨裝備運轉的web使用次第。包括很多代碼示例和演示。可以進修創立一個復雜的jQuery Mobile使用次第。 相關鏈接：http://www.elated.com/articles/jquery-mobile-what- can-it-do-for-you/

17、制止裝入彈出式音訊

我覺得裝入彈出式音訊有點煩人，由于每當你裝入不同的頁面，該操縱就會被觸發。想制止這個操縱，只需往你的JS文件中增加上面這行代碼。

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

18、如何使用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/

19、"Cancel"和"Save"按鈕組合

這段代碼滿足了兩個基本請求。第一個請求是，讓兩個按鈕相互相鄰。幸虧，jQuery Mobile庫有一種內置的列構造，只需使用fieldset標簽和適宜的類，很輕易應用這種構造，如下所示。第二個請求是，讓兩個按鈕有不同的主題。這段代碼間接來自闡明文檔，我把它留在手邊，以便常常使用。

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

20、使用jQuery鎖定平臺

雖然我們很想為某些裝備施行某些CSS語句，但我們也想只在特定的裝備上運轉jQuery。上面對來自Snipplr的一些代碼作了改動，那樣我很輕易把jQuery的一局部隔分開來，以便依據用戶的裝備來運轉。

相關鏈接：http://snipplr.com/view/31607/iphone-ipad-ipod-det ect/

21、創立自定義主題

jQuery Mobile框架隨帶五個主題：主題A、主題B、主題C、主題D和主題E。但是你很輕易為本人的web使用次第創立一個新主題。

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

22、阻遏一些關鍵項目被截斷

庫的一項特性(或許是缺陷，就看你的需求了)在于，它可以智能化地截斷很長的項目，以適使用戶界面元素。

在兩種狀況下這可以很煩人。首先在列表項目中，我更喜愛看到局部文本。其次是在腳注文本中。

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

23、兩個iPhone開拓技巧，jQuery出手相助

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

24、從列表項移除箭頭
相關鏈接：http://eisabainyo.net/weblog/2011/01/31/top-10-jqu ery-mobile-code-snippets-that-you-need-to-know/

25、jQuery Mobile表單考證

可以經過這個教程進修jQuery Mobile表單考證。

相關鏈接：http://www.elijahmanor.com/2011/02/jquery-mobile-f orm-validation.html

26、使用JQuery Mobile的HTML5畫布元素，偵聽iPad和Android閱讀器上的觸摸事情

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

27、jQuery Mobile觸摸事情：疾速按下

可以進修如何檢測智能手機裝備上的"疾速按下"觸摸事情。

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

28、使用帶appMobi的JQuery Mobile
相關鏈接：http://www.youtube.com/watch?v=otBNufYLXNc&feature =related

29、同時禁用一切鏈接的AJAX導航功用

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

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

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

31、創立只要圖像、沒有文本的按鈕

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

32、jQuery Mobile工具欄導航菜單

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

33、jQuery Mobile中的搜尋列表

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

34、jQuery Mobile：官方的jQuery Mobile開拓框架

相關鏈接：http://iphonemonsta.com/jquery-iphone-mobile-devel opment-framework-mobile-touch-optimized

35、不使用AJAX的頁面轉換成效就翻開鏈接

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

36、jQuery Mobile多頁內部鏈接
相關鏈接：http://www.youtube.com/watch?v=OqLPP70XnVY&feature =related

37、jQuery Mobile中的對話轉換
相關鏈接：http://www.youtube.com/watch?v=Zh0yxy8YWYs&feature =related

38、為jQuery Mobile網站增加駕駛方向

相關鏈接：http://www.coldfusionjedi.com/index.cfm/2011/3/9/A dding-driving-directions-to-a-jQuery-Mobile-web-sit e

39、jQuery Mobile框架--表單教程

相關鏈接：http://mobile.tutsplus.com/tutorials/mobile-web-ap ps/jquery-mobile-forms/

40、jQuery Mobile中的復雜列表視圖

相關鏈接：http://www.youtube.com/watch?v=Jmg8GdEKDjA&feature =related 41、jQuery Mobile中的聯系列表

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

42、jQuery Mobile中的表單控件
相關鏈接：http://www.youtube.com/watch?v=O2fvX4gtR4A&feature =related

43、jQuery Mobile中的標題和腳注流動地位

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

44、jQuery Mobile內聯按鈕

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

45、jQuery Mobile中的Hello World
相關鏈接：http://www.youtube.com/watch?v=8YR4XuxwtKc&feature =related

46、使用jQuery Mobile樹立具有離線功用的挪動網站

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

47、jQuery Mobile和JSON

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

48、創立和使用jQuery Mobile中的自定義圖標
相關鏈接：http://www.andymatthews.net/read/2011/02/13/Creati ng-and-using-custom-icons-in-jQuery-Mobile

49、jQuery Mobile & Rails 3入門
相關鏈接：http://fuelyourcoding.com/getting-started-with-jqu ery-mobile-rails-3/

50、使用jQuery Mobile樹立一個原生的Android舊事閱讀使用次第
可以進修如何使用jQuery Mobile樹立一個原生的Android舊事閱讀使用次第。
相關鏈接：http://mobile.tutsplus.com/tutorials/mobile-web-ap ps/jquery_android/