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模板引擎。