jQuery Mobile，当加载覆盖层显示时禁用所有按钮

Question

jQuery Mobile，当加载覆盖层显示时禁用所有按钮

17

实际上，我可以调用这段代码。

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

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

我看到一个技巧，我们可以创建一个覆盖在页面所有元素上方的加载指示器叠加层 => 用户无法再点击按钮了。

是否有办法重用jquery mobile的加载叠加层来实现上述技巧？我不擅长CSS，希望有人能帮忙。

谢谢

编辑：

我最终使用了jQuery的jquery.blockUI插件，并且它按预期工作。并且我添加了来自jquery mobile的默认div和css，因此我仍然拥有jquery mobile的加载消息和我想要的行为。

这里有一个可工作的示例

- Peacemoon

4个回答

14

在我的情况下，我使用：

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

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

完成任务后，您需要：

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

希望能对你有所帮助

- technology_dreamer

3

如果您对包含禁用元素的主体进行操作，则加载元素也将被禁用。因此，更好的方法是在一个div上添加和移除类，最终加载元素仍然处于启用状态（在视觉上）。无论如何，添加和移除“ui-disabled”类都对我有所帮助 :) - Bronek

1

我对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;
}

- Got Hima

-2

文档：

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();

- Phill Pafford

3

谢谢您的提问。我知道如何隐藏和显示加载消息。但我的问题是，当这个消息被显示时，用户仍然可以点击页面上的按钮。我想知道如何在显示此消息时有效地禁用所有按钮。 - Peacemoon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Xorax · Accepted Answer

我刚刚发现的一个简单方法是使用具有固定背景、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是自定义类，但当显示加载旋转图标时，ui-loading会被JQM添加到<html>元素中。

在你的元素中添加这个元素:

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

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