Share
Lo creas o no, ¡hay una gran cantidad de interactividad poderosa que puedes traer a tu sitio usando javascript además de los menús de navegación hábiles! ¡Este tutorial te ayudará a encontrar tu vaca interior al presentarte una de las bibliotecas de JavaScript más poderosas y modulares: MooTools! Crearemos una herramienta flexible para resaltar los productos o servicios de su sitio utilizando el marco de JavaScript de MooTools. Además, conozca algunas de las muchas razones por las que MooTools podría ser la biblioteca javascript correcta para todos sus proyectos futuros.!
Así que aquí está lo que estamos construyendo, es un mecanismo inteligente de rollover que funciona realmente bien como resaltador de productos..
Sé lo que estás pensando ... ¿Qué podría tener que ofrecer MooTools para que pueda romper mi larga relación con jQuery-O Prototype y Scriptaculous?!
Uno de los mayores problemas con los que me he topado con el uso de jQuery en el pasado es el hecho de que muchos de sus complementos se crean y desarrollan de forma independiente, lo que SIGNIFICA es que confía en un desconocido para que actualice activamente su complemento. a medida que la biblioteca jQuery continúa lanzando versiones más nuevas y más nuevas. Cuando esto falla (y muchas veces lo hace), se encontrará a sí mismo buscando la versión correcta de la biblioteca central que permitirá que su script funcione correctamente.!
Tal vez Prototype y su conocido socio en el crimen, Scriptaculous, sean más su estilo. En este caso particular, se verá privado de su derecho de modularidad, y se verá obligado a incluir dos bibliotecas de gran tamaño en todas sus páginas, o en algunos casos también un archivo de complemento.!
Entonces, si MooTools es tan bueno entonces ... ¿por qué no se usa más? ¿Por qué no hay millones de tutoriales y libros en cada estante de la biblioteca? Hay un puñado de razones:
Sin embargo, encontrará amplias herramientas para trabajar con áreas más exclusivas de scripting, como el análisis de archivos JSON, las cookies y la incrustación flash para nombrar algunos. Además, una conveniente página de descarga que le permite elegir exactamente lo que necesita para su proyecto para que pueda garantizar el menor tamaño de archivo posible.
¡Dirígete a la página de MooTools Core Builder! Para este proyecto en particular, querrá seleccionar Fx.Morfo, Elemento.Evento, DomReady, y Selectores y pulsa "Descargar" usando YUI Compressor. Todas las dependencias son elegidas automáticamente para usted. Sea consciente, ya que ciertos navegadores agregarán una extensión '.txt' a un archivo javascript para su protección. Obviamente, será necesario eliminarlo, y siéntase libre de recortar algunos de los caracteres robustos en el nombre del archivo.
Cree el documento HTML que utilizará para este proyecto y adjunte la biblioteca de MooTools. El encabezado de mi página se ve algo así:
Mootools - Aspectos destacados del producto! ...
Eche un vistazo a los siguientes estilos y HTML para ver cómo he diseñado la página..
Código CSS:
Código HTML:
Observe cómo tengo el HTML presentado. No utilizaré ID para seleccionar ninguno de los elementos de la página o de la burbuja, y en su lugar, crearé matrices de todos los elementos que contienen las dos clases, lo que permitirá que esta secuencia de comandos se amplíe, independientemente de cuántos elementos elija para resaltar. Todas las burbujas y páginas están contenidas en una envoltura que está absolutamente posicionada dentro de la envoltura del sitio (que contiene nuestro fondo donde todo esto está encima).
Comenzaremos creando una función de envoltorio para nuestro código javascript que coloca un detector de eventos en el objeto de la ventana, disparando una vez que el DOM está cargado y listo. Esto es importante porque necesitamos que nuestra secuencia de comandos comience a modificar inmediatamente el DOM una vez que esté disponible.
Si NO usamos esta función de envoltura, es muy probable que obtenga errores que afirman que ciertos elementos no existen. Otra opción podría ser colocar el javascript incrustado al final del cuerpo del documento. Sin embargo, si decide adjuntar la secuencia de comandos externamente, se encontrará con este problema una vez más, por lo que es un buen hábito entrar ahora!
Otra opción para 'domready' es usar 'load' que se activará una vez que la página (imágenes incluidas) esté completamente cargada. No queremos esto para este proyecto en particular porque significa que las imágenes (como nuestras burbujas) pueden parpadear en la pantalla antes de ser ocultadas por nuestro script..
Otra cosa importante a tener en cuenta: si decide vincular este script desde un archivo '.js' externo, querrá asegurarse de que lo vincule DESPUÉS de haber vinculado la biblioteca de MooTools en el encabezado del documento..
Accentsconagua
window.addEvent ('domready', function () …); A continuación, comenzaremos creando las matrices para nuestros elementos de página y de burbuja y estableceremos algunos estilos iniciales en línea..
window.addEvent ('domready', function () // Crear variables (en este caso, dos matrices) que representan nuestras burbujas y páginas var myPages = $$ ('. page'); var myBubbles = $$ ('. bubble' ); // Establece la opacidad de las burbujas en cero para que estén ocultas inicialmente // y activa la visibilidad de su contenedor en myBubbles.setStyle ('opacity', 0); $ ('bubbleWrap'). SetStyle ('visibilidad', 'visible')); Finalmente, adjuntaremos a los oyentes de eventos a los íconos de la página para disparar efectos de variación en sus burbujas correspondientes. Tenga en cuenta que el orden de las burbujas según lo establecido en el HTML es el MISMO orden de los iconos de la página. Esto es importante!
window.addEvent ('domready', function () // Crear variables (en este caso, dos matrices) que representan nuestras burbujas y páginas var myPages = $$ ('. page'); var myBubbles = $$ ('. bubble' ); // Establece la opacidad de las burbujas en cero para que estén ocultas inicialmente // y activa la visibilidad de su contenedor en myBubbles.setStyle ('opacity', 0); $ ('bubbleWrap'). SetStyle ('visibilidad', 'visible') // Agregue nuestros eventos a las páginas myPages.each (función (el, i) / * Aquí cambiamos la propiedad predeterminada de 'enlace' a 'cancelar' para nuestros efectos de variación, lo que garantiza que los efectos se interrumpan cuando el mouse se va y entra para comenzar de inmediato el efecto de transformación que se llama * / el.set ('morph', link: 'cancel'); el.addEvents ('mouseenter': function () myBubbles [i]. morph ('opacity': 1, 'margin-top': '-15px');, 'mouseleave': function () myBubbles [i] .morph ('opacity': 0, 'margin-top ': 0);););); Notará que estamos adjuntando una función usando el método each () a todos los elementos de la matriz 'myPages'. Y para cada función pasamos en 'el', que representa el elemento de página, y 'i', que es un número entero que representa la ubicación de ese elemento de página dentro de su matriz. Usamos la variable 'i' para llamar al efecto de variación en el elemento de burbuja apropiado y correspondiente dentro de la matriz 'myBubbles'.
¡Y eso es! Bastante indoloro ¿no? ¡Asegúrese de ver la demostración de trabajo, y también marque la página MooTools Docs y la página de descarga de MooTools para referencia futura! Espero que este tutorial haya sido útil, y espero armar algo un poco más avanzado en un futuro cercano utilizando el poder de las clases de MooTools.!
