jQuery Mobile, botón Desactivar todo cuando la carga de superposición se mostró

Question

hecho, me puede llamar a este código

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

para desactivar todos los botones de mi página. Pero no sé qué tan bueno es el rendimiento cuando tengo muchos botones en mi página.

vi un truco que se crea una superposición indicador de carga, que está por encima de todo elemento de la página => usuario no puede hacer clic en los botones más

¿hay alguna manera de volver a utilizar la superposición de carga de jQuery Mobile para archivar el truco anterior? No soy bueno en CSS, así que espero que alguien pueda ayudarme.

Gracias

Editado:

que terminó con el uso de jquery.blockUI plug-in para jQuery y funciona como se esperaba. Y añadí el div defecto con css de jQuery Mobile por lo que todavía tengo el mensaje de carga de jQuery Mobile y el comportamiento que quería

Working sample here

Answer 1

Una forma sencilla que acabo de descubrir es el uso de un fondo fijo con z-index y opacidad:

Añadir esta 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 es una clase personalizada, pero la carga de la interfaz de usuario se agrega a JQM cuando se muestra la carga.

Y este elemento en su cuerpo:

<div class="ui-loader-background"> </div> 

ejemplo: http://jsfiddle.net/5GB6B/1/

Answer 2

Docs:

• http://jquerymobile.com/demos/1.0b1/docs/api/methods.html

Muestra el mensaje de carga de página, que se puede configurar a través de $ .mobile.loadingMessage. Ejemplo:

//cue the page loader   
$.mobile.showPageLoadingMsg(); 

ocultar el mensaje de carga de la página, que es configurable a través de $ .mobile.loadingMessage. Ejemplo:

//cue the page loader   
$.mobile.hidePageLoadingMsg(); 

Answer 3

En mi caso uso:

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

muestra la carga mensaje personalizado y desactive toda la página.

Cuando haya terminar su tarea, entonces necesita:

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

Esperanza le ayuda

Answer 4

He hecho una pequeña edición en la solución de trabajo proporcionada por Xorax para mover el fondo del cargador a la izquierda de la ventana del navegador como noté en mi navegador Chrome había un área no completamente cubierta:

.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; 
}