Yahoo! Blog User Interface (YUIBlog)

Na Galeria 3 YUI: O Módulo Carrossel

O que é um carrossel?

Um controle Carrossel oferece um widget para navegar entre um conjunto de objetos, como vestidos verticalmente ou horizontalmente em uma região de página sobrecarregado. A metáfora do "carrossel" deriva de uma analogia com slide carrosséis, nos dias de fotografia do filme, o controle do carrossel pode manter a fidelidade a essa metáfora, permitindo uma navegação contínua circular através de todos os blocos de conteúdo.

O carrossel é parte de uma família de widgets que permitem a "sobrecarga" um espaço na página, dando mais conteúdo para esse espaço que se encaixa dentro suas dimensões, proporcionando um mecanismo fácil e intuitiva para o usuário a descobrir e navegar o conteúdo adicional . Acordeões, Tabs, Árvores e ScrollViews são outros exemplos deste género.

Por outro controle de carrossel?

YUI 3 precisa de uma solução robusta, rica em carrossel recurso (como fizemos no YUI 2 ). O objetivo do projeto para este carrossel foi torná-lo enxuto e limpo e adicionar configurações adicionais através de plugins, aproveitando YUI 3 ' s apoio intrínseco a modularidade para preservar a leveza e velocidade.

YUI Framework Widget 3

Uma das maiores vantagens de escrever widgets personalizados usando YUI 3 é o quadro Widget (mais informações sobre o quadro Widget: manual do utilizador , profundidade vídeo de introdução em ). Comparando o carrossel em YUI 2.8.2 para o meu YUI 3 Galeria do carrossel , o YUI versão 3 é magra e elegante. Isto porque a maior parte do trabalho pesado no que diz respeito ao fornecimento da fundação fornecendo conjunto comum de atributos widget, um ciclo de vida disciplinada, suporte melhoria progressiva, etc vêm com a classe Widget.

O YUI 3 quadro Widget também fornece um padrão MVC consistente que promove a cada elemento a adotar métodos de separação de estado versus métodos de atualização da interface do usuário. Isso torna o código muito limpo e sustentável. Na verdade este é um dos fatores importantes porque o YUI 3 Carrossel é melhor do que seu primo YUI anteriores 2-based.

O YUI 3 Plugin modelo permite aos desenvolvedores adicionar novas funcionalidades ou modificar o comportamento existente em objetos. Isso permite adicionar funcionalidade adicional no topo do carrossel dinamicamente puxar elementos através de Ajax, etc Então, o YUI 3 Carrossel não tem código da animação cozido para ele, mas eu criei um plugin que adiciona suporte de animação para os casos onde é necessário . Isso ajuda a manter o componente muito leve.

Um carrossel Galeria de seu próprio site

Depois de ler sobre o que é um carrossel e como ela pode ajudar você a melhorar seu site, espero que sinta vontade de sujar as mãos. Não se preocupe com a nossa Galeria 3 YUI extensão Carrossel, implementação de um carrossel em seu site é tão fácil como o fornecimento de uma lista com marcadores em HTML. Isso não é apenas um passo de vendas - é assim que recentemente integrou um carrossel na Galeria dos Esportes Yahoo! Página Resultados da Pesquisa.

Um exemplo simples

Vamos começar com um exemplo simples que irá abranger quase tudo que você precisa saber. A maneira mais fácil para você usar a nova Galeria de Carrossel é deixar YUI 3 automagicamente carregá-lo a partir da rede do Yahoo de entrega de conteúdo. Lembrando que é um carrossel, uma lista rolável de itens, criamos uma lista em HTML. Nós incluímos a lista em uma div, que permite aos nossos JavaScript para mais facilmente encontrar e trabalhar com ele. Se você já tem alguns dados que são representados de uma forma de lista como na sua marcação, você também pode apenas colocar o div carrossel em torno dele e testar a sua sorte! É muito importante dizer que, apesar de estarmos usando um exemplo da imagem aqui, você pode usar Galeria carrossel para qualquer coisa que você quiser!

  class="carousel" div id="container">
   <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> 

Agora que temos os nossos dados para trabalhar, nós queremos melhorar a aparência, mostrando todos os cinco itens usando o widget do carrossel. Supondo que você já estiver usando YUI 3 esta é uma tarefa simples. A única coisa que talvez você não tenha visto antes, dependendo da profundidade que foram cavando YUI 3 e na Galeria do passado, é que nós estamos precisando de uma versão Galeria explicitamente. Isso é necessário porque estamos usando um widget novo, que não está incluindo na Galeria de construir esse carregador YUI tenta carregar de por padrão. No entanto, como YUI e YUI Galeria madura, isso não será mais necessário no futuro, quando o padrão número de compilação está sendo aumentada.

  YUI ({gallery: "gallery-2010.10.20-19-33 '})
  . Utilizar ("galeria" carrossel "," galeria carrossel-anim "," substituto ", função de (Y) {
   var = new Y. carrossel carrossel ({BoundingBox: "# container",
    Contentbox: "# ol> container"});
   carousel.plug (Y. CarouselAnimPlugin, animação {{velocidade: 0.7}});
   carousel.render ();
 }); 

(By the way, se você estiver interessado em obter novas coisas do tipo, pode visitar o YUI 3 Galeria repositório no github ou garfo de Gopal , onde desenvolve carrossel. Se você encontrar um bug, estamos sempre dispostos a ouvir sobre isso.)

De volta ao nosso exemplo ... YUI vai levá-lo a partir daqui. O carregador puxa automaticamente Galeria carrossel e suas dependências a partir da entrega do Yahoo rede de conteúdo. Depois disso, o carrossel está sendo inicializado e exibidos. O usuário pode clicar na seta esquerda ou direita para percorrer. Por favor, perdoe-me por trazer em uma linha de complexidade desnecessária, mas eu não pude resistir. Eu usei Y.CarouselAnimPlugin deixar o nosso slide carrossel suavemente de uma página para outra em vez de apenas exibir a próxima página instantaneamente. Sinta-se livre para brincar com o parâmetro de velocidade, se desejar.

Como você pode ver na imagem acima, o carrossel está instalado e funcionando. No entanto, a CSS pode não se encaixam muito bem para o resto de sua página. Isso nos leva à nossa próxima seção, onde vamos discutir como personalizar Galeria carrossel.

Personalizar Carrossel Galeria

Agora que você tem o seu carrossel funcionando e identificado um caso de uso de seu site, esperamos que você deseja integrá-lo sem problemas. Como mencionado anteriormente, fizemos isso para nossa Esportes Search Results Page. Se você quiser aumentar o número de itens visíveis, por exemplo, de três para quatro, você pode fazer isso modificando a linha que instancia carrossel.

  var = new Y. carrossel carrossel ({BoundingBox: "# container",
  Contentbox: "# container ol>", numVisible: 4}); 

Ainda não está bom o suficiente? Sim, certo. Felizmente CSS nos permite adicionar as nossas definições de estilo próprio e até mesmo substituir as iniciais sem tocar em nenhum CSS existente. Então o primeiro passo será, provavelmente, para remover as bordas, pois eles são muito intrusivos. Basta adicionar o seguinte CSS para o cabeçalho da página.

  . YUI 3 carrossel {
   border: none importante;!
 }
 . YUI 3-nav {carrossel
   background: none importante;!
 }
 . Carrossel ol li {
   border: none importante;!
 } 

Agora, que parece melhor. Eu usei também uma margem negativa de reduzir o fosso entre o meu carrossel eo título. No entanto, ainda não estamos completamente lá. Eu suponho que você também quer usar seus próprios botões personalizados, que integram perfeitamente em seu layout de página. Para este exemplo vamos utilizar os mesmos botões que também são utilizados nas páginas do Yahoo resultado da pesquisa. Isso requer um pouco mais, mas ainda simples, CSS.

  . YUI 3-button-carrossel {
   background: url ("sprite_button.png") no-repeat scroll 0 0 transparente importante;!
   height:! 20px importante; width: 28px importante;!
 }
 . YUI 3-carrossel-nav-item {
   background: url ("sprite_button.png") no-repeat scroll 0 0 transparente importante;!
   background-position:-133px 0 importante;!
 }
 . YUI 3-carrossel-primeiro-botão {
   background-position: 0-90px importante;!
   margem direita: 35px importante;!
 }
 . YUI 3-carrossel-primeiro-botão com deficiência {
   background-position: 0-60px importante;!
   margem direita: 35px importante;!
 }
 . YUI 3-carrossel-next-botão {
   background-position: 0-30px importante;!
 }
 . YUI 3-carrossel botão deficientes {
   background-position: 0 0 importante;!
 }
 . YUI 3-carrossel-nav-item selecionado {
   background-position:-121px 0 importante;!
 } 

Vamos deixar isso para que hoje e espero que você sinta pronto para começar. Pelo menos isso era tudo que precisávamos. No entanto, dependendo do quão grande é o seu site e como você está interessado em seu desempenho, há considerações gerais sobre como colocar algo de uma terceira rede de distribuição de conteúdo do partido, que também se aplica aqui. Por exemplo, Sidnei da Silva apresentou algumas ideias interessantes em um post no início deste mês. Nós ficaríamos felizes em proporcionar um How To que explica como um widget YUI e suas dependências podem ser movidos para seu próprio site, ou mesmo rede de distribuição de conteúdo, assim você será capaz de manter o número de requisições HTTP o mais baixo possível. Deixe-nos saber se você está interessado, estamos ansiosos pela sua opinião!

Mais para explorar na Galeria

A excelente equipe de Eduardo Lundgren e Cavanaugh Nate de Liferay têm um componente do carrossel na Galeria de bem - certamente vale a pena conferir se você está no mercado para este tipo de controle.

Pesquisar conversas: Bloglines | technorati

Compartilhe e ampliar: Bookmark com del.icio.us | digg it! | reddit!