jquery-mobile - 加载相对于 jQuery 移动对话框的微调器

Question

$.mobile.loading是否可以在 jQuery 移动对话框中拥有一个由 调用的加载微调器，并使其相对于该对话框的位置？

Answer 1

这是不可能的，但你可以用一种 hacky 的方式来做到这一点：

1. 在pageinit对话框中，克隆<div/>with.ui-loader类。

   var loader = $(".ui-loader").clone();
   

2. 然后将其添加到我们的对话框中，如下所示：

   $page.find('[data-role="content"]').html(loader); //$page is the dialog
   

3. 创建一个名为.ui-loader-altered并添加position:relative到它的类。将类添加到对话框内的加载器。这将使加载程序留在对话框中。

   $page.find(".ui-loader").addClass("ui-loader-altered");
   

4. 既然你有了对话框，为什么不显示呢？

   $page.find(".ui-loader-altered").show();
   

完整代码：

$(document).on("pageinit", "#second", function () {
    $page = $(this);
    $(this).on("click", "#show", function () {
        //clone
        var loader = $(".ui-loader").clone();
        //add to dialog
        $page.find('[data-role="content"]').html(loader);
        //add class which makes dialog position relative to div
        $page.find(".ui-loader").addClass("ui-loader-altered");
        //show it up
        $page.find(".ui-loader-altered").show();
    })

});

演示：http: //jsfiddle.net/hungerpain/P2XJt/3/