JQueryMobile 开发常见问题[宝典]

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. 灵活的配色 方案 气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载 。可以自己在线配色、下载自定义配色CSS。 但是它的劣势和它本身的特性有关 1. 由于需要对页面的元素进行样式渲染，大量对DOM的操作导致第一次载入速度很慢 2. 为了满足对浏览器向下兼容，创建的默认应用和原生应用差异比较大，并且在页面切换效果等场景下存在各种问题 如果需要创建对浏览器兼容性最好的应用，可以使用jQueryMobile，这样既可以满足手机网站触屏版的需求(满足各 种智能手机的访问)，也可以用追信魔盒的PhoneGap模式封装成客户端软件。如果只是为了开发封装好的客户端软 件，还是有一些开发工作量，让自己的应用接近原生客户端的效果。 快速开始做第一个jQueryMobile页面 jQuery Mobile提供一整套针对触摸UI的组件以及基于AJAX的动画页面转场功能。以下开始建立您第一个 jQueryMobile页面。 <> html <> head <>My Page titletitle < name="viewport" content="width=device-width, initial-scale=1"> meta < rel="stylesheet" link href="; /> < src=";>scriptscript < script src=";>script head <> body < data-role="page"> div < data-role="header"> div <>My Title h1h1 div < data-role="content"> div <>Hello world pp div div body html 头部是HTML5的 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 头，引入jQuery的JS文件作为基础，以及jQueryMobile的CSS样式文件和JS文件。 在正文中，jQueryMobile采用“data-role”来标记不同的区块，“data-role="page"” 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 示页面区块(一张HTML中可以 有多个page项目，做过WAP1.2开发的人很容易联想到wml中的card标记)。 “data-role="header"”表示页面头， 通常在这里放置标题、左按钮和右功能按钮。“ data-role="content"”表示内容区块，中间可以包含ul、p、div等等各 种标记。 jQuery Mobile的体系并不大，具备jQuery开发经验的人可以耐心的花1、2个小时通览一遍开发文档，可以对 jQueryMobile有很好的了解。以下将列出推荐的系统学习链接。 jQueryMobile学习资源 jQueryMobile最新版本是1.1.0，经历了近2年的发展已经日趋成熟，兼容性和性能都比1.0版本以前好了很多。相关资料也日渐增多。 在线学习资源 1. jQueryMobile官方站 2. jQueryMobile中文API站，最用心的中文资料站，完整翻译英文文档 配置参考和资源 1. jQueryMobile主题配色网站 2. 第三方样例、插件、资源 3. jQueryMobile开发的网站大全 推荐中文书 《jQuery Mobile快速入门》，虽然中文名字翻译成“快速入门”，实际上写得很有深度，非常推荐。 淘宝购买链接点此 英文书资源 jQuery移动开发(jQuery Mobile) PDF电子书，英文版 深入jQuery Mobile jQueryMobile上手非常容易，但是要做到近似于原生APP的效果则很不容易。 以下内容不断更新中，均为实际开发中的经验 追信魔盒PhoneGap打包模式下的最佳模式 追信魔盒的PhoneGap打包模式，将所有HTML文件、CSS文件和JS文件打包在客户端中，这样就不考虑在线模式 的网络延迟问题，可以用各种方式将应用的表现更贴近原生程序 , 采用OPOA(One Page, One Application)模式，将所有主要内容放置在一张页面中，这样可以确保不同的Page切 换最为顺畅。 , 尽可能将所有的点击链接通过javascript来控制。绑定jQueryMobile的tap事件来处理。这样可以确保最快响应点击 事件 , 使用$(document).bind('pageinit')，而不是 $(document).ready()。 , 对不同的Page中的JS脚本分别实现载入后运行(默认的教程都是教你使用$(document).bind('pageinit')。例如: $("#Home").live('pageinit',() { function //在这里执行#Home页面加载后需要运行的方法 }); , 尽可能避免在转场时使用fade，这个方法在很多场合容易闪屏，使用slide相对保险一些。 , 避免使用alert来弹出提醒，可以考虑使用PhoneGap的 通知 关于发布提成方案的通知关于xx通知关于成立公司筹建组的通知关于红头文件的使用公开通知关于计发全勤奖的通知 事件来实现纯原生客户端的提醒样式 固定顶部导航栏以及可能引发的问题 对于顶部导航栏，我们通常使用data-position="fixed"来固定顶部的显示。 如图，顶部固定的代码: < data-role="header" data-position="fixed"> div < href="#Home" data-icon="back" data-direction="reverse" data-transition="slide" >a 返回 a <> h1 复合大城 h1 < href="#Home" data-icon="home" data-iconpos="notext" data-direction="reverse" a data-transition="slide" class="ui-btn-right">首页 a < class="segmented-control ui-bar-d"> div < data-role="controlgroup" data-type="horizontal" id="fhdcList">div < href="#" class="ui-btn-active" data-role="button">非凡血统aa < href="#" data-role="button" >完美规划 aa < href="#" data-role="button" >大城崛起 aa < href="#" data-role="button" >商学院 aa div div div 这样的效果在表现上已接近原生效果。 但是如果在真机打包模式下(并且所有Page放在一个Html文件中)，会发现如果前后两张页面都采用了固定头部，在Slide过场效果下，第一次切换会先只显示下一张Page的头部覆盖当前Page，再切换到下一张，而并非第二张Page完整显示。 为了避免这种情况，可以将第一张Page的头部的fix属性去掉。对于一般的软件，如果只有两层内容深度，那么只要首页的顶部不固定即可。(对于此问题尝试增加DOM缓存等都无效，仅测试出这个解决方案) 点击链接响应速度慢的问题 对于a标记的点击导航，默认是在onclick事件中处理的。而移动客户端对onclick的响应相比PC浏览器有着明显的几百毫秒延迟。 在移动浏览器中对触摸事件的响应顺序应当是: ontouchstart -> ontouchmove -> ontouchend -> onclick 因此，如果确实要加快对点击事件的响应，就应当绑定ontouchend事件。 如果不用jQueryMobile，可以考虑用第三方的脚本，例如 。而那个地址中的代码不支持Android，可以考虑采用评论中的代码。这个脚本主要考虑到ontouchstart和ontouchend的触摸点位移，确保不会在用户滑动(swipe)画面后触发到点击事件。 对于使用jQueryMobile的人来说就幸运很多了，使用内置的tap事件即可在ontouchend事件环节捕获到被点击的请求，这个方法的响应时间明显快于onclick事件。代码范例如下: $("#fhdclink").live('tap',(event) { function $.mobile.changePage($("#fhdc"), { transition: 'slide', reverse: false } ); ; returnfalse }); 对载入文字和错误文字的汉化 $(document).bind("mobileinit",() { function $.mobile.loadingMessage = '页面载入中'; $.mobile.pageLoadErrorMessage = '页面载入失败'; }); 整合PhoneGap(Cordova) 手机环境下jQuery的DOM性能问题 使用jQuery的选择器，在PC环境下效果比较理想，但在手机环境下DOM选择会比较卡，如果选择器使用频繁，会造成用户UI响应变化滞后。 jQuery默认不会缓存DOM选择，每次使用选择器都会从根节点进行检索，因此，强烈建议缓存DOM选择结果。 例如标签页效果,未优化前: $("#fhdcList a").each((index){ function $().click((){ thisfunction $("#fhdcList a.ui-btn-active").removeClass("ui-btn-active"); $("#fhdcList a:eq(" + index + ")").addClass("ui-btn-active"); $(".fhdcTab:visible").hide(); $(".fhdcTab:eq(" + index + ")").show(); }); }); 这样在循环时每一句语句都会对DOM树从头到尾查找一遍。在PC环境下看不出时延，但在手机环境下切换时明显有点卡。这需要优化: tab = $(".fhdcTab");var listdiv = $("#fhdcList"); var listdiv.find("a").each((index){ function $().live('tap',(event) { thisfunction 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"); }); });