Bloquear la interfaz de usuario con JQUERY

Jquery, al igual que prototype es una librería de Javascript con la cual podemos hacer miles de efectos que dan un toque especial a nuestra web. En este post mostraremos un efecto muy usado y útil de jquery.

Este efecto es bloquear la interfaz de usuario, y se usa cuando hacemos peticiones ajax que van a requerir cierto tiempo para que el usuario no la interrumpa o siga dándole al botón creando nuevas peticiones y sea consciente de que la pagina está recogiendo información y no saturada/colgada.

Para hacer eso necesitaremos primero incluir la librería jquery:

script1

Esta función permite recibir parámetros, como que se muestre un mensaje o cambiar las características de la capa. Ejemplos:

Poner un mensaje:

script2

Ya sabemos bloquear la interfaz, pero ahora nos interesa poder desbloquearla una vez terminen los procesos que se tienen que ejecutar. Esto lo haremos con la función “$.unblockUI();”.

Normalmente la llamaremos cuando recibamos la respuesta ajax, pero aquí os dejo un ejemplo simplemente para que probéis la funcionalidad, se bloqueara la pagina en el momento de ser cargada y tras unos segundos se desbloqueara.

script3

Espero que les pueda ser de utilidad.

 

blockui

Comments are closed.