Question

实际上我可以调用此代码

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

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

我看到了一个技巧，我们创建了一个加载指示符叠加层，它高于页面上的所有元素=＆gt;用户无法再点击按钮

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

由于

编辑：

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

Working sample here

Answer 1

我刚刚发现的一种简单方法是使用具有z-index和不透明度的固定背景：

添加此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');

希望帮助你

Answer 3

我对Xorax提供的工作解决方案做了一个小编辑，将加载程序背景移动到浏览器窗口的最左侧，因为我在Chrome浏览器中发现有一些区域没有完全覆盖：

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

Answer 4

文件：

http://jquerymobile.com/demos/1.0b1/docs/api/methods.html

显示页面加载消息，可通过$ .mobile.loadingMessage配置。例如：

//cue the page loader           
$.mobile.showPageLoadingMsg();

隐藏页面加载消息，可通过$ .mobile.loadingMessage配置。例如：

//cue the page loader           
$.mobile.hidePageLoadingMsg();

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

4 个答案: