Menu
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.
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
988
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/
92
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
14
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
