En este módulo vamos a introducirnos en todo lo referente a jQuery, consta de 3 unidades. Éste es el módulo más importante del curso, ya que junto con los dos módulos anteriores, se puede hacer de todo o casi de todo. Como vimos con HTML5 y CSS3 tenemos las etiquetas y estilos para crear páginas web totalmente. Pero, ¿y si además de eso, podemos jugar con las etiquetas, añadir elementos, texto, código...etc? Pues ahí esta la potencia de jQuery.
Bueno, lo primero que tenemos que tener en cuenta que lo que se pretende con esta actividad no es hacer una calculadora en sí, sino, hacer creer al usuario de tu web tiene una calculadora, pero nosotros solo tenemos los elementos HTML, así que tendremos que ingeniárnosla un poco.
No es necesario hacer todas las partes de la actividad, es decir, lo de controlar activar, desactivar las cosas, dependiendo de como te sientas, solo con hacer que pulses los botones y haga las operaciones sobra. Como opcional sería el resto: control de flujo, que cuando pulse aquí se activen, que guarden en la memoria...etc.
¿Cómo puedo hacer los botones? Pues mira, puedes usar los propios botones de un formulario, puedes usar div, article o cualquier otro elemento que quieras. Lo bueno de usar botones que si los quieres poner disable, hay una propiedad exclusiva.
Si pulsas aquí tienes un ejemplo de cómo la puedes usar, por lo que me interesa más que la revises, entiendes y no sé, añade otra función que se te ocurra y con eso sobraría, es decir, no quiero que te agobies con esta actividad, sino que veas el potencial que tiene jQuery.
En esta actividad se solicita de forma optativa que se realice una animación usando un encolado de efectos usando jQuery. Normalmente esa parte no suele dar muchos problemas para resolverlo, pero en cambio con la barra de progreso suele "atascarse" más porque existen diferentes soluciones. Puedes ver una ayuda al respecto descargando el siguiente archivo.
Otro detalle que suele dar quebraderos de cabeza es añadir estilos propios o distintos a los elementos, recuerda que podemos poner lo siguiente en el archivo miarchivojquery.js o como le hayas llamado:
$( "input[type=submit], input[type=reset], input[type=text], a, button" ).button();
Y en el HTML, en nuestro formulario, tendremos que declarar las cosas de esa forma:
Recuerda revisar los ejemplos de la unidad jQuery UI para más información