En este ejemplo se muestra un puzzle de 9 trozos de una imagen. Están colocados en tres líneas de tres trozos.
el puzzle se resuelve cambiando el orden e los trozos en una lista. El método sortable() de jQuery UI permitirá mover los cuadrados de sitio.
Es la misma calculadora del módulo anterior (Módulo 5) pero a la que se ha variado su aspecto con algunos estilos css.
Su lógica y funcionamiento es el mismo, al que se le ha a añadido en la parte inferior una pantalla para una memoria auxiliar.
Con los botones toM y fromM agregamos la cifra de la pantalla superior a la pantalla de la memoria y viceversa. Lo mismo podemos hacer arrastrando y soltando los números entre las pantallas, con las funciones de draggable y droppable de JQuery UI.
Una cita es una frase de un autor conocido. Esta aplicación muestra un carrusel de citas en el que vemos una cita cada dos segundos. La botonera inferior indica la cita que se está mostrando y se puede cambiar la cita clicando en ella. Se añade un desplegable para añadir, modificar o borrar citas.
Los cajetines del desplegable se rellenan con el contenido de los campos del objeto mostrado.
Al abrir el desplegable se para el carrusel En la imagen mostrada.
Esta aplicación se desarrollará en módulos posteriores.
En esta aplicación se le añade al carrusel de citas editable del módulo 7, la funcionalidad de guardar la base de datos serializada en JSON en localStorage, de forma que al cargar la aplicación en un navegador, esta deberá detectar si existe una base de datos de citas almacenada en localStorage. Si es así deberá presentar el contenido de localStorage en vez de las citas de la galería incluidas en el código de la aplicación.
De esta forma los cambios realizados a la base de datos inicial de citas (edición, añadir o borrado) quedarán guardados en localStorage y estarán disponibles cuando se vuelva a abrir la aplicación en ese mismo navegador.
Se añade además un botón que regenere las citas iniciales de la aplicación, eliminando los cambios introducidos.