1. pageinit & pageshow
JQM的官方手册重点提醒了使用$(document).bind(‘pageinit’)代替$(document).ready()。
但当你需要对某一个页面(page)编写其独享的Javascript脚本时, 选择器应该选择的是该page层, 而不是document, 并使用live()
添加事件处理器。这在ajaxEnable=true的情况下尤为重要。
JS :
$(document).bind('pageinit',function(){
console.log('任意一个页面初始化时响应');});
$(document).bind('pageshow',function(){
console.log('任意页面被显示时响应')});
$("#hello").live('pageinit',function(){
console.log('只响应id为hello的页面初始化');});
$("#hello").live('pageshow',function(){
console.log('只响应id为hello的页面被显示');});
Html :
<body><divid='hello'data-role='page'><divdata-role="content"><ahref="#world"data-role="button">Next</a></div></div><divid='world'data-role='page'><divdata-role="content"><ahref="#hello"data-role="button">Previous</a></div></div></body>
关于JQM事件的总结可以参考JQM脚本的引用及脚本写法经验。
2. refresh
通过脚本修改JQM页面数据时, 通常需要再进行一次refresh。可以根据不同的类型选择以下对应的方法。
$('div#id').trigger('refresh');
$('ul#id').listview('refresh');
$('button#id').button('refresh');
$('input#id[type=checkbox]').checkboxradio('refresh');
还有更多的可以参考JQM的界面数据刷新。
3. tap
JQueryMobile在Android设备上的tap事件会出现多次触发的问题, 对此可以参考Ghost Click。
我们的解决方案是使用Google FastButton,
将原来需要用tap的地方改用fastbutton处理。
4. taphold
检查jquery.mobile-1.2.0.js, 1722行。
timer = setTimeout(function(){
triggerCustomEvent( thisObject,"taphold", $.Event("taphold",{ target: origTarget }));}, $.event.special.tap.tapholdThreshold );
在触发taphold事件时没有清除handlers, 所以当taphold事件后, 本不应该被触发的tap事件也被触发了。
暂时修复的方案是在1722行添加:
timer = setTimeout(function(){
clearTapHandlers();// <---- + 这一行
triggerCustomEvent( thisObject,"taphold", $.Event("taphold",{ target: origTarget }));}, $.event.special.tap.tapholdThreshold );
这个bug存在于JQM1.2.0及以下版本。
5. swipe
JQM的swipe响应也是非常慢/诡异, 如果需要使用swipe事件, 建议寻找其他代替的方案, 如TouchSwipe。
6. popup
你可以选择在脚本中生成popup, 并通过popup('open')
及popup('close')
进行打开/关闭, 借此可以实现很多实用的功能。
如以下模拟confirm的效果:
var confirm =function(content, title, response){var html ="<div data-role='popup' id='mToast_confirm' data-theme='d' data-overlay-theme='b' style='max-width:340px;overflow:hidden;'><div class='ui-header ui-bar-a ui-corner-top'><h1 class='ui-title'>"+ title +"</h1></div><div class='ui-content'><p></p>"+ content +"<p></p><a data-role='button' data-inline='true' data-rel='back' data-mini='true'>取消</a><a id='mToast_confirm_response' data-role='button' data-theme='b' data-icon='check' data-inline='true' data-mini='true'>确定</a></div></div>",
previous = $(".ui-popup-active div[data-role=popup]"),
divConfirm = $("div#mToast_confirm");
previous.popup('close');if(divConfirm.length >0){
divConfirm.remove();}
divConfirm = $(html).appendTo("div[data-role=page]:first");
divConfirm.trigger('create')// <-- 生成popup.trigger('refresh').popup().find("#mToast_confirm_response").on('fastClick',function(){
divConfirm.popup('close');
previous.popup('open');
response();});
divConfirm.popup('open');// -->};
confirm('are you sure?','Confirm',function(){
alert('sure');});
需要注意的是popup('open')
前需要对div进行.trigger('create').trigger('refresh').popup()
。
此外, $.mobile.popup.active
也非常实用, $.mobile.popup.active.element[0]
将返回当前显示的popup层对象。
7. data-rel=back
当你发现使用data-rel=back
的返回按钮响应速度难以忍受的时候, 可以为这个按钮单独绑定一个事件处理器。
如以下脚本将加快header上的返回按钮响应速度:
$(document).bind('pageinit',function(){
$("div[data-role=page] > div[data-role=header] > a[data-rel=back]").bind("fastClick",function(event){
$.mobile.back();returnfalse;});});
但这并不是一个好的解决方案, 如果你对back-rel=back
的处理感兴趣可以查看jquery.mobile-1.2.0.js : 4141行。如果有更好的解决方案请告知我^_^。
8. BackButton (PhoneGap + JQM)
在PhoneGap+JQM的方案下, 发现Android手机上的返回硬键无效或者对popup的处理不正确时(多为ajaxEnable=false的情况), 加入以下脚本:
document.addEventListener("deviceready", backKeyListener,false);function backKeyListener(){
document.addEventListener("backbutton", onBackKeyDown,false);function onBackKeyDown(){try{if($.mobile.popup.active){var popupDiv = $.mobile.popup.active.element;
popupDiv.each(function(){if($(this).parent().hasClass('ui-popup-active')){
$(this).popup('close');returnfalse;}});}else{
$.mobile.back();returnfalse;}}catch(e){
console.log('BackButton Listener Catch : '+ e);}}}
如果这段脚本不起作用, 请再参考第十条经验, 对phonegapNavigation进行设置。
9. $.mobile.loading
建议把$.mobile.showPageLoadingMsg()
以及$.mobile.hidePageLoadingMsg()
的脚本改为$.mobile.loading('show')
以及$.mobile.loading('hide')
。
这个方法同样可以配置内容、样式等参数: $.mobile.loading('show', {text : 'test', theme : 'a'});
。
更多的信息参考JQM API – methods中的描述。
10. $.mobile.back()
如果你是使用PhoneGap + JQueryMobile进行开发, 设定了ajaxEnable=false
, 并且发现$.mobile.back()
无效, 那么请尝试设定phonegapNavigationEnable=true
。
当该值为true时, $mobile.back()会使用nav.app.backHistory();
, 否则使用window.history.back();
。
但这个参数也 仅 建议在ajaxEnable=false的情况下进行设置。
更多的信息可以参考JQM API – globalConfig中的描述。
11. ajaxEnable
如果希望使用PhoneGap将应用打包为app, 我的建议是, 尽量使用ajaxEnable=true
, 否则体验十分不好, 而且你还会遇到更多的问题。
此外应该给每一个page设定id, 并遵循第一条建议。
12. 页面跳转
请使用$.mobile.changePage()
代替window.location.href
。
如果要刷新当前页面呢? 我的方法是:
$.mobile.changePage($.mobile.activePage.jqmData('url'),{reloadPage :true});
但这理应不是最好的方法, 如果你有更好的方法请告知我^_^。
13. 慎重选择JQueryMobile
如你所见, 使用JQM + PhoneGap进行WebApp开发会遇到许多问题。
但JQM目前还是只适合做简单的WebApp, 如果坚持做复杂, 其效率将会十分堪忧。
当然, 如果你选择了一个正确的方式, 那其中大部分都可以避免。
此外, Github上有许多项目对基于JQM的开发会有很大的帮助。
The-M-Project的UI基于JQM, 但其拥有更好的结构, 并实现了一些你可能会需要的功能。其文档也十分健全, 你可以查看其更详细的介绍。你不一定使用这个框架, 但在JQM的开发上, 这个项目有许多值得借鉴的地方。
离线数据的库, 这里有一个结合JQM的Demo。
3. artTemplate
出自腾讯CDC的javascript模板引擎。
相关推荐
使用jQuery Mobile + PhoneGap 开发Android应用程序
《构建“校园助手”App:jQuery Mobile、百度地图与PhoneGap的融合应用》 在现代移动互联网技术中,开发一款跨平台的移动应用程序已经成为常态。本项目“校园助手”利用了jQuery Mobile、百度地图API以及PhoneGap这...
### jQuery Mobile和PhoneGap集成开发 #### jQuery Mobile介绍 jQuery Mobile是一个针对移动设备优化的HTML5框架,用于构建响应式网站和应用程序。它是jQuery库的一个扩展,利用了jQuery的核心特性,并针对触控屏...
【标题】:“Android + PhoneGap + jQuery Mobile” 这个项目标题揭示了一个使用三种技术栈构建的移动应用程序:Android、PhoneGap和jQuery Mobile。Android是Google主导的开源操作系统,主要用于智能手机和平板...
图书的源代部分; 还有由于容量的原因, 视频和web实例图片没有上传. 《jQuery全能权威指南:jQuery Core+jQuery Plugin+...、jQuery UI、jQuery Mobile以及大量第三方的插件库和2800多个应用jQuery技术的网页参考。
Android+Jquerymobile+PhoneGap的项目实例,包括 用这些 js UI实现的 滑屏、触摸、禁横屏、滚动特效。绝对经典,技术绝对齐全, 绝对适合你学习。想学手机软件开发的人,必须选择我的资源, 与我一起进步!!!
Jquery Mobile +Asp.net源码制作的源码,旨在帮助了解Jquery Mobile +Asp.net运行机制,代码在vs2010下运行,用的ACESS数据库,可直接运行,用户名:1,密码:1
总结来说,jQuery Mobile 和 ASP.NET 的组合为开发者提供了一条快速、高效地构建移动Web应用的途径。通过利用两者的优势,可以创建出既美观又实用的跨平台应用,满足不同用户的需求。在实际开发过程中,不断学习和...
PhoneGap+jQuery Mobile+REST 访问远程数据 在移动应用开发中,PhoneGap是一个流行的框架,它允许开发者使用HTML、CSS和JavaScript来构建跨平台的原生移动应用。jQuery Mobile则是一个专为触摸设备设计的前端框架,...
这是我写的一个小的例子程序,使用node+jquerymobile+ejs+mongodb 里面包含了注册模块 登录模块,和主页面,相关的技术包括: 并没有使用express等框架,而是用node原生api编写,涵盖如何加载ejs 和如何使用jquery...
综上所述,这个项目利用HTML5的多媒体特性创建Web应用,借助PhoneGap将其转换为可在不同移动设备上运行的原生应用,再通过jQuery Mobile优化用户界面和交互体验,实现了跨平台的手机APP开发。这个过程中,开发者需要...
jquery mobile + html5 手机app表单跨域提交实例 详细讲解请参考 http://blog.csdn.net/lzy8395/article/details/39666027 手机app开发html5 juqery moblie phonegap系列一
《构建手机版人事档案管理系统:jQuery Mobile + JSP + Servlet + Sqlite + MySql》 本项目是一个基于移动设备的完整人事档案管理系统,它巧妙地融合了前端框架jQuery Mobile、后端服务器技术JSP与Servlet,以及...
总的来说,这个主题涵盖了多个技术点,包括PhoneGap的跨平台开发、Android API的调用、JQuery Mobile的UI设计和iScroll的性能优化。学习和掌握这些技术可以帮助开发者构建功能丰富的、具有原生感的移动应用,同时...
总结,这个Demo演示了如何将`jQuery Mobile`的易用性和触控优化与`iScroll`的高性能滚动结合起来,创建一个具备上拉刷新功能的移动Web页面。开发者可以通过学习和修改这个示例,为自己的项目构建类似的交互体验。...
在移动Web应用开发中,jQuery Mobile是一个非常流行的框架,它为构建触摸优化的、响应式的网页提供了丰富的组件和API。侧边栏(Sidebar)是现代Web应用中常见的一种设计模式,用于提供导航、设置或其他辅助功能。在...
人事管理系统项目(jQuery Mobile + JSP + Servlet + Sqlite + MySql ),此项目部署在手机或者浏览器上访问,能实现用户登陆,公司部门的增删查改,部门员工的增删查改,员工职位的增删查改,部门员工考勤的增删...
Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery
在移动应用开发领域,jQuery Mobile(jqm)和PhoneGap是两个非常重要的工具。本项目利用jqm的UI框架和PhoneGap的混合应用特性,构建了一个简单的联系人管理应用,旨在帮助用户实现对手机联系人的动态读取、添加和...