Usando el maravilloso complemento jFlow

Parece que la obsesión de la industria del diseño web en este momento es la capacidad de crear una "sección destacada". Si bien una vez puede haber requerido mucha habilidad, ese ya no es el caso. En este screencast, te mostraré cómo crear fácilmente una sección destacada desplazable usando uno de los temas populares de Theme Forest como referencia. Vamos a entrar en eso!




* Lo siento por la calidad de audio menos que perfecta. Quería tomar un micrófono de condensador esta semana, pero he estado muy ocupado. Prometo que me encarguen de eso lo antes posible. Además, si está interesado en crear tutoriales en video para nosotros, envíeme un correo electrónico a [email protected].

Puedes ver y comprar el tema de Justin aquí.

Descargar el plugin

Como siempre con un nuevo complemento, el primer paso es visitar el sitio web del creador y descargar el complemento. Todo lo que necesitará es un pequeño archivo de JavaScript y, por supuesto, una copia de la biblioteca principal de jQuery. Mientras esté en el sitio, tómese unos minutos para repasar los conceptos. Se sorprenderá de lo sencilla que es la implementación, ¿hablando relativamente (o escribiendo?).

Implementación

Una vez que haya guardado el archivo Javascript en su disco duro, importe en una nueva aplicación web como.

  

* Tenga en cuenta que debe importar la biblioteca central antes de jFlow. De lo contrario, obtendrá algunos errores evidentes!

Para usar el complemento jFlow, deberá comprender la función de algunos ID y clases..

  • div # controlador: Este elemento servirá como nuestro "gancho" al llamar a nuestro jQuery.
  • .jFlowControl: Estos vanos serán hijos del #controller div. Para todas las diapositivas que tenga, debe crear etiquetas de intervalo asociadas con esta clase. Por ejemplo, si tuviera cinco diapositivas, debo tener cinco etiquetas con una clase de .jFlowControl. Lo entenderás más por ejemplo, en breve..
  • div # diapositivas: Dentro del div diapositivas, debe anidar divs adicionales que contengan el contenido deseado para cada "diapositiva". Más sobre esto más adelante.
  • .jFlowPrev, .jFlowNext: Estas dos clases le permiten continuar a la siguiente diapositiva, o viceversa.

Documento HTML de muestra

 
No 1 No 2 Numero 3
Anterior Siguiente

Aquí hay una imagen destacada. Bonito!

Aquí hay otra imagen destacada. Bonito!

Aquí hay una última imagen destacada muy interesante. Bonito!

Vamos a repasar esto un poco.

  • Como con la mayoría de las páginas, hemos envuelto todo nuestro contenido en un elemento "wrap". Esto es puramente por razones estéticas. No es requerido.
  • En mi controlador div (que es el gancho para jFlow), he añadido tres etiquetas span con una clase de "jFlowControl". Piense en estos vanos como pestañas. Si hace clic en "No 3", pasará rápidamente al tercer asociado "diapositiva". Recuerde, la cantidad de etiquetas de intervalo que tiene debe ser igual a la cantidad de divs dentro de su div "deslizante". Tenga en cuenta que ambos tienen tres.
  • Avanzando, ahora llegamos a un div con un id de "prevNext". Esta no es una identificación clave, podría haberla llamado Rick si hubiera querido. Es simplemente un div envoltorio para que pueda controlar dónde van mis botones "Siguiente" y "Anterior" en la página. Sin embargo, el nombre de clase de las imágenes es importante: 'jFlowPrev', 'jFlowNext'.
  • Por último, llegamos a la div "diapositivas". Dentro de este div, colocaremos divs de niños. Cada uno de estos niños servirá para ser una "pestaña".. Una vez más, tenga en cuenta que si quisiera agregar una cuarta imagen, también necesitaría una etiqueta adicional "jFlowControl" dentro del div controlador.

jQuery

El código que tenemos que escribir es bastante simple. Primero, revise el guión final, y luego repasaré cada línea.

 $ (función () $ ("# controller"). jFlow (diapositivas: "#slides", ancho: "980px", altura: "313px", duración: 600););

Eso es!. Primero, estamos a la espera de que el documento esté listo para ser recorrido. Luego, tomamos nuestro controlador div y llamamos al método "jFlow". Hay muchos parámetros disponibles para nosotros, pero solo usaremos algunos.

  • Diapositivas: Pregunta: "¿Cuál es el nombre del elemento div que contiene cada diapositiva o pestaña? Lo asociaremos con el div" diapositivas "apropiado que creé anteriormente. Pero puede cambiarlo si lo desea..
  • Ancho, Altura: Estos son necesarios. En este ejemplo, solo estoy usando imágenes. Como resultado, he establecido los valores de ancho y alto iguales a los de las imágenes.
  • Duración: En milisegundos, ¿durante cuánto tiempo desea que pase la transición de diapositiva a diapositiva? He fijado 600 - que es aproximadamente la mitad de un segundo.

Estás terminado

Lo único que querrás implementar es un estilo CSS. Sin embargo, jFlow funcionará perfectamente sin él. Eso obviamente solo sería por razones estéticas. Si deseas más información, repaso el estilo un poco más en el screencast.

Lo único que querrás implementar es un estilo CSS. Sin embargo, jFlow funcionará perfectamente sin él. Eso obviamente solo sería por razones estéticas. Si deseas más información, repaso el estilo un poco más en el screencast.


El diseño que se ve arriba es intencionalmente simple. Te lo dejo a ti para que imagines todos los diferentes usos.!

Hace unas semanas, Chris Coyier creó un tutorial sobre un complemento similar: "codaSlider". Personalmente, he usado el complemento en un par de proyectos, sin embargo, he encontrado que jFlow es mucho más simple y fácil de usar. De cualquier manera, ambos son potentes complementos. Úsalos sabiamente.

Suscríbete a los screencasts semanales.

Puede agregar nuestra fuente RSS a sus podcasts de ITUNES haciendo lo siguiente:

  1. Una vez que se haya cargado ITUNES, haga clic en la pestaña "Avanzado"
  2. Elija "Suscribirse a Podcast"
  3. Ingrese "http://feeds.feedburner.com/NETTUTSVideos"

¡Deberias hacer eso! El screencast también se podrá buscar en ITUNES en las próximas veinticuatro horas.

Recursos adicionales

  • jFlow Plugin

    Este es el sitio de inicio del plugin jFlow. Le ayudará a comenzar con el archivo Javascript junto con algunos ejemplos útiles..

    Visita la página web

  • ThemeForest

    Si desea obtener más información o simplemente ganar algo de dinero extra, asegúrese de visitar ThemeForest.net..

    Visita la página web

  • Fun Dynamic con Simple Pie y jQuery - Tutorial de control deslizante Coda

    Echa un vistazo a otro plugin de jQuery que realiza una función similar. En este tutorial, Chris Coyier te mostrará cómo puedes implementar el plugin coda slider para crear un blogroll hermoso.

    Lee el artículo

    • Suscríbase a la fuente RSS de NETTUTS para obtener más artículos y artículos de desarrollo web diarios..