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

带加载微调器的Jquery移动弹出窗口

2 个答案: