Interfaz de usuario de Yahoo! Blog (YUIBlog)

En el YUI 3 Galería: El módulo de carrusel

¿Qué es un carrusel?

Un control de Carrusel proporciona un widget para la navegación entre un conjunto de objetos, como dispuestas horizontal o verticalmente en una región sobrecargada la página. El "carrusel", la metáfora se deriva de una analogía para deslizar los carruseles en los días de fotografía de la película, el control del carrusel puede mantener la fidelidad a esta metáfora, permitiendo una navegación continua y circular a través de todos los bloques de contenido.

El Carrusel es parte de una familia de widgets que permiten la "sobrecarga", un espacio en la página, ofreciendo más contenidos para que el espacio del que cabe dentro de sus dimensiones la vez que proporciona un mecanismo sencillo e intuitivo para el usuario de descubrir y navegar por el contenido adicional . Acordeones, aquí, árboles y ScrollViews son otros ejemplos de este género.

¿Por qué otro control de Carrusel?

YUI 3 necesita una sólida y rica en Carrusel (como hemos hecho en YUI 2 ). El objetivo de diseño para este carrusel era hacer que lo apoye y limpiar y agregar configuraciones adicionales a través de plugins, aprovechándose de YUI 3 ' s de apoyo para la modularidad intrínseca para conservar la ligereza y la velocidad.

YUI 3 Widget Marco

Una de las mayores ventajas de escribir controles personalizados utilizando YUI 3 es el marco Widget (más información sobre el marco Widget: la guía del usuario , en profundidad la introducción de vídeo ). Comparando el Carrusel en YUI 2.8.2 a mi YUI 3 Galería Carrusel , el YUI versión 3 es simple y elegante. Esto se debe a la mayor parte del trabajo pesado con respecto al suministro de la fundación proporciona un conjunto común de atributos del widget, un ciclo de vida disciplinada, el apoyo a la mejora progresiva, etc vienen con la clase Widget.

El marco Widget YUI 3 también proporciona un consistente patrón MVC, que promueve cada widget para adoptar los métodos de separación de Estado frente a otros métodos de actualización de la interfaz de usuario. Esto hace que el código muy limpio y fácil de mantener. De hecho, este es uno de los factores importantes por las que el YUI 3 Carrusel es mejor que su anterior YUI 2-basado primo.

El YUI 3 Plugin modelo permite a los desarrolladores añadir nuevas funcionalidades o modificar el comportamiento existente en objetos. Esto permite agregar funcionalidad adicional en la parte superior del carrusel para sacar de forma dinámica elementos a través de Ajax, etc Por lo tanto, el carrusel de YUI 3 no tiene código de la animación se cocía en él, pero en cambio han creado un plugin que añade soporte de animación para los casos donde se necesita . Esto ayuda a mantener el componente de peso muy ligero.

Un carrusel de galería para su propio sitio web

Después de leer acerca de lo que un carrusel es y cómo puede ayudarle a mejorar su sitio web, que esperamos se sienten dispuestos a ensuciarse las manos. No te preocupes, con nuestra YUI extensión de 3 Galería Carrusel, la aplicación de un carrusel en su sitio web es tan sencillo como proporcionar una lista con viñetas en HTML. Eso no es sólo un argumento de venta - que es la forma en que se ha integrado recientemente un carrusel en la Galería de Yahoo! Search Deportes Página de resultados.

Un ejemplo sencillo

Comencemos con un ejemplo sencillo que cubrirá casi todo lo que necesitas saber. La forma más fácil para que usted pueda utilizar la nueva Galería Carrusel es dejar que YUI 3 automágicamente se carga desde la red de Yahoo de entrega de contenido. Recordando lo que un carrusel es decir, una lista desplazable de elementos, creamos una lista en HTML. Se incluye la lista en un div, que permite a nuestro JavaScript para encontrar y trabajar con él. Si ya dispone de algunos datos que se representa de una manera similar a la lista en el marcado, es posible que también acaba de poner el div carrusel alrededor de ella y poner a prueba tu suerte! Es muy importante decir que, a pesar de que está utilizando una imagen de ejemplo aquí, usted puede utilizar para la Galería Carrusel todo lo que quieras!

  <div class="carousel" id="contenedor">
   <ol>
     <li> <img src="img/c1.jpg"> </ li>
     <li> <img src="img/c2.jpg"> </ li>
     <li> <img src="img/c3.jpg"> </ li>
     <li> <img src="img/c4.jpg"> </ li>
     <li> <img src="img/c5.jpg"> </ li>
     </ Ol>
 </ Div> 

Ahora que tenemos nuestros datos para trabajar, queremos mejorar el aspecto, mostrando los cinco elementos con el widget de Carrusel. Suponiendo que usted ya está usando YUI 3 es una tarea sencilla. La única cosa que es posible que no haya visto antes, dependiendo de la profundidad que han estado cavando en YUI 3 y la Galería en el pasado, es que estamos especificando una versión de la Galería de forma explícita. Esto es necesario porque estamos usando un nuevo widget, que no está incluido en la Galería de construir ese gestor de YUI intenta cargar de forma predeterminada. Sin embargo, como YUI y YUI Galería madura, esto no será necesario hacer eso en el futuro cuando el valor por defecto el número de compilación se ha incrementado.

  YUI ({gallery: la galería-20.10.2010-19-33 '})
  . Uso ("galería carrusel", "galería carrusel anim", "sustituto", la función (y) {
   var = nuevo carrusel de Y.Carousel ({boundingBox: "# contenedor",
    contentBox: "contenedor # ol>"});
   carousel.plug (Y.CarouselAnimPlugin, {animación: {velocidad: 0.7}});
   carousel.render ();
 }); 

(Por cierto, si usted está interesado en obtener material nuevo se puede visitar el repositorio de YUI 3 Galería en github o tenedor Gopal , donde desarrolla Carrusel. Si usted encuentra un error, siempre estamos encantados de oír hablar de eso.)

Volviendo a nuestro ejemplo ... YUI lo tomará de aquí. El cargador extrae automáticamente Galería Carrusel y sus dependencias desde la red de Yahoo de entrega de contenido. Después de eso, el carrusel se inicializa y se muestra. El usuario puede hacer clic en la flecha izquierda o derecha para desplazar la imagen. Por favor, perdóname por traer una línea de una complejidad innecesaria, pero no me pude resistir. Yo Y.CarouselAnimPlugin a dejar que nuestro carrusel de diapositivas sin problemas de una página a otra en lugar de sólo mostrar la página siguiente instante. Siéntase libre para jugar con el parámetro de velocidad si lo desea.

Como se puede ver en la imagen anterior, el carrusel está en marcha. Sin embargo, la CSS no podría encajar muy bien en el resto de tu página. Esto nos lleva a nuestra siguiente sección, donde vamos a discutir cómo personalizar Galería Carrusel.

Personalización de la Galería Carrusel

Ahora que usted tiene su carrusel en marcha y se identificaron un caso de uso para su sitio web, que esperamos para poder integrarse a la perfección. Como se mencionó anteriormente, lo hicimos por nuestra página de resultados de búsqueda Deportes. Si desea aumentar el número de elementos visibles, por ejemplo, de tres a cuatro, puede hacerlo mediante la modificación de la línea que crea una instancia del carrusel.

  var = nuevo carrusel de Y.Carousel ({boundingBox: "# contenedor",
  contentBox: "contenedor # ol>", numVisible: 4}); 

Todavía no lo suficientemente bueno? Sí, claro. Por suerte CSS nos permite añadir nuestras propias definiciones de estilo e incluso sobrescribir los iniciales sin tocar ningún CSS existente. Así que su primer paso probablemente será la eliminación de las fronteras, porque son bastante molestas. Sólo tiene que añadir el siguiente CSS para el encabezado de página.

  . YUI 3-carrusel {
   la frontera: no importante;
 }
 . YUI 3-carrusel-nav {
   de fondo: no importante;
 }
 . Carrusel ol li {
   la frontera: no importante;
 } 

Ahora, que se ve mejor. También he utilizado un margen negativo de reducir la brecha entre mi y el carrusel de la partida. Sin embargo, aún no estamos completamente allí. Supongo que usted también desea utilizar sus propios botones personalizados, que se integran perfectamente en el diseño de la página. Para este ejemplo vamos a utilizar los mismos botones que se utilizan también en las páginas de Yahoo de resultados de búsqueda. Esto requiere un poco más, pero sigue siendo sencilla, de CSS.

  . YUI 3-carrusel botón {
   de fondo: url ("sprite_button.png") no-repeat scroll 0 0 transparentes importante;
   altura: 20px importante; ancho:! 28px importante;
 }
 . YUI 3-carrusel-nav-elemento {
   de fondo: url ("sprite_button.png") no-repeat scroll 0 0 transparentes importante;
   ! background-position: 0-133px importante;
 }
 . YUI 3-carrusel de primer botón {
   ! background-position: 90px 0-importante;
   margin-right: 35px importante;
 }
 . YUI 3-carrusel de primer botón-disabled {
   ! background-position: 60px 0-importante;
   margin-right: 35px importante;
 }
 . YUI 3-carrusel-next-botón {
   ! background-position: 30px 0-importante;
 }
 . YUI 3-carrusel-button-disabled {
   background-position: 0 0 importante;!
 }
 . YUI 3-carrusel-nav-elemento seleccionado {
   ! background-position: 0-121px importante;
 } 

Dejaremos a la de hoy y espero que te sientas listo para comenzar. Al menos eso era todo lo que necesitábamos. Sin embargo, dependiendo de cuán grande es su sitio y cómo interesado está usted en su desempeño, hay ideas generales sobre la carga de algo de una red de distribución de contenidos de terceros que también se aplican aquí. Por ejemplo, Sidnei da Silva expuesto algunas ideas interesantes en su blog a principios de este mes. Estaríamos encantados de proporcionar a ¿Para que explica cómo un widget YUI y sus dependencias se pueden mover a su propio sitio web o red de distribución, incluso el contenido, por lo que son capaces de mantener el número de peticiones HTTP un precio tan bajo como sea posible. Háganos saber si usted está interesado, esperamos sus comentarios!

Más para explorar en la Galería

El excelente equipo de Eduardo Lundgren y Nate Cavanaugh de Liferay tiene un componente del carrusel en la Galería y - sin duda vale la pena ver si estás en el mercado para este tipo de control.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!