经典收藏 50个jQuery Mobile开发技巧集萃

http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html

 

 

一、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/