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

【问题标题】：Jquery mobile popup with loading spinner带有加载微调器的 Jquery 移动弹出窗口
【发布时间】：2014-01-13 13:03:02
【问题描述】：

弹出窗口延迟很长时间才能加载到设备中。

如何在 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');
    });
});

谢谢

【问题讨论】：

标签： javascript android jquery jquery-mobile

【解决方案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

【讨论】：

很酷，不过我想用jquery mobile自带的spinner。

【解决方案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

【讨论】：