收藏 30個jQuery Mobile開發技巧集萃

1、Backbone移動實例

Backbone移動實例

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

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

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

使用媒體查詢來鎖定設備

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

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

3、快速技巧:如何使用@Font-face

快速技巧:如何使用@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調用放在裝入移動插件的引用之前。這樣,你的jQuery命令就有機會在庫裝入之前運行。

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

5、完整的基本頁面

你可能發現自己一再需要爲基本頁面建立完整的標記。正因爲如此,這裏是創建一個基本頁面所需要的全部代碼。

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

6、自行創建列結構

自行創建列結構

如果你想爲多個設備設計最佳的單個頁面結構,會發現自己經常結合運用上述的媒體查詢技巧和“隨意順序的列”(columns in any order)方法。幸好,web開發人員很早以前就弄清楚瞭如何移動列以及結合運用這個方法和媒體查詢。

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

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

結合使用谷歌分析

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

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

8、通過AJAX和PHP,提交jQuery Mobile表單

通過AJAX和PHP,提交jQuery Mobile表單

可以學習如何通過AJAX和PHP,提交jQuery Mobile表單。

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

9、如何使用jQuery Mobile來創建移動WordPress主題

如何使用jQuery Mobile來創建移動WordPress主題

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

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

10、使用jQuery Mobile來創建網站,第一個部分

使用jQuery Mobile來創建網站,第一個部分

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

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

11、使用jQuery Mobile來創建網站,第二個部分

使用jQuery Mobile來創建網站,第二個部分

作爲如何使用jQuery Mobile來創建網站這個系列的下一個部分,現在介紹構建揚聲器(Speakers)頁面。

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

12、禁用按鈕動作

禁用按鈕動作

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

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

13、創建彈出式對話框

創建彈出式對話框

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

相關鏈接:http://www.webdesignerdepot.com/2011/05/10-handy-jquery-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-jquery-mobile-code-snippets-that-you-need-to-know/

16、jQuery Mobile:我能爲你做些什麼?

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-jquery-mobile-code-snippets-that-you-need-to-know/

18、如何使用jQuery Mobile來創建RSS閱讀程序

如何使用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”按鈕組合

“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/



21、創建自定義主題

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/

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

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

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

相關鏈接:http://www.webdesignerdepot.com/2011/05/10-handy-jquery-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-rescue

24、從列表項移除箭頭

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

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

25、jQuery Mobile表單驗證

jQuery Mobile表單驗證

可以通過這個教程學習jQuery Mobile表單驗證。

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

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

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

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

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

27、jQuery Mobile觸摸事件:快速按下

可以學習如何檢測智能手機設備上的“快速按下”觸摸事件。

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

28、使用帶appMobi的JQuery Mobile

這個教學視頻向你表明瞭如何使用帶appMobi的流行JQuery JavaScript庫的新移動版本。JQuery Mobile讓你可以很容易創建具有原生應用程序所有外觀感覺的應用程序,擁有內置的按鈕、轉換效果和表單等。

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

29、同時禁用所有鏈接的AJAX導航功能

同時禁用所有鏈接的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/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章