Efectos Javascript
06/12/2011
Efectos Javascript en ataStore
Efectos Javascript
Podemos aumentar la facilidad de uso de las páginas y sus efectos visuales mediante javascript.
Sin embargo, por motivos de accesibilidad e indexación en buscadores, las páginas deben seguir funcionando correctamente si el cliente no dispone de javascript en su navegador.
Para ello, usaremos la técnica conocida como javascript no obstructivo o mejora progresiva.
JQuery
Usaremos JQuery como librería de javascript. JQuery proporciona una sintaxis para escribir de manera concisa funcionalidad javascript que funcione en diferentes navegadores.
Además, el subproyecto JQuery-UI proporciona diversos componentes gráficos (calendarios, pestañas, acordeones, etc.).
Atributos de Thymeleaf
Siempre que podamos, simplificaremos la creación del código encapsulándolo en un atributo de thymeleaf. Esto permitirá reutilizar código y que nuestras páginas HTML queden más sencillas.
jquery:ajax
El atributo jquery:ajax añade funcionalidad AJAX a un enlace. Cuando añadimos dicho atributo en un enlace, la página destino se carga en segundo plano, sin recargarse la página completa.
En el siguiente ejemplo vemos cómo modificar un enlace para que la página se cargue asíncronamente y su contenido se muestre en una ventanita (dialog). Para ello como valor del atributo pondremos _blank
En el siguiente ejemplo vemos cómo modificar un enlace para que la página se cargue asíncronamente y su contenido se muestre en un div. Para ello como valor del atributo pondremos el id del div destino.
Si no queremos que se cargue toda la página, sino sólo una parte de ella, añadiremos, separado por una coma, el id de la parte de la página que queremos que se cargue. Por ejemplo, si en la página hay un div con id contentId pondremos lo siguiente:
Éste será el caso habitual cuando no queremos cargar los elementos head y body de la página.
jquery:eachTabs
Podemos combinar el uso del atributo th:each con el atributo jquery:eachTabs para mostrar el resultado de cada una de las iteraciones en una pestaña de jQuery-UI
Ejemplo de uso:
...
El valor del atributo jquery:eachTabs será el id que tenga el contenedor div generado.
jquery:tabs
Convierte un conjunto de div en pestañas de jQuery-UI
Ejemplo de uso:
...
...
...
jquery:fancybox
Añade un efecto de carga dinámica de imágenes usando Fancybox.
Ejemplo de uso:
Ejemplo de uso (galería de imágenes):
Notas:
- El parámetro title es opcional.
- Si hay más de un enlace, automáticamente se agrupan en una galería de imágenes.
- Los enlaces no pueden contener el atributo rel, pues Fancybox usa este atributo y da un error si ya existe.
jquery:ckeditor
Enriquece una caja de texto con el editor de texto enriquecido CKEditor.
La configuración de CKEditor, incluyendo los botones que aparecen, está hardcoded en el propio atributo. Se podría externalizar o recibir por parámetro.
Ejemplo de uso:
jquery:datepicker
Muestra el componente de JQuery-UI DatePicker de selección de fecha mediante calendario.
Ejemplo de uso:
jquery:toggle
Convierte el elemento en un botón que muestra u oculta el siguiente elemento.
El valor del atributo nos dice si inicialmente estará oculto o no el elemento.
Ejemplo de uso:
Recordar contraseña
jquery:multitoggle
Hace que, al cambiar el valor de un select, se oculten y se muestren determinados elementos.
El valor del atributo debe ser una lista de los ids de los elementos que se van a mostrar u ocultar, en el mismo orden que las opciones del select. Por ejemplo, si seleccionamos la tercera opción del select, se mostrará el tercer elemento de la lista y se ocultarán los demás.
Ejemplo de uso:
Lorem ipsum...
Lorem ipsum...
jquery:autocomplete
Crear un componente de autocompletado usando una fuente de datos remota.
Recibe 3 parámetros.
- El primero es la URL de donde obtener los datos.
- El segundo es el elemento donde se seteará el valor elegido.
- El tercero es un booleano que nos dice si sólo permite valores del autocompletado o no.
jquery:tooltip
Convierte el atributo title de los elementos de un formulario en ayudas tipo "tooltip".
Ejemplo de uso:
jquery:warnonexit
Muestra un aviso cuando se intenta salir o cerrar la página. El aviso no se muestra si es pulsa el botón de submit del formulario.
El argumento que se pasa debe ser una clave de internacionalización con el mensaje de aviso.
No funciona en todos los navegadores, pues el evento 'onbeforeunload' no es estándar.
Ejemplo de uso:
...
