JQueryMobile_开发常见问题

JQueryMobile 开发常见问题

目录

[1 什么是jQuery Mobile

2 jQueryMobile的优劣

3 快速开始做第一个jQueryMobile页面

4 jQueryMobile学习资源

o 4.1 在线学习资源

o 4.2 配置参考和资源

o 4.3 推荐中文书

o 4.4 英文书资源

5 深入jQuery Mobile

o 5.1 追信魔盒PhoneGap打包模式下的最佳模式o 5.2 固定顶部导航栏以及可能引发的问题

o 5.3 点击链接响应速度慢的问题

o 5.4 对载入文字和错误文字的汉化

o 5.5 整合PhoneGap(Cordova)

o 5.6 手机环境下jQuery的DOM性能问题jQuery Mobile 是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery 核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团

队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。:今天，jQuery 驱动着Internet 上的大量网站，在浏览器中提供动态用户体验，促使传统桌面应用程序越来越少。现在，主流移动平台上的浏览器功能都赶上了桌面浏览器，因此jQuery 团队引入了

jQuery Mobile（简称JQM）。JQM 的使命是向所有主流移动浏览器提供一种统一体验，使整个Internet

上的内容更加丰富—不管使用哪种查看设备。（以上摘自百度百科）

更多介绍见：Jquery Mobile 中文API站

追信魔盒提供的网页壳模式和PhoneGap打包模式，

支持使用jQueryMobile来构筑属于自己的WebAPP，以下将详细描述我们在实际开发中的经验。jQueryMobile的优劣

相比其他移动框架，jQueryMobile优势特别突出

1.学习成本低。jQuery已经是应用最普遍最成熟的的

javascript框架，几乎成为前端开发人员必须精通的工具。jQueryMobile可以说是在jQuery上封装了一层针对移动UI和交互的功能。只要熟悉jQuery，对

jQueryMobile很快就能上手。

2.兼容性好。几乎支持所有主流的移动浏览器。它的设计

初衷就是确保向下兼容性，能否让老的手机浏览器也能正常浏览，而新的智能手机浏览器能够很好地发挥本身的特性

3.轻量化。传承jQuery的特性，未经GZIP压缩的精简

版CSS+JS文件才100KB左右，适合移动网络传输。

4.灵活的配色方案。可以自己在线配色、下载自定义配色

CSS。

但是它的劣势和它本身的特性有关

1.由于需要对页面的元素进行样式渲染，大量对DOM的

操作导致第一次载入速度很慢

2.为了满足对浏览器向下兼容，创建的默认应用和原生应

用差异比较大，并且在页面切换效果等场景下存在各种问题

如果需要创建对浏览器兼容性最好的应用，可以使用jQueryMobile，这样既可以满足手机网站触屏版的需求（满足各种智能手机的访问），也可以用追信魔盒的PhoneGap模式封装成客户端软件。如果只是为了开发封装好的客户端软件，还是有一些开发工作量，让自己的应用接近原生客户端的效果。

快速开始做第一个jQueryMobile页面

jQuery Mobile提供一整套针对触摸UI的组件以及基于AJAX的动画页面转场功能。以下开始建立您第一个

jQueryMobile页面。

content="width=device-width,

initial-scale=1">

href="/mobile/1.1.0/j query.mobile-1.1.0.min.css"/>

src="/jquery-1.7.1.mi n.js">

src="/mobile/1.1.0/jq uery.mobile-1.1.0.min.js">

My Title

Hello world

头部是HTML5的标准头，引入jQuery的JS文件作为

基础，以及jQueryMobile的CSS样式文件和JS文件。

在正文中，jQueryMobile采用“data-role”来标记不同的

区块，“data-role="page"”表示页面区块（一张HTML

中可以有多个page项目，做过WAP1.2开发的人很容

易联想到wml中的card标记）。“data-role="header"”

表示页面头，通常在这里放置标题、左按钮和右功能按