Jquery移動彈出式加載微調器

Question

彈出窗口延遲很長時間才能加載設備。

如何在jquery mobile中顯示彈出窗口之前顯示加載微調器？

這是我的代碼的簡化版本：

HTML

<div data-role="page" id="fixed_numbers"> 
    <div data-role="header"> 
     <a href="#" data-icon="back" data-rel="back" data-role="button">Back</a> 
     <h1>Header</h1>     
    </div> 
    <div data-role="content"> 
     <div id="dlg_fix" data-role="popup" data-theme="a" data-overlay-theme="a"></div> 
     <a href="#" id="fix_num_btn" data-value="test">Click Here!</a> 
    </div> 
</div> 

的Javascript

$(document).on("pageinit", "#fixed_numbers", function() { 

    $("#fixed_numbers").on("click", "#fix_num_btn", function(e) { 
     e.preventDefault(); 
     // value receive a data from input hidden 
     var value = $(this).attr("data-value"); 
     $('#dlg_fix').html(value).popup('open'); 
    }); 
}); 

感謝

Answer 1

$(document).on("pageinit", "#fixed_numbers", function() { 

    $("#fixed_numbers").on("click", "#fix_num_btn", function(e) { 

     $.mobile.showPageLoadingMsg(); 

     e.preventDefault(); 
     // value receive a data from input hidden 
     var value = $(this).attr("data-value"); 
     $('#dlg_fix').html(value).popup('open'); 

    }); 
}); 

see more page loading msg options from jQuery Mobile

Answer 2

試試這個：

$("#fixed_numbers").on("click", "#fix_num_btn", function(e) { 

    e.preventDefault(); 

    $.mobile.showPageLoadingMsg(); //Show Sipnner 
    var value = $(this).attr("data-value"); 
    $('#dlg_fix').html(value).popup('open'); 

}); 

添加popupafteropen事件監聽器，這將隱藏微調時，彈出窗口將被打開。

$('#dlg_fix').on('popupafteropen', function (e) { 
$.mobile.hidePageLoadingMsg(); 
}); 

live demo

更多的彈出式的事件，看看JQM文檔 jqm docs - popup events