jQuery Mobile

1. pageinit & pageshow

JQM的官方手册重点提醒了使用$(document).bind(‘pageinit’)代替$(document).ready()。

但当你须要对某一个页面(page)编写其独享的Javascript脚本时, 选择器应该选择的是该page层, 而不是document, 并使用live()添加事件处理器。这在ajaxEnable=true的状况下尤其重要。

View Demo

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 :

id='hello' data-role='page'>

data-role="content"> href="#world" data-role="button">Next

id='world' data-role='page'>

data-role="content"> href="#hello" data-role="button">Previous

2. refresh

经过脚本修改JQM页面数据时, 一般须要再进行一次refresh。能够根据不一样的类型选择如下对应的方法。

 $('div#id').trigger('refresh'); $('ul#id').listview('refresh'); $('button#id').button('refresh'); $('input#id[type=checkbox]').checkboxradio('refresh');

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 = "

" + title + "

" + content + " 取消 肯定

", 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(); return false; }); });

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'); return false; } }); } else { $.mobile.back(); return false; } } catch (e) { console.log('BackButton Listener Catch : ' + e); } } }

9. $.mobile.loading

建议把$.mobile.showPageLoadingMsg()以及$.mobile.hidePageLoadingMsg()的脚本改成$.mobile.loading('show')以及$.mobile.loading('hide')。

这个方法一样能够配置内容、样式等参数: $.mobile.loading('show', {text : 'test', theme : 'a'});。

10. $.mobile.back()

若是你是使用PhoneGap + JQueryMobile进行开发, 设定了ajaxEnable=false, 而且发现$.mobile.back()无效, 那么请尝试设定phonegapNavigationEnable=true。

当该值为true时, $mobile.back()会使用nav.app.backHistory();, 不然使用window.history.back();。

但这个参数也 仅 建议在ajaxEnable=false的状况下进行设置。

11. ajaxEnable

若是但愿使用PhoneGap将应用打包为app, 个人建议是, 尽可能使用ajaxEnable=true, 不然体验十分很差, 并且你还会遇到更多的问题。

12. 页面跳转

请使用$.mobile.changePage()代替window.location.href。

若是要刷新当前页面呢? 个人方法是:

 $.mobile.changePage($.mobile.activePage.jqmData('url'), {reloadPage : true});

13. 慎重选择JQueryMobile

如你所见, 使用JQM + PhoneGap进行WebApp开发会遇到许多问题。

但JQM目前仍是只适合作简单的WebApp, 若是坚持作复杂, 其效率将会十分堪忧。

固然, 若是你选择了一个正确的方式, 那其中大部分均可以免。

此外, Github上有许多项目对基于JQM的开发会有很大的帮助。

1. The-M-Project

The-M-Project的UI基于JQM, 但其拥有更好的结构, 并实现了一些你可能会须要的功能。其文档也十分健全, 你能够查看其更详细的介绍。你不必定使用这个框架, 但在JQM的开发上, 这个项目有许多值得借鉴的地方。

2. persistencejs

离线数据的库, 这里有一个结合JQM的Demo。

3. artTemplate