jquery移动端，显示加载覆盖时禁用全部按钮
jquery移动端，显示加载覆盖时禁用全部按钮
提问于 2011-07-06 21:42:06
实际上我可以调用这段代码
$(":input").attr("disabled",true); //Disable all input fields禁用我页面上的所有按钮。但是当我的页面上有很多按钮时，我不知道性能有多好。
我看到了一个技巧，我们创建了一个加载指示器覆盖，这是最重要的元素在页面上，=>用户不能再点击按钮
有没有办法重用jquery mobile的加载覆盖来归档上面的技巧？我不擅长CSS，所以希望有人能帮助我。
谢谢
编辑：
我最终使用了jQuery的jquery.blockUI插件，它的工作效果与预期一致。并且我添加了来自jquery mobile的带有css的默认div，这样我仍然拥有jquery mobile的加载消息和我想要的行为。
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-08-03 23:13:59
我刚刚发现的一种简单方法是在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>Stack Overflow用户
发布于 2013-06-04 06:18:20
在我的例子中，我使用：
$("body").addClass('ui-disabled');
$.mobile.loading("show",{
text: "Cargando",
textVisible: true
});显示加载自定义消息并禁用整个页面。
当你完成你的任务时，你需要：
$.mobile.loading("hide");
$("body").removeClass('ui-disabled');希望能帮助你
Stack Overflow用户
发布于 2013-07-25 16:12:02
我对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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6597388
复制相关文章
相似问题