Yahoo! Blog User Interface (YUIBlog)

YUI Preview Release 3.3.0 3

No YUIConf em novembro lançamos uma prévia do YUI 3.3.0, o nosso próximo grande lançamento no 3 YUI codeline . Estamos agora a nossa versão pré-lançamento em terceiro lugar, e se você tiver algum tempo durante as férias de inverno para nos ajudar a chutar os pneus Adoraríamos para você dar uma olhada. Você pode usar o YUI arquivo semente 3.3.0pr1 do CDN para começar, baixar a distribuição de YUILibrary.com , ou verificar a distribuição 3.3.0pr3 hospedado no YUIBlog (nota: o desempenho é bastante lento em YUIBlog devido à falta de combinação manuseio; certeza de que seus CDN-driven implementações geralmente será mais rápido do que o uso 3.2.0 correspondente).

Algumas coisas novas para procurar nesta versão:

• all-new AutoComplete (beta)
• todos os novos gráficos (beta) , alimentadas por SVG, lona e VML
• all-new DataTable (beta) , o início de uma atualização mais modular do popular YUI 2 componentes
• controle Dial nova (beta) , um inovador assumir um controle da faixa finita ou deslizante criado por designer de Jeff Yahoo! Conniff
• novíssimo utilitário Resize (beta) , fornecido por Eduardo Lundgren de Liferay, co-autor com Nate Cavanaugh do YUI 3 baseados AlloyUI extensões disponíveis na Galeria 3 YUI . (Você pode conhecer Eduardo e Nate neste turbilhão AlloyUI turnê baleado YUIConf 2010 .)

Há muito mais o amor sobre YUI 3.3.0, e nós vamos estar compartilhando mais informações como a data se aproxima GA. No momento, estamos apontando para uma janela de lançamento na segunda semana de janeiro. Congratulamo-nos com a sua opinião sobre a visualização na YUI fóruns e em banco de dados de bilhete se você encontrar assuntos de interesse quando você testar sua própria implementação com a nova versão.

Encontrar conversas: bloglines | technorati

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

YUILibrary.com em manutenção (actualização: back up agora)

Atualize 12:32 2010/12/21: De volta a funcionar - deixe-nos saber se você vê quaisquer problemas.

Tomamos YUILibrary.com baixo esta manhã para manutenção. Esperamos que esta obra para durar 4-6 horas. Pedimos desculpas pelo inconveniente e vamos tentar manter o tempo de inatividade o mais curto possível.

Se você tem perguntas de suporte urgentes, entretanto, considerar o abandono pelo canal # yui na Freenode.net, onde muitas vezes você vai encontrar dezenas de membros da comunidade YUI ajudando umas às outras.

YUIBlog e @ YUILibrary será executado atualizações quando o site está de volta.

Encontrar conversas: bloglines | technorati

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

YUI 2.9.0 Update Release

Na próxima semana a equipe YUI começará o planejamento para a liberação 2.9.0 para ser enviado no segundo semestre do 1 º trimestre de 2011. YUI 2.9.0 será a última grande dot-lançamento do codeline 2.x, eo time será agressiva revisão de todos os bilhetes em aberto contra o 2 YUI projeto e quer atribuindo-lhes a ser uma parte da versão 2.9.0, fechando eles como "NÃO Fix", ou movê-los para o 3 YUI projeto.

A realidade de restrições de tempo e recursos nos obriga a concentrar-se em itens prioritários que irá proporcionar um encerramento para YUI 2.x e permitir-nos a redobrar os nossos esforços no desenvolvimento 3.x. Aqui estão alguns dos critérios que estaremos usando para guiar-nos a decidir o que deve ser incluído na versão 2.9.0:

• Questões que impactam negativamente os casos de uso essenciais.
• Questões emergentes relacionadas com lançamentos novos navegadores na matriz de grau.
• Melhorias e novas funcionalidades serão retiradas das priorizados para YUI 2 e considerado para YUI 3.

A transição da equipe de desenvolvimento YUI dois codelines paralelas para se concentrar unicamente no YUI 3 não significa o fim da 2 YUI projeto. Todos os actuais e futuros lançamentos YUI 2 continuará a ser hospedado no Yahoo! CDN, o YUI codebase 2 continuará a ser hospedado no GitHub, e gostaríamos de explorar com base na comunidade manutenção da YUI 2 no futuro.

À medida que continuamos o nosso processo de planejamento, estaremos ajustando nossa agenda, à procura de feedback da comunidade e comunicar atualizações de andamento ao longo do ciclo de lançamento.

Encontrar conversas: bloglines | technorati

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

Modo estrito Is Coming To Town

Este é o tempo e época em que pessoas de todo o mundo esquecer suas diferenças e se unirem em paz e comunhão para celebrar o primeiro aniversário da aprovação do ECMA Assembleia Geral da programação ECMAScript Idioma Standard Edition, Quinta. A característica mais importante na ES5 é o novo modo Strict. Modo Strict é um modo de opt-in que os reparos ou remove algumas das características mais problemáticas da língua.

Especificando o modo estrito

Há duas maneiras de solicitar modo estrito. O primeiro é a inserir este pragma

  "Use strict"; 

na parte superior de um ficheiro ou unidade de compilação. Deve aparecer antes de quaisquer outras declarações, mas pode ser precedido por espaço em branco e comentários. Ele tem a forma de uma declaração literal cadeia inútil, por isso vai ser ignorado pelo ES3 sistemas. Isto significa que é possível escrever ES5/strict programas que podem rodar também no navegadores mais antigos. Estrito código também pode interagir com código não-estrita (ou desleixado), assim funções estritas pode chamar funções desleixado, e funções desleixado pode chamar funções estritas. Este alto nível de compatibilidade faz adoção de modo estrito fácil.

Todo o código no arquivo ou unidade de compilação com o "use strict"; preâmbulo será processado como um código estrito. Há um problema, no entanto. considerações de desempenho actualmente obrigam-nos a concatenar arquivos JavaScript muitos juntos para evitar atrasos HTTP cumulativos. Se um arquivo com um "use strict"; preâmbulo tem o código desleixado anexado a ela, o código desleixado será processado como rigoroso e provavelmente irá falhar. Existe uma regra simples: Não misture rigorosa e desleixada no mesmo arquivo, mas já vimos alguns sites famosos se esta errado.

A segunda maneira é inserir o pragma é como a primeira declaração de uma função. Que declara que toda a função será rigorosa, incluindo as funções que estão aninhados dentro dele. Rigor âmbito função aspectos, código de modo rigoroso e código banal pode ser misturado no mesmo arquivo. Esta segunda forma funciona muito bem com o Módulo padrão e suas muitas variações. A segunda forma é preferida porque evita o risco de concatenação.

  (Function () {
    "Use strict";
    / / Esta função é rigorosa ...
 } ());

 (Function () {
    / / Mas esta função é desleixado ...
 } ()); 

Escopo

Historicamente, JavaScript tem sido confundido sobre como as funções são escopo. Às vezes, eles parecem ser estaticamente escopo, mas algumas características fazem com que se comportem como eles são dinamicamente escopo. Isso é confuso, tornar os programas difíceis de ler e entender. Mal-entendido faz com bugs. Também é um problema para o desempenho. Escopo estático permitiria variável de ligação a acontecer em tempo de compilação, mas a exigência de alcance dinâmico, a ligação deve ser adiada para a execução, que vem com uma penalidade de desempenho significativo.

Modo estrito requer que toda a vinculação variável ser feitas de forma estática. Isso significa que os recursos que antes exigiam ligação dinâmicas devem ser eliminados ou modificados. Especificamente, o com a afirmação é eliminado, eo eval capacidade função de mexer com o ambiente do seu chamador é severamente restrito.

Um dos benefícios do código estrito é que ferramentas como o YUI Compressor pode fazer um trabalho melhor quando processá-lo.

Implícitas variáveis ​​globais

JavaScript tem implicado variáveis ​​globais. Se você não declarar explicitamente uma variável, uma variável global é declarada implicitamente para você. Isso faz com que a programação mais fácil para iniciantes, pois eles podem negligenciar algumas de suas tarefas domésticas básicas. Mas faz a gestão dos programas de maior dimensão muito mais difícil e degrada significativamente a confiabilidade. Assim, no modo estrito, implícitas variáveis ​​globais não são mais criados. Você deve declarar explicitamente todas as suas variáveis.

Fuga global

Há um certo número de situações que podem causar this a ser ligado ao objecto global. Por exemplo, se você esquecer de fornecer o new prefixo ao chamar uma função de construtor, o construtor é this ficará obrigado inesperadamente para o objeto global, então ao invés de inicializar um novo objeto, ele vai estar em silêncio em vez adulteração de variáveis ​​globais. Nessas situações, o modo estrito, ao contrário, ligar this ao undefined , o que fará com que o construtor para lançar uma exceção em vez, permitindo que o erro seja detectado mais cedo.

Falha Noisy

JavaScript sempre teve propriedades somente leitura, mas você não podia criá-los até ES5 de Object.createProperty função exposta essa capacidade. Se você tentou atribuir um valor a uma propriedade somente leitura, seria falha silenciosamente. A atribuição não iria mudar o valor da propriedade, mas o programa continuaria como se tivesse. Este é um risco de integridade que pode causar programas para entrar em um estado inconsistente. No modo estrito, a tentativa de alterar uma propriedade somente leitura irá lançar uma exceção.

Octal

A representação octal (ou base 8) de números foi extremamente útil quando se faz a nível de máquina de programação em máquinas cuja palavra tamanhos foram um múltiplo de 3. Você precisava octal ao trabalhar com o CDC 6600 mainframe, que tinha um tamanho de palavra de 60 bits. Se você pudesse ler octal, você pode olhar para uma palavra como 20 dígitos. Dois dígitos representava o código operatório, e um um dígito identificado de 8 registros. Durante a lenta transição de códigos de máquina para linguagens de alto nível, ele foi pensado para ser útil para fornecer formas octais em linguagens de programação.

Em C, uma representação extremamente infeliz de octalness foi selecionado: zero à esquerda. Assim, em C, 0100 significa 64 não, 100, e 08 é um erro não, 8. Ainda mais infelizmente, esse anacronismo foi copiado em quase todas as línguas modernas, incluindo JavaScript, onde ele só é usado para criar erros. Ele não tem outra finalidade. Assim, no modo estrito, formas octais não são mais permitidas.

Et cetera

O arguments pseudo matriz torna-se um pouco mais de array como no ES5. No modo estrito, ela perde o seu callee e caller propriedades. Isso torna possível para passar seus arguments para código não confiável, sem dar um monte de contexto confidencial. Além disso, o arguments propriedade de funções é eliminada.

No modo estrito, chaves duplicadas em uma função literal irá produzir um erro de sintaxe. Uma função não pode ter dois parâmetros com o mesmo nome. Uma função não pode ter uma variável com o mesmo nome de um dos seus parâmetros. Uma função não pode delete as suas próprias variáveis. Uma tentativa de delete uma propriedade não-configurável agora lança uma exceção. Os valores primitivos não são implicitamente envolvido.

Se o seu programa passa JSLint , provavelmente vai funcionar no modo estrito.

Ainda é um mundo imperfeito

Há ainda problemas no JavaScript que modo estrito não aborda. Por exemplo, vírgula inserção ainda um perigo, e 0,1 + 0,2 ainda não é igual a 0,3. A correcção destes problemas terá que esperar para futuras edições.

Por Matéria modo estrito

Além dos benefícios óbvios para a confiabilidade do programa e facilitar a leitura, modo estrito está ajudando a resolver o problema Mashup. Nós queremos ser capaz de convidar código de terceiros em nossas páginas para fazer coisas úteis para nós e para nossos usuários, que sem dar o código de licença para assumir o navegador ou para deturpar-se ao usuário ou nossos servidores. Nós precisamos restringir o código de terceiros. Sistemas como Caja Google fazer isso, mas a um custo significativo no desempenho e inconveniência. Minha própria ADsafe sistema também faz isso, mas ao custo de eliminar this e [] subscrito a partir da linguagem, que pode tornar difícil a adopção. Modo estrito nos permite tornar o código de terceiros com a conveniência eo desempenho de ADsafe e da expressividade da Caja. Isso será muito importante como os nossos sites se tornam mais complexos e mais conectado.

Modo estrito não resolve o problema XSS. A solução para esse problema depende W3C tomar alguma ação positiva .

ES5/strict está agora em pré-estréias, e em breve será equipamento de série em todos os navegadores compatíveis com padrões em todos os lugares.

Encontrar conversas: bloglines | technorati

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

A propriedade position CSS

Esta propriedade se aplica a todos os elementos. Tem cinco valores possíveis:

• static
• relative
• absolute
• fixed
• inherit

posição: estática

De secção 9 modelo de formatação visual :

A caixa é uma caixa normal, dispostas de acordo com o fluxo normal . Os top , right , bottom e left propriedades não se aplicam.

Coisas para notar em esta demo

• A segunda caixa mostra exatamente onde seria sem a declaração de posição.
• O valor dado a top não se aplica porque, em um contexto de 'estático', o valor calculado de deslocamentos da caixa é sempre auto .

Coisas para lembrar

• Se a position propriedade de um elemento tem o valor de static , este elemento não é dito para ser posicionado.
• Devido static é o valor inicial (o valor por defeito), não há necessidade de incluir um estilo tal num bloco de declaração não ser que seja para substituir um valor diferente.

position: relative

De secção 9 modelo de formatação visual :

A posição da caixa é calculado de acordo com o fluxo normal (isto é chamado a posição em fluxo normal ). Em seguida, a caixa está deslocada relativamente à sua posição normal. Quando uma caixa B é posicionada relativamente, a posição da caixa que se segue é calculada como se B não foram compensados.

Coisas para notar em esta demo

• Caixa "dois" foi movido para baixo por 300 pixels, mas caixa de 'três', bem como os parágrafos seguintes permaneceu no lugar. Parece como se a caixa foi levantada a partir da página, deixando a sua pegada por trás. Isso ocorre porque uma caixa de compensação relativamente posicionado não perturbar o fluxo.
• Os relativamente posicionados sobrepõe caixa os seguintes elementos. Ela mostra na frente de outras caixas.

Coisas para lembrar

• Valores calculados são sempre para a esquerda =-direita e de cima = baixo. Se a direction do bloco de conteúdo é ltr , o valor de "esquerda" vitórias e 'direita' torna-se - 'esquerda'. Se direction do bloco de conteúdo é rtl , "certo" vitórias e "esquerda" é ignorado. Os autores poderiam tirar proveito de como as coisas funcionam através da criação de valor igual a propriedades opostas.
• Ao contrário do modelo de "absoluta", top , right , bottom e left propriedades não podem esticar nem encolher a caixa (que não pode mudar seu tamanho).

position: absolute

De secção 9 modelo de formatação visual :

A posição do caixa (e possivelmente do tamanho) é especificado com o top , right , bottom e left propriedades. Estas propriedades especificar deslocamentos em relação à caixa do bloco contendo . Uma caixa de posição absoluta é removido do fluxo normal inteiramente (isto não tem impacto sobre irmãos posteriores) e atribuída uma posição com respeito a um bloco que contém. Além disso, embora posicionados absolutamente caixas têm margens, eles não entrar em colapso com quaisquer outras margens.

Coisas para notar em esta demo

• Porque nenhuma caixa de deslocamento for especificado, caixa "dois" não se moveu de sua posição original, mas se tivéssemos usado top:0;left:0; por exemplo, se a casa estaria no canto superior esquerdo da janela de exibição .
• Wise Layout, é como caixa "dois" tinham sido decorados com display:none . A caixa foi removido a partir do fluxo.
• Com caixa "dois" fora do fluxo, caixa 'três' mudou-se contra a caixa de 'um' (os números seguiram).
• Como todos os elementos retirados do fluxo, caixa "dois" se horizontalmente devidamente embalados.

Coisas para lembrar

• Para qualquer elemento 'absoluta' ou 'fixo' posicionou o valor calculado para display é block .
• Para qualquer elemento 'absoluta' ou 'fixo' posicionou o valor calculado para float é none .
• A 'bloco contendo' é uma caixa que estabelece um contexto de posicionamento. É estabelecido pelo ancestral mais próximo com uma 'posição' de 'absoluta', 'relativa' ou 'fixo'. Isto significa que a caixa-mãe não pode ser o bloco de conteúdo .
• A posição padrão de uma caixa posicionada absolutamente não é sempre a mesma como se fosse com o estilo top: 0; left: 0; (em um contexto LTR). E isto por duas razões:
  1. O bloco que contém uma caixa posicionada é estabelecida pelo ancestral mais próximo posicionado, se não houver nenhum, o recipiente de referência é o elemento raiz. O bloco contendo em que os elementos de raiz vidas é um rectângulo chamado o bloco inicial que contém. Para meios contínuos, que tem as dimensões da janela (janela ou uma área de visualização no ecrã outro) e está ancorada na origem da lona. Este exemplo mostra a caixa de posicionado em relação ao visor (o bloco padrão contendo).
  2. O elemento é posicionado em referência à caixa de enchimento, não caixa, nem o teor de a caixa de fronteira do bloco. Este novo exemplo demonstra onde caixa 'dois' seria se as arestas da caixa de enchimento não tocam nas extremidades da caixa de conteúdo (o bloco contendo sendo body ).
• O tamanho da caixa pode ser o resultado da top , right , bottom , e left valores de propriedade. Para exemplos, zerando todas as propriedades vai fazer o trecho caixa para coincidir com as dimensões da caixa de preenchimento do seu bloco. Veja zerar todos os deslocamentos da caixa (nota: ie6 não esticar a caixa).
• Para criar uma sobreposição de máscara que não rola com o documento (como no exemplo anterior ), use fixed em vez de absolute ou estilo body com position:relative como o bloco de posicionamento inicial é o viewport (estilo html não funciona no IE) . Como esta demonstração de sobreposição mostra.
• position:absolute gatilhos haslayout .

A coisa mais importante para se lembrar

Porque este sistema de posicionamento remove caixas do fluxo, é considerado pratice ruim para usá-lo para layout.

position: fixed

De secção 9 modelo de formatação visual :

Posicionamento fixo é uma subcategoria de posicionamento absoluto. A única diferença é que, para uma caixa fixa posicionado, o bloco que contém é estabelecida pelo visor . Para mídia contínua , caixas fixas não se movem quando o documento é rolado. A este respeito, eles são semelhantes aos de imagens de fundo fixos . Para meios paginada (onde o conteúdo do documento é dividida em uma ou mais páginas discretas), caixas com posições fixas são repetidos em cada página. Isto é útil para a colocação, por exemplo, uma assinatura na parte inferior de cada página. Caixas com posição fixa, que são maiores do que a área da página são cortados. Peças da caixa de posição fixa, que não são visíveis no bloco inicial contendo não será impresso.

Coisas a serem observadas nesta demo :

• Desde posicionamento fixo é uma subcategoria de posicionamento absoluto, tudo o que era verdade para "absoluta" também é verdade para "fixo" (o elemento encolher de segredo, ele é removido do fluxo, etc.)
• A caixa está posicionado em relação ao visor, não se deslocar com a página.
• No IE 6, a caixa aparece como uma caixa estática , mas há um "engraçado" solução alternativa para isso.
• Ao imprimir o documento, a caixa "dois" aparece em cada página.

Coisas para lembrar:

• A posição da caixa é calculado de acordo com o modelo 'absoluto', mas, além disso, a caixa é fixada com respeito a alguma referência. No caso da projeção, portátil, tela, tty, e os tipos de mídia de TV, a caixa é fixada com relação à janela e não se move quando rolado.
• O conteúdo pode ser inaccessile para usuários com visão se parte da caixa está fora da área do visor.
• No caso de o tipo de impressão meios de comunicação, os autores podem quer evitar um elemento de aparecer em cada página impressa. Talvez usando uma regra @ media, como em:

    @ Media print { 
     # Logotipo {position: static;}
   } 

• Como position:absolute , position:fixed irá desencadear haslayout no IE.

posição: herdar

Se position:inherit é especificado para uma caixa de dado, então ele terá o mesmo valor calculado como a propriedade para o pai da caixa.

Observe que o IE 6 e 7 não suportam esta palavra-chave exceto quando usado com direction e visibility (veja o valor da propriedade CSS herdar ).

Coisas a considerar

Offsets Caixa

Esteja ciente de que para absolutamente fixas e caixas posicionadas, valores fixados em percentual para top , right , bottom e left são calculados de acordo com as dimensões do bloco que contém (o que não pode ser o da mãe).

'Posição' e 'estouro'

Uma caixa com o estilo overflow:hidden cortará relativamente elementos posicionados (caixas aninhadas), mas não iremos sempre esconder os posicionados absolutamente. Isso ocorre porque a caixa de pai nem sempre é o bloco de conteúdo (o ancestral mais próximo com uma 'posição' de 'absoluta', 'relativa' ou 'fixo').

Em resumo, isso significa que elementos posicionados absolutamente irá mostrar fora de uma caixa estilizada com overflow: hidden a menos que seu bloco de conteúdo é a própria caixa ou um elemento dentro da caixa, disse. Esta página de demonstração mostra como as coisas funcionam.

Margens

Os autores podem usar as margens em elementos independentemente do seu esquema de posicionamento.

O caso do IE

No IE, "posicionamento" de uma caixa pode ser uma bênção ou uma maldição:

• No IE6, position:relative (with haslayout) pode ser usado para prevenir uma caixa estilizada com margens negativas de ser cortada por um contêiner pai (veja como o posicionamento da caixa corrige esse problema).
• Posicionamento de um elemento pode "perturbar" o caminho pilha caixas no IE 6 e 7, pois isso pode estabelecer um novo contexto de empilhamento (veja um caso de teste ).

Ordem de empilhamento e empilhamento nível

• De acordo com a sequência em código fonte, caixas posicionados ficar em frente de flutuadores e caixas no fluxo normal.
• Os autores podem especificar níveis de pilha através da propriedade "z-index 'apenas em caixas posicionadas.
• No IE6 e 7, o simples fato de posicionamento de uma caixa pode estabelecer um contexto de empilhamento (ver acima, " o caso do IE ").

Os dispositivos móveis

Leia o artigo de PPK, o [sexta] o valor da posição , para descobrir por que os fabricantes de navegadores móveis não pode suportar position:fixed .

Outras leituras

• Modelo de formatação visual
• Posição (CSS propriedade)
• A declaração de posição

Uma analogia "fantasma" por DrLangbhani:

Um elemento com posição relativa é sempre deslocamento relativo à sua posição normal no fluxo. Em outras palavras, ela é deslocada em relação ao ponto em que seria em circunstâncias normais, e deslocando-o não afecta a disposição dos elementos em torno dele. É como um fantasma que deixou o seu corpo para trás. Um corpo que tem largura e altura e afeta seu entorno, mas é invisível. A caixa de espectral é capaz de se mover, mas é ainda ligado ao corpo de idade em que a sua posição ainda é medido a partir dele. Agora, um elemento com posição absoluta é ainda mais fácil. Já não afeta seus arredores em tudo (é puxado para fora do fluxo de layout). É agora um verdadeiro fantasma sem corpo deixado para trás. Tanto quanto seus elementos irmãos estão preocupados é como se ele não existe mais. Para obter a sua posição, olhar através de cada um dos elementos-mãe até encontrar um com um position: relative, [posição: fixo] ou position: absolute. Este elemento servirá como ponto de referência. Só se você não encontrar uma "posição" elemento vai ser compensado a partir do documento.

Encontrar conversas: bloglines | technorati

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

No YUI 3 Galeria: O Módulo de carrossel

O que é um carrossel?

Um controle Carrossel oferece um widget para navegar entre um conjunto de objetos como dispostas verticalmente ou horizontalmente em uma região de página sobrecarregado. A metáfora do "carrossel" deriva de uma analogia para deslizar carrosséis nos dias de fotografia do filme, o controle do carrossel podem manter a fidelidade a esta 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 que você "sobrecarga" um espaço na página, proporcionando mais conteúdo para que o espaço que se encaixa dentro de suas dimensões, proporcionando um mecanismo fácil e intuitiva para o utilizador descobrir e navegar pelo conteúdo adicional . Acordeões, Tabs, Árvores e ScrollViews são outros exemplos do gênero.

Porque ainda um outro controle do carrossel?

YUI 3 precisa de um robusto, Carousel característica-rico (como temos em YUI 2 ). O objetivo do projeto para este carrossel era fazê-lo inclinar-se e limpar 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 3 Quadro Widget

Uma das maiores vantagens de escrever widgets personalizados usando YUI 3 é o quadro Widget (mais sobre o quadro Widget: guia do utilizador , em profundidade introdução em vídeo ). Comparando-se o carrossel em YUI 2.8.2 para o meu YUI Carousel Galeria 3 , o YUI 3 versão é magra e elegante. Isto porque a maior parte do trabalho pesado no que diz respeito a fornecer o fundamento proporcionar 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 todos os widgets a adotar métodos de separação de estado contra métodos de atualização de interface do usuário. Isso torna o código muito limpo e sustentável. Na verdade este é um dos fatores importantes que explicam a YUI 3 Carrossel é melhor do que seu anterior YUI primo 2-based.

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

Um carrossel Galeria para seu próprio site

Depois de ler sobre o que é um carrossel e como ela pode ajudar você a melhorar seu site, esperamos que você se sente ansioso para sujar as mãos. Não se preocupe, com o nosso 3 Galeria YUI extensão do carrossel, a 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 de Esportes Página Yahoo! Search Results.

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 Carousel é deixar YUI 3 automagicamente carregá-lo a partir da entrega do Yahoo rede de conteúdo. Recordando o 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 ao nosso 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 simplesmente 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 Carousel Galeria de qualquer coisa que você quiser!

  <div class="carousel" 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, queremos melhorar a aparência, mostrando todos os cinco itens usando o widget do carrossel. Supondo que você já está usando YUI 3 esta é uma tarefa simples. A única coisa que você pode não ter visto antes, dependendo da profundidade que foram cavando YUI 3 e na Galeria, no passado, é que estamos especificando uma versão Galeria explicitamente. Isto é necessário porque nós 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 maduro, isso não será mais necessário no futuro, quando o padrão número de compilação está sendo aumentado.

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

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

Voltar ao nosso exemplo ... YUI irá levá-lo a partir daqui. O carregador puxa automaticamente Galeria Carousel e suas dependências a partir da entrega do Yahoo rede de conteúdo. Depois disso, o carrossel está a ser inicializado e exibidos. O usuário pode, então, clique na seta para a esquerda ou direita para percorrer. Por favor, perdoe-me para trazer uma linha de complexidade desnecessária, mas eu não pude resistir. Eu usei Y.CarouselAnimPlugin para deixar nosso slide carrossel sem problemas de uma página para o outro 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 encaixar muito bem para o resto de sua página. Isso nos leva à nossa próxima seção, onde vamos discutir como personalizar Carousel Galeria.

Personalizando Galeria Carousel

Agora que você tem o seu carrossel funcionando e identificou um caso de uso para o seu site, esperamos que você deseja integrá-lo sem problemas. Como mencionado anteriormente, fizemos isso para o nosso Esportes Página de Resultados. Se você quiser aumentar o número de itens visíveis, por exemplo 3-4, você pode fazê-lo, modificando a linha que instancia do carrossel.

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

Ainda não 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 fronteiras, porque eles são muito intrusivos. Basta adicionar o seguinte CSS para o cabeçalho da página.

  . YUI 3-{carrossel
   fronteira: nenhum importante;
 }
 . YUI 3-carrossel-nav {
   fundo: nenhum importante;
 }
 . Carrossel li ol {
   fronteira: nenhum importante;
 } 

Agora, que parece melhor. Também usei uma margem negativa para reduzir a lacuna 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 resultados de pesquisa. Isso requer um pouco mais, mas ainda assim simples, CSS.

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

Vamos deixá-lo para que, para 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á pensamentos gerais sobre como colocar algo de uma terceira rede de distribuição de conteúdo partido que também se aplica aqui. Por exemplo, Sidnei da Silva expôs alguns pensamentos interessantes em um blog no início deste mês. Nós ficaríamos felizes em proporcionar uma Como que explica como um widget YUI e suas dependências podem ser movidos para seu próprio site, ou rede de distribuição até mesmo o conteúdo, então você é capaz de manter o número de solicitações HTTP tão baixo quanto possível. Deixe-nos saber se você estiver interessado, estamos ansiosos para o seu feedback!

Mais para explorar na Galeria

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

Encontrar conversas: bloglines | technorati

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

YUI Theater - Ryan Grove: "Apresentando YUI 3 AutoCompletar" (42 min.)

Nesta palestra de YUIConf 2010 , YUI 3 autor AutoCompletar Ryan Grove ( @ yaypie ) leva você em uma excursão do remoinho de alguns dos muitos padrões de preenchimento automático possibilitado por esse componente (que está chegando no YUI prestes a ser lançado 3,3 0,0) e proporciona um mergulho profundo em sua nova e poderosa YQL integração, filtragem, e capacidades de destaque. (Nota: Se você gosta dessa conversa, você pode querer verificar para fora outra conversa Ryan excelente partir deste ano, " atingir o desempenho Zen com YUI 3 . ")

Se o vídeo incorporar abaixo não aparecer correctamente no seu leitor RSS de escolha, não se esqueça de clicar para assistir a versão de alta resolução do vídeo em YUI Theater .

• Download de vídeo HD (480p ~ 297MB)
• Download video (m4v)
• Baixe os slides

Outros vídeos Theater recentes YUI:

• Paul Donnelly e Nagesh Susarla: YQL + YUI: Construindo End-to-End Applications - Ao desenvolver widgets, não há como usar os dados YQL que surge como uma pergunta, mas sim como acessá-lo. Nesta sessão YUIConf 2010, YQL engenheiros Paul Donnelly e Nagesh Susarla revisão de partida a sua consulta no console de YQL, acessar dados YQL através dos vários pontos de extremidade, e passando por várias camadas YQL de autenticação.
• Eric Ferraiuolo: TipTheWeb.org: Heavy Duty YUI 3 e YQL - Nesta sessão de YUIConf 2010, TipTheWeb co-fundador e colaborador YUI Eric Ferraiuolo discute a criação de uma base de código do projeto de expansão usando YUI 3, YUI Galeria 3 e YQL.
• Reid Burke: Yeti: Interface YUI Teste Fácil - Testando aplicativos cross-browser web tem sido muito difícil por muito tempo: Você está manualmente recarregar navegadores ou lutando com software de automação complicado. Nesta sessão de YUIConf 2010, engenheiro YUI fala Reid Burke sobre como Yeti YUI projeto ajuda a resolver esses problemas. Reid discute quando você deve usar testes automatizados para o seu código de interface, como Yeti trabalha com YUI Test, como configurar o cross-browser testes em poucos minutos e como a equipe YUI usa Yeti para enviar um produto melhor.
• Douglas Crockford: Futuro do Projeto - Yahoo! JavaScript arquiteto Douglas Crockford reflete sobre a vida de Walt Disney, que sonhava em criar uma "Cidade do Futuro", na Flórida, como parte do projeto que se tornou Disney World. (Esta não é uma sessão técnica, mas sim um sobre grandes sonhos e as lições de vida que podemos tirar deles.)
• Tom Hughes-Croucher: Como parar de escrever código espaguete - Nesta sessão de YUIConf 2010, Yahoo! engenheiro Tom Hughes-Croucher explora diferentes estilos de codificação para event-driven, non-blocking server-side JavaScript e que os estilos são mais bem-sucedido.

Conteúdo CC / Usado com permissão:

• http://www.flickr.com/photos/franksvalli/5166422476/~~V
• http://www.flickr.com/photos/franksvalli/5165821437/~~V

Inscrevendo-se na YUI Theater:

• YUI Theater RSS feed
• YUI Theater no iTunes

Encontrar conversas: bloglines | technorati

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