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