Javascript jquery mobile，显示加载覆盖时禁用所有按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6597388/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery mobile, disable all button when loading overlay is showed
提问by Peacemoon
Actually i can call this code
其实我可以调用这个代码
$(":input").attr("disabled",true); //Disable all input fields
to disable all buttons on my page. But i don't know how good is the performance when i have a lot of button on my page.
禁用我页面上的所有按钮。但是当我的页面上有很多按钮时，我不知道性能有多好。
I saw a trick that we create a loading indicator overlay, which is above all element on the page => user can not click on the buttons anymore
我看到了一个技巧，我们创建了一个加载指示器覆盖层，它首先是页面上的所有元素 => 用户不能再点击按钮了
is there any way to reuse the loading overlay of jquery mobile to archive the above trick? I'm not good at CSS so hopefully someone can help me.
有没有办法重用jquery mobile的加载覆盖来存档上述技巧？我不擅长 CSS 所以希望有人可以帮助我。
Thanks
谢谢
Edited:
编辑：
i ended up with using jquery.blockUI plugin for jQuery and it works as expected. And i added the default div with css from jquery mobile so that i still have the loading message of jquery mobile and the behaviour that i wanted
我最终为 jQuery 使用了 jquery.blockUI 插件，它按预期工作。我从 jquery mobile 添加了带有 css 的默认 div，这样我仍然有 jquery mobile 的加载消息和我想要的行为
回答by Xorax
A simple way I've just found is to use a fixed background with z-index and opacity :
我刚刚发现的一种简单方法是使用带有 z-index 和 opacity 的固定背景：
Add this css :
添加这个 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 is a custom class, but ui-loading is added by JQM to the when the loading is showed.
ui-loader-background 是一个自定义类，但是 ui-loading 是由 JQM 添加到显示加载时的。
And this element in your body :
你身体里的这个元素：
<div class="ui-loader-background"> </div>
example : http://jsfiddle.net/5GB6B/1/
回答by technology_dreamer
In my case I use:
在我的情况下，我使用：
$("body").addClass('ui-disabled');
$.mobile.loading("show",{
text: "Cargando",
textVisible: true
});
Shows loading custom message and disable the entire page.
显示加载自定义消息并禁用整个页面。
When you've finish your task, then you need to:
完成任务后，您需要：
$.mobile.loading("hide");
$("body").removeClass('ui-disabled');
Hope helps you
希望能帮到你
回答by Got Hima
I've made a small edit to the working solution provided by Xorax to move the loader background to the leftmost of the browser window as I noticed in my Chrome browser there was some area not fully covered:
我对 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;
}
回答by Phill Pafford
Docs:
文档：
Show the page loading message, which is configurable via $.mobile.loadingMessage. Example:
显示页面加载消息，可通过 $.mobile.loadingMessage 配置。例子：
//cue the page loader
$.mobile.showPageLoadingMsg();
Hide the page loading message, which is configurable via $.mobile.loadingMessage. Example:
隐藏页面加载消息，可通过 $.mobile.loadingMessage 配置。例子：
//cue the page loader
$.mobile.hidePageLoadingMsg();
