jquery mobile,显示加载叠加时禁用所有按钮

Question

其实我可以调用这段代码

$(":input").attr("disabled",true); //Disable all input fields

禁用我页面上的所有按钮.但是当我在页面上有很多按钮时,我不知道性能有多好.

我看到一个技巧,我们创建一个加载指示器覆盖,这是页面上的所有元素=>用户不能再点击按钮了

有没有办法重用jquery mobile的加载覆盖来存档上面的技巧？我不擅长CSS,所以希望有人可以帮助我.

谢谢

编辑:

我最终使用jQuery的jquery.blockUI插件,它按预期工作.我从jquery mobile添加了带css的默认div,这样我仍然有jquery mobile的加载消息和我想要的行为

在这里工作样本

Answer 1

我刚刚找到的一个简单方法是使用具有z-index和opacity的固定背景:

添加此css:

.ui-loader-background {
    width:100%;
    height:100%;
    top:0;
    margin: 0;
    background: rgba(0, 0, 0, 0.3);
    display:none;
    position: fixed;
    z-index:100;
}

.ui-loading .ui-loader-background {
    display:block;
}

ui-loader-background是一个自定义类,但是当加载显示时,JQM会添加ui-loading.

而这个元素在你体内:

<div class="ui-loader-background"> </div>

示例:http://jsfiddle.net/5GB6B/1/

Answer 2

在我的情况下,我使用:

$("body").addClass('ui-disabled');
$.mobile.loading("show",{
text: "Cargando",
textVisible: true
});

显示加载自定义消息并禁用整个页面.

当您完成任务后,您需要:

$.mobile.loading("hide");
$("body").removeClass('ui-disabled');

希望能帮到你