jQuery Mobile 手動顯示ajax加載器

在jquery mobile開發中，常常須要調用ajax方法，異步獲取數據，若是異步獲取數據方法因爲網速等等的緣由，會有一個反應時間，若是能在點擊按鈕後數據處理期間，給一個正在加載的提示，客戶體驗會更好一些。

先看兩個方法，顯示和關閉，方法來自於參考：http://blog.csdn.net/zht666/article/details/8563025

<script>  
//顯示加載器  
function showLoader() {  
    //顯示加載器.for jQuery Mobile 1.2.0  
    $.mobile.loading('show', {  
        text: '加載中...', //加載器中顯示的文字  
        textVisible: true, //是否顯示文字  
        theme: 'a',        //加載器主題樣式a-e  
        textonly: false,   //是否只顯示文字  
        html: ""           //要顯示的html內容，如圖片等  
    });  
}  
  
//隱藏加載器.for jQuery Mobile 1.2.0  
function hideLoader()  
{  
    //隱藏加載器  
    $.mobile.loading('hide');  
}  
</script>  

而後在ajax中調用：

//獲取進度
function InsertStatus(matterID, obj) {
    var a = $(obj).parent().parent().parent();
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: "/ToDoList/InsertStatus/?matterID=" + matterID,
        beforeSend: function () {         
            showLoader();
        },
        complete:function(){       
            hideLoader();
        },
        success: function (msg) {
            if (msg > 0) {
                $("#popdiv").text("獲取進度成功");
            } else {
                $("#popdiv").text("獲取進度失敗");
            }
            //彈出提示信息
            $("#GettingProgress").attr('data-rel', 'dialog');
            $("#GettingProgress").trigger('create');
            $("#popdiv").popup("open");
            setTimeout(function () { $("#popdiv").popup("close"); }, 2000);
        }
    });

}

這樣就能夠在數據處理過程當中，有加載中的效果。

 

參考：http://www.cnblogs.com/hiflora/p/3816212.html

http://blog.csdn.net/zht666/article/details/8563025