使用jQuery Mobile的注意事項（譯）

翻譯編輯自：http://www.appnovation.com/blog/7-things-know-about-jquery-mobile-working-it

1、Android和IOS的內置鍵盤（Native keyboard）是不同的

對手機的內置鍵盤的操做是比較複雜和富有爭議的，不一樣的手機可能須要不一樣的css。Android使用的是第三方的鍵盤插件（3rd party keyboards ），如 Google Keyboard 和 SwiftKey。

可設置input的type屬性來決定內置鍵盤是顯示數字鍵盤仍是顯示字母鍵盤（參考link）：

• Email：<input type="email" name="email">
• URL： <input type="url" name="url">
• telephone： <input type="tel" name="tel">
• number：<input type="number" name="number">

• Date：<input type="date" name="date">（chrome）

• Time：<input type="time" name="time">

須要說明的是：

• android不支持input的type屬性，而IOS支持
• android的內置數字鍵盤沒有小數點按鈕
• 瀏覽器對date/time的支持頗有限，Opera支持以上全部的屬性，chrome支持date，safari支持date但不支持calender 

2、page events的順序

如從A頁面轉到B頁面(Navigate from A to B)

• page B---pagebeforecreate
• page B---pagecreate
• page B---pageinit
• page A---pagebeforehide
• page B---pagebeforeshow
• page A---pageremove
• page A---pagehide
• page B---pageshow

3、jQuery Mobile transitions

jQuery Mobile的頁面轉換常會出現（Flickering/Blinking）閃爍問題，爲此能夠在viewport meta tag中關閉（disabling）jQuery Mobile的頁面轉換。

• Android 2.3不支持CSS3 transition
• "pop" 轉換效果在跳轉前會將背景變成白色，致使出現「閃爍」效果（解決方法：將pop轉換效果變爲舊jQuery Mobile效果的插件，參見here）

4、 Fixed Header and Footer

jQuery Mobile內置有固定位置的header和footer，但一些低版本的Android和IOS不支持，須要另外修正

1）加data-tap-toggle="false"到header和footer

2) 如IOS 6, 7 ,8的hack以下

if (iOS()) {
    $(document).on('blur', 'input:not(:submit), select, textarea', function () {
        var paddingBottom = parseFloat($(".ui-mobile-viewport, .ui-page-active").css("padding-bottom"));
        $(".ui-mobile-viewport, .ui-page-active").css("padding-bottom", (paddingBottom + 1) + "px");
        window.setTimeout(function () {
            $(".ui-mobile-viewport, .ui-page-active").css("padding-bottom", paddingBottom + "px");
        }, 0);
    });
}

var iOS() = function () {
    var userAgent = window.navigator.userAgent.toLowerCase();
    return (/iphone|ipad|ipod/).test(userAgent);
}

3）或參見：JQueryMobile - fixed footer not fixed after input focus

$('div:jqmData(role="page")').on('pageinit',function(){
    $(document)
        .on('focus','input, select, textarea', function(){
            $('[data-role="footer"][data-position="fixed"]').hide();
        })
        .on('blur','input, select, textarea',function(){
            $('[data-role="footer"][data-position="fixed"]').show();
        });
});

有時候當toolbar滾動過快的時候會致使不平滑問題。

5、更多的Javascript的Events

• tap：Triggers after a quick, complete touch event.
• taphold：Triggers after a held complete touch event (close to one second).
• swipe: Triggers when a horizontal drag of 30px or more (and less than 20px vertically) occurs within 1 second duration.
• swipeleft: Triggers when a swipe event occurred moving in the left direction.
• swiperight:  Triggers when a swipe event occurred moving in the right direction.
• orientationchange: Triggers when a device orientation changes (by turning it vertically or horizontally). When bound to this event, your callback function can leverage a second argument, which contains an orientation property equal to either "portrait" or "landscape." These values are also added as classes to the HTML element, allowing you to leverage them in your CSS selectors. Note that we currently bind to the resize event when orientationChange is not natively supported.
• scrollstart：Triggers when a scroll begins. Note that iOS devices freeze DOM manipulation during scroll, queuing them to apply when the scroll finishes. We're currently investigating ways to allow DOM manipulations to apply before a scroll starts.
• scrollstop：Triggers when a scroll finishes.

參考: http://forum.jquery.com/topic/mobile-events-documentation