javascript - fuerzas - principio de superposicion electrostatica

jquery mobile, deshabilita todo el botón cuando se muestra la superposición de carga

Question

En realidad puedo llamar a este código

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

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

Vi un truco que creamos una superposición de indicador de carga, que es, sobre todo, elemento en la página => el usuario ya no puede hacer clic en los botones

¿Hay alguna forma de reutilizar 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:

Terminé usando el complemento jquery.blockUI para jQuery y funciona como se esperaba. Y agregué el div predeterminado con css de jquery mobile para que yo todavía tenga el mensaje de carga de jquery mobile y el comportamiento que quería

Muestra de trabajo aquí

Answer 1

Documentos:

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

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

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

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

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

Answer 2

Una forma sencilla que acabo de encontrar es utilizar un fondo fijo con z-index y opacidad:

Agrega este 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 se agrega ui-loading por JQM al momento en que se muestra la carga.

Y este elemento en tu cuerpo:

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

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

Answer 3

En mi caso yo uso:

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

Muestra cargar un mensaje personalizado y deshabilitar toda la página.

Cuando hayas terminado tu tarea, entonces necesitas:

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

Hope te ayuda

Answer 4

He hecho una pequeña edición de la solución de trabajo proporcionada por Xorax para mover el fondo del cargador a la parte superior izquierda de la ventana del navegador, ya que noté que en mi navegador Chrome había un área que no estaba 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;
}