jQuery移动,显示加载覆盖时禁用所有按钮。

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (91)

其实我可以调用这个代码

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

禁用我的页面上的所有按钮。但是当我在页面上有很多按钮时,我不知道表现有多好。

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

有没有什么方法可以重用jquery mobile的加载覆盖来归档上述技巧?我不擅长CSS,所以希望有人能帮助我。

提问于
用户回答回答于

我刚刚发现的一个简单方法是使用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。

这个元素在你的body中:

<div class="ui-loader-background"> </div>
用户回答回答于

在我的例子中,我使用:

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

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

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

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

扫码关注云+社区

领取腾讯云代金券