Actually i can call this code
$(":input").attr("disabled",true); //Di开发者_如何学Csable 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.
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
Working sample here
A simple way I've just found is to use a fixed background with z-index and opacity:
Add this 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 <html> element when the loading spinner is shown.
And add this element in your body:
<div class="ui-loader-background"> </div>
example : http://jsfiddle.net/5GB6B/1/
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
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:
.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;
}
Docs:
- http://jquerymobile.com/demos/1.0b1/docs/api/methods.html
Show the page loading message, which is configurable via $.mobile.loadingMessage. Example:
//cue the page loader
$.mobile.showPageLoadingMsg();
Hide the page loading message, which is configurable via $.mobile.loadingMessage. Example:
//cue the page loader
$.mobile.hidePageLoadingMsg();
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论