《JQueryMobile 开发常见问题.doc》由会员分享，可在线阅读，更多相关《JQueryMobile 开发常见问题.doc（7页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、JQueryMobile 开发常见问题目录隐藏 1什么是jQuery Mobile 2jQueryMobile的优劣 3快速开始做第一个jQueryMobile页面 4jQueryMobile学习资源o 4.1在线学习资源o 4.2配置参考和资源o 4.3推荐中文书o 4.4英文书资源 5深入jQuery Mobileo 5.1追信魔盒PhoneGap打包模式下的最佳模式o 5.2固定顶部导航栏以及可能引发的问题o 5.3点击链接响应速度慢的问题o 5.4对载入文字和错误文字的汉化o 5.5整合PhoneGap(Cordova)o 5.6手机环境下jQuery的DOM性能问题jQuery Mo
2、bile 是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。:今天，jQuery 驱动着 Internet 上的大量网站，在浏览器中提供动态用户体验，促使传统桌面应用程序越来越少。现在，主流移动平台上的浏览器功能都赶上了桌面浏览器，因此 jQuery 团队引入了 jQuery Mobile（简称 JQM）。JQM 的
3、使命是向所有主流移动浏览器提供一种统一体验，使整个 Internet 上的内容更加丰富 不管使用哪种查看设备。（以上摘自百度百科）更多介绍见：Jquery Mobile 中文API站追信魔盒提供的网页壳模式和PhoneGap打包模式，支持使用jQueryMobile来构筑属于自己的WebAPP，以下将详细描述我们在实际开发中的经验。jQueryMobile的优劣相比其他移动框架，jQueryMobile优势特别突出1. 学习成本低。jQuery已经是应用最普遍最成熟的的javascript框架，几乎成为前端开发人员必须精通的工具。jQueryMobile可以说是在jQuery上封装了一层针对移
4、动UI和交互的功能。只要熟悉jQuery，对jQueryMobile很快就能上手。2. 兼容性好。几乎支持所有主流的移动浏览器。它的设计初衷就是确保向下兼容性，能否让老的手机浏览器也能正常浏览，而新的智能手机浏览器能够很好地发挥本身的特性3. 轻量化。传承jQuery的特性，未经GZIP压缩的精简版CSS+JS文件才100KB左右，适合移动网络传输。4. 灵活的配色方案。可以自己在线配色、下载自定义配色CSS。但是它的劣势和它本身的特性有关1. 由于需要对页面的元素进行样式渲染，大量对DOM的操作导致第一次载入速度很慢2. 为了满足对浏览器向下兼容，创建的默认应用和原生应用差异比较大，并且在页
5、面切换效果等场景下存在各种问题如果需要创建对浏览器兼容性最好的应用，可以使用jQueryMobile，这样既可以满足手机网站触屏版的需求（满足各种智能手机的访问），也可以用追信魔盒的PhoneGap模式封装成客户端软件。如果只是为了开发封装好的客户端软件，还是有一些开发工作量，让自己的应用接近原生客户端的效果。快速开始做第一个jQueryMobile页面jQuery Mobile提供一整套针对触摸UI的组件以及基于AJAX的动画页面转场功能。以下开始建立您第一个jQueryMobile页面。 My Page script src=script src= My TitleHello world头
6、部是HTML5的标准头，引入jQuery的JS文件作为基础，以及jQueryMobile的CSS样式文件和JS文件。在正文中，jQueryMobile采用“data-role”来标记不同的区块，“data-role=page”表示页面区块（一张HTML中可以有多个page项目，做过WAP1.2开发的人很容易联想到wml中的card标记）。 “data-role=header”表示页面头，通常在这里放置标题、左按钮和右功能按钮。“ data-role=content”表示内容区块，中间可以包含ul、p、div等等各种标记。jQuery Mobile的体系并不大，具备jQuery开发经验的人可以耐
7、心的花1、2个小时通览一遍开发文档，可以对jQueryMobile有很好的了解。以下将列出推荐的系统学习链接。jQueryMobile学习资源jQueryMobile最新版本是1.1.0，经历了近2年的发展已经日趋成熟，兼容性和性能都比1.0版本以前好了很多。相关资料也日渐增多。在线学习资源1. jQueryMobile官方站2. jQueryMobile中文API站，最用心的中文资料站，完整翻译英文文档配置参考和资源1. jQueryMobile主题配色网站2. 第三方样例、插件、资源3. jQueryMobile开发的网站大全推荐中文书jQuery Mobile快速入门，虽然中文名字翻译成
8、“快速入门”，实际上写得很有深度，非常推荐。淘宝购买链接点此英文书资源jQuery移动开发(jQuery Mobile) PDF电子书，英文版深入jQuery MobilejQueryMobile上手非常容易，但是要做到近似于原生APP的效果则很不容易。以下内容不断更新中，均为实际开发中的经验追信魔盒PhoneGap打包模式下的最佳模式追信魔盒的PhoneGap打包模式，将所有HTML文件、CSS文件和JS文件打包在客户端中，这样就不考虑在线模式的网络延迟问题，可以用各种方式将应用的表现更贴近原生程序 采用OPOA（One Page, One Application）模式，将所有主要内容放置在
9、一张页面中，这样可以确保不同的Page切换最为顺畅。 尽可能将所有的点击链接通过javascript来控制。绑定jQueryMobile的tap事件来处理。这样可以确保最快响应点击事件 使用$(document).bind(pageinit)，而不是 $(document).ready()。 对不同的Page中的JS脚本分别实现载入后运行（默认的教程都是教你使用$(document).bind(pageinit)。例如：$(#Home).live(pageinit,function() /在这里执行#Home页面加载后需要运行的方法); 尽可能避免在转场时使用fade，这个方法在很多场合容易闪
10、屏，使用slide相对保险一些。 避免使用alert来弹出提醒，可以考虑使用PhoneGap的通知事件来实现纯原生客户端的提醒样式固定顶部导航栏以及可能引发的问题对于顶部导航栏，我们通常使用data-position=fixed来固定顶部的显示。如图，顶部固定的代码： 返回 复合大城 首页 非凡血统 完美规划大城崛起商学院 这样的效果在表现上已接近原生效果。但是如果在真机打包模式下（并且所有Page放在一个Html文件中），会发现如果前后两张页面都采用了固定头部，在Slide过场效果下，第一次切换会先只显示下一张Page的头部覆盖当前Page，再切换到下一张，而并非第二张Page完整显示。 为
11、了避免这种情况，可以将第一张Page的头部的fix属性去掉。对于一般的软件，如果只有两层内容深度，那么只要首页的顶部不固定即可。（对于此问题尝试增加DOM缓存等都无效，仅测试出这个解决方案）点击链接响应速度慢的问题对于a标记的点击导航，默认是在onclick事件中处理的。而移动客户端对onclick的响应相比PC浏览器有着明显的几百毫秒延迟。在移动浏览器中对触摸事件的响应顺序应当是： ontouchstart - ontouchmove - ontouchend - onclick因此，如果确实要加快对点击事件的响应，就应当绑定ontouchend事件。如果不用jQueryMobile，可以考
12、虑用第三方的脚本，例如http:/cubiq.org/remove-onclick-delay-on-webkit-for-iphone。而那个地址中的代码不支持Android，可以考虑采用评论中的代码。这个脚本主要考虑到ontouchstart和ontouchend的触摸点位移，确保不会在用户滑动(swipe)画面后触发到点击事件。对于使用jQueryMobile的人来说就幸运很多了，使用内置的tap事件即可在ontouchend事件环节捕获到被点击的请求，这个方法的响应时间明显快于onclick事件。代码范例如下：$(#fhdclink).live(tap,function(event)
13、$.mobile.changePage($(#fhdc), transition: slide,reverse: false );return false;);对载入文字和错误文字的汉化$(document).bind(mobileinit,function() $.mobile.loadingMessage = 页面载入中;$.mobile.pageLoadErrorMessage = 页面载入失败;);整合PhoneGap(Cordova)$(document).bind(mobileinit,function() $.support.cors = true;$.mobile.allowC
14、rossDomainPages=true;); document.addEventListener(deviceready, onDeviceReady, false); function onDeviceReady() / Register the event listener document.addEventListener(backbutton, onBackKeyDown, false); function onBackKeyDown() history.back();return false; 手机环境下jQuery的DOM性能问题使用jQuery的选择器，在PC环境下效果比较理想
15、，但在手机环境下DOM选择会比较卡，如果选择器使用频繁，会造成用户UI响应变化滞后。 jQuery默认不会缓存DOM选择，每次使用选择器都会从根节点进行检索，因此，强烈建议缓存DOM选择结果。例如标签页效果,未优化前：$(#fhdcList a).each(function(index)$(this).click(function()$(#fhdcList a.ui-btn-active).removeClass(ui-btn-active);$(#fhdcList a:eq( + index + ).addClass(ui-btn-active);$(.fhdcTab:visible).hi
16、de();$(.fhdcTab:eq( + index + ).show();););这样在循环时每一句语句都会对DOM树从头到尾查找一遍。在PC环境下看不出时延，但在手机环境下切换时明显有点卡。这需要优化：var tab = $(.fhdcTab);var listdiv = $(#fhdcList);listdiv.find(a).each(function(index)$(this).live(tap,function(event) listdiv.find(a.ui-btn-active).removeClass(ui-btn-active);tab.hide();tab.eq(index).show();listdiv.find(a:eq( + index + ).addClass(ui-btn-active);););