Yahoo! User Interface Blog (YUIBlog)

In the Wild de 12 de março de 2010

12 de março de 2010 às 11:20 por Eric Miraglia | Em In the Wild | 1 Comentário

Aqui no YUI HQ, estamos trabalhando para a próxima versão do YUI, YUI 3.1.0. Ontem nós compartilhamos de alguns YUI 3 carregador de trabalho que Adam Moore fez para a 3.1.0. Seu "YUI 2 em 3" do projeto permite a utilização de componentes como YUI 2 DataTable simples e eficiente em YUI 3. Enquanto isso, sua melhoria carregador também significa que você pode trazer em YUI 3 módulos Galeria como armazenamento Lite com a mesma facilidade e eficiência. 3.1.0 marcará também o lançamento da GA componente Satyen Desai / Fundação widget para YUI 3.

Também estamos executando a YUI 3 Galeria de Concurso, o vencedor recebendo um passe conferência JSConf e US $ 500 em Expedia.com para ajudar na viagem. Você tem dois fins de semana cheio de "hacking" esquerda antes do prazo!

Entretanto, houve muita coisa acontecendo na comunidade - estão aqui algumas das coisas que temos observado recentemente:

• Na Galeria 3 YUI - Jeff Craig Slideshow Módulo: Jeff Craig, autor do Chromahash e módulos de criptografia, lançou o seu módulo de diapositivos para o YUI 3 Galeria. Seu Elaborado em seu blog fornece uma boa introdução para o componente, que ele usou para o site Washington State University início.
  

  Recentemente, no trabalho, nós tínhamos um desejo de atualização de uma instância de um baseado em flash widget slideshow em nosso website início. Este widget não fez absolutamente nada de especial, mas o verdadeiro problema que tivemos foi que, nós não realmente ter uma licença para o Flash, ea forma como a apresentação havia sido construída, precisamos ser capazes de construir o arquivo SWF a partir do zero, a fim para atualizar a ordem. Desde que nossos usuários raramente vêm até nós com algo que não é algum tipo de emergência, tivemos que retirar o flash arquivos para outro departamento para fazer nossa mudança rápida e compilar um novo SWF.

  Você pode ler Elaborado faixa de Jeff em seu blog.
  

• Stoyan Stefanov sobre CSS YUI Compressor: Stoyan assinou um contrato para trabalhar no YUI Compressor, e que ele escreveu sobre o componente minification CSS dessa ferramenta no PHPied.com: "Originalmente escrito em PHP por Isaac Schlueter e portado para Java por Julien Lecomte, CSSMin tem uma porta JavaScript sinceramente há algum tempo. Porque, afinal, JavaScript é a linguagem da web, não é? Você pode jogar com a versão mais recente do git online porto JS aqui. Eu também estou feliz de informar que a porta JS agora é usado em PageSpeed e YSlow (como vocês provavelmente sabem extensões do Firefox são escritos em JavaScript). "(Fonte original.)
• YQLDataSource Satyam para YUI 2: "Graças ao artigo Jonathan LeBlanc's no Blog YUI eu pensei que seria legal ter um YQLDataSource para torná-lo mais fácil de usar dados YQL no DataTable YUI 2, 2 Charts YUI e YUI 2 AutoCompletar. A tabela abaixo é construído usando como uma fonte de dados ... O YQLDataSource não requer nenhum parâmetro. Ele irá automaticamente usar o YUI 2 Get Utilitário para acessar os servidores YQL usando formato JSON e proporcionando um retorno adequado. O DataSource só precisa ser instanciado como: var ds = new YAHOO.util.YQLDataSource(); "Saída exemplo da Satyam documentação completa para todos os detalhes.
  
• Screencast de língua alemã sobre o uso YUI no Dreamweaver CS4: Segundo o autor, "In diesem Film zeigt Ihnen die Verwendung der Trainer und Konfiguration des Web Widgets" YUI TreeView ". Lernen Sie die HTML-Struktur kennen dieses Widgets. "Este é um screencast muito bem produzido sobre o uso do suporte CS4 YUI, focando a YUI TreeView Control.
  
• Ajaxian Covers SVG Wow, SVG + YUI Animação 3: notas Brad Neuberg na estréia do Ajaxian de Vincent Hardy e SVG Erik Dahlström do site Uau. Muitos dos exemplos de Vincent, incluindo a canção-voador animação lírica chamada por Brad, são alimentados por 3 YUI's Animação biblioteca funcionando dentro do documento SVG.
  
• Simple File Upload em Grails (usando YUI Connection Manager): Simon Palmer mostra-lhe como YUI ele alavancou Thomas Sha's Connection Manager e slick Matthew Taylor Grails pacote interface do usuário para adicionar assíncrona upload do arquivo para seu projeto Grails. (Nota: Você pode ser capaz de clarear a kweight desta solução, não incluindo o pacote completo utilities.js mas sim fragmentar os componentes necessários - nesse caso, que poderia resultar em apenas <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo/yahoo-min.js&2.8.0r4/build/event/event-min.js&2.8.0r4/build/connection/connection-min.js"></script>
  
• Chris P. Jobling sobre Watching YUI Theater: Gravações Chris: "Esta última semana ou assim que eu tenho assistido um monte de Yahoo! Vídeos YUI Theatre em JavaScript, começando com Douglas Crockford excelente cinco da série Crockford em JavaScript e terminando ontem com Discussão inspirador Christian Heillman na YQL e YUI. Isto inspirou-me a explorar o modo como eu posso usar YUI (biblioteca JavaScript) na próxima versão do meu Proman aplicativo de gerenciamento de projeto de dissertação que será necessário para 2010-2011 rodada atribuição maio. Se der certo, vai ser também algum material didáctico novo módulo para o próximo ano Aplicações Web (EG-259). Eu vou postar mais no âmbito do tag YUI no Proman, blog homem como eu se familiarizar com este material. "
• YUI Painel: botões Alterar e Re-utilização de um painel na mesma página: Ciitronian.com publicou um breve tutorial YUI 2 Painel: "A exigência era fazer um painel modal no YUI, que trabalham em seus próprios como um elemento de ativação usando Ajax (YUI Connection Manager 2). A idéia era abrir uma Painel YUI quando um usuário clica em 'Activar', modal painel que permitirá ao usuário inserir detalhes de quando ele / ela quer agendar a ativação (onde o usuário pode escolher agora ou mais tarde) e depois usuário pode pressionar os botões Submeter e Cancelar ". Clique completamente para o tutorial completo.
• YUI Calendário 2: Usando e modificando várias instâncias no Calendário Picker Single Page: Ciitronian.com "explica como criar várias instâncias do widget de calendário YUI 2. Há muitos exemplos de como usar o Calendar widget no site oficial da YUI, mas para a minha candidatura, a exigência era para agendar ações múltiplas na mesma página, dando a cada um uma data própria, assim que eu desenvolvi o meu widget de calendário "para resolver esse problema. Clique completamente para o tutorial completo.

Pesquisar conversas: Bloglines | technorati

Compartilhar e ampliar: Bookmark with Yahoo! My Web | Bookmark com del.icio.us | digg it! | Reddit!

YUI 2 em 3: Coming in YUI 3.1.0, uma maneira mais simples de usar YUI 2 Módulos

11 de março de 2010 às 12:44 por Eric Miraglia e Moore, Adam | Em Desenvolvimento | 4 Comentários

Usando YUI 2 componentes no contexto da YUI 3 implementações é importante para alguns implementadores fazer a transição entre YUI YUI 2 e 3. Em alguns casos, só queremos o nosso código para fazer a transição por etapas, mas queremos fazê-lo dentro do contexto de um padrão de implementação YUI 3. Em outros casos, podemos estar confiando em componentes de alto nível como YUI DataTable que ainda não estão presentes em YUI 3.

Como parte do lançamento 3.1.0 programados, Adam tem vindo a melhorar a experiência de usar YUI 2 componentes de dentro YUI 3. Para este fim, ele acrescentou algumas informações para YUI 3 do carregador que lhe permite carregar YUI 2 módulos diretamente do seu YUI().use() Declaração:

 YUI () use. ( "Yui2 botão", function (Y) (
	
	 / / Yahoo não é um objeto global, é sandboxed juntamente
	 / / com o resto de sua YUI 3 funcionalidade.  Esta linha
	 / / é necessário se você quiser usar a execução existentes
         / / código:
	 var Yahoo = Y.YUI2;
	
	 / / Código YUI 2 execução
	 var button = new YAHOO.widget.button (myButton ");
	
 ));

Você vai encontrar esta funcionalidade no YUI 3 codeline como de construção de 1933, e nós temos implantado um YUI experimental 3 build (nominalmente "yui3.1.0pr2") e um início de construção de YUI 2.8.0 funcionalidade ajustada para uso em YUI 3.

Quando você baixar YUI fonte últimas 3 em GitHub você encontrará alguns exemplos de trabalho na sandbox/loader (procure por arquivos com o prefixo 2in3 Esses exemplos demonstram o uso de um número de YUI 2 módulos. Nós publicamos um simples exemplo vivo que mostra como usar o YUI 2 DataTable dentro YUI 3, que é um dos recursos mais solicitados transição.

Pontos-chave sobre o YUI 2, em 3 de esforço:

• Esta obra está disponível no mais recente do compilações da versão 3.1.0 programados (compilar 1933 e posterior). Ele não está disponível no 3.0.0 ou no preview 3.1.0pr1.
• O projeto está em estado experimental. Nem o yui3.1.0pr2 construir nem o envolvido YUI 2 constrói a partir do qual ele puxa foram exaustivamente testados, embora tenhamos encenado los no CDN para torná-lo conveniente para explorar a aplicação.
• Baixe a compilação mais recente para exemplos. Você vai encontrar algumas das provas de Adão de arquivos no conceito sandbox/loader - além do simples exemplo acima, essas são as melhores referências de código disponível até a versão 3.1.0 oficial (que é ainda cerca de um mês fora).
• Seus comentários nos fóruns é bem-vinda - e, se você encontrar problemas, estamos interessados em ouvir sobre eles.
• Quando usado desta forma, YUI 2 não cria um objeto YAHOO global. YUI 2 componentes estão envoltos em YUI definições do módulo 3 e eles ficam contidas no YUI 3 sandbox a que está ligado. A linha do codeSample acima, var YAHOO = Y.YUI2; é necessária a fim de cortar e colar YUI 2-código de implementação do estilo - ou você pode mudar as referências YAHOO para Y.YUI2
• YUI 2 Lançamentos são suportados volta à 2.2.2 - o último bug-fix release para cada versão menor é suportado (2.2.2, 2.3.1, 2.4.1, 2.5.2, 2.6.0, 2.7.0, 2.8. 0). Você pode especificar o YUI 2 a versão para use da seguinte forma: YUI({yui2: '2.7.0'}).use('yui2-button', ...) O objetivo aqui é permitir que você para evitar a migração para o 2.8.0 (ou posterior) antes de uma migração YUI 3.

Galeria mais fácil de usar, Too

Melhorias de Adão para YUI 3 do carregador intrínseca melhoraram a experiência de trabalhar com o rápido crescimento YUI 3 Gallery, também. A partir de 3.1.0, você será capaz de trazer módulos de galeria na página a partir do use() declaração sem configuração adicional - o gestor será capaz de determinar e resolver as dependências para você e vai fazer a coisa certa em relação à combinação 'ing o código-fonte galeria com outros arquivos YUI. Aqui está um exemplo Dav Glass juntos para 3.1.0 que demonstra o uso de seu módulo de galeria YQL Consulta em combinação com um pré-lançamento de construir 3.1.0.

Pesquisar conversas: Bloglines | technorati

Compartilhar e ampliar: Bookmark with Yahoo! My Web | Bookmark com del.icio.us | digg it! | Reddit!

No YUI 3 Galeria: Número Matt Snider Module

10 de março de 2010 às 5:45 pm por Matt Snider | In Desenvolvimento, YUI 3 Fotos | No Comments

Nativamente, JavaScript tem um conjunto muito limitado de funções para trabalhar com números localizados sobre o objeto Math global. Principalmente essas funções são para trabalhar com expoentes, trigonometria, e arredondamento. E quando essas funções são necessários e eficientes, o API Math manteve-se inalterado durante anos, e provavelmente não será melhorada a qualquer momento no futuro próximo. Portanto, cabe aos desenvolvedores de bibliotecas JavaScript para criar e manter um componente para trabalhar com números.

O componente Número de YUI 3 Gallery, derivada do trabalho originalmente usado em Mint.com, visa preencher o número de desaparecidos funcionalidades relacionadas. Ele fornece uma leve conjunto de funções estáticas para trabalhar com números. O componente Número pesa cerca de 1.8KB minification após e antes de gzip, é suportado por todos os browsers A-grade.

Uma das características em número que eu uso a mais é o format() função, que injeta um número formatado em uma string, avaliando o formato do número no espaço reservado para a cadeia. (Nota: Esta é similar a formatação de apoio Y.DataType.Number fornece atualmente, mas arregaça as propriedades de configuração separado que Y.DataType.Number.format aceita em uma única seqüência de formatação padrão.) A função funciona com todos os símbolos, mas o número de formatos de acordo com o padrão Inglês. Aqui estão alguns exemplo de como usar o format() do seu teste de unidade:

  var n = 1111,11,
	 formatDollars = "$ 0,0.00" / / uso e vírgula decimal quando formatando
	 FormatPercent = "0,00%", / decimal / uso quando da formatação
	 formatRound = "0000", / vírgula / uso quando da formatação
	 formatText = "Por favor, adicionar o $ 0,0.00 ao meu guia!";

 Y.Assert.areEqual ( "$ 1,111.11", Y.Number.format (n, formatDollars));
 Y.Assert.areEqual (1111,11% ", Y.Number.format (n, FormatPercent));
 Y.Assert.areEqual ( "1.111", Y.Number.format (n, formatRound));
 Y.Assert.areEqual ( "Please add de US $ 1,111.11 para o meu guia!", Y.Number.format (n, formatText)); 

Outras funções úteis incluem:

• random() fornece uma API fácil para obter números aleatórios todo;
• isBetween() / isNotBetween() simplifica a avaliação de séries de números;
• radian() / degrees() quando trabalhar com as funções de trigonometria Matemática (como Math.cos() que esperam radianos em vez de graus, tanto radian() e degrees() são úteis para a conversão de valores.

Para utilizar o número de componentes Gallery, primeiro incluir o script:

  <script 
 src = "& http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js
 gallery-2010.02.22-22/build/gallery-number/gallery-number-min.js "> </ script> 

Então incluem 'gallery-number' em seu use() da função use() para obter as seguintes funções:

  YUI () use. ( 'Galeria-número', function (Y) (
	 Y. Number = (
		 graus (número),
		 Número Format (, format),
		 Número getPrecision (),
		 (número isNotBetween, número, número, booleano),
		 (número isBetween, número, número, booleano),
		 (número isPrime),
		 radianos número (),
		 (número aleatório, número),
		 Número roundToPrecision (, número)
	 );
 )); 

Estas funções foram modeladas após a Matemática e as funções nativas, como as funções matemáticas, as funções da Y.Number NaN retorno Y.Number se o valor fornecido não é um número. Se você quiser contribuir para o desenvolvimento ou exigir novos recursos adicionados ao número, por favor, deixe uma mensagem no fórum.

Pesquisar conversas: Bloglines | technorati

Compartilhar e ampliar: Bookmark with Yahoo! My Web | Bookmark com del.icio.us | digg it! | Reddit!

YUI Theater - Douglas Crockford: "Crockford em JavaScript - Episódio IV: A Metamorfose de Ajax" (93 min.)

9 de março de 2010 às 12:40 por Eric Miraglia | Em YUI Theater | 6 Comentários

Na semana passada, o Yahoo! Arquiteto JavaScript Douglas Crockford entregou a quarta parcela do seu Crockford em série JavaScript:

1. Volume One: The Early Years
2. Capítulo 2: And Then There Was JavaScript
3. Ato III: A função Ultimate
4. Episódio IV: A Metamorfose de Ajax
5. Parte V: The End of All Things (31 de março - RSVP)

Nesta sessão, Douglas aborda o DOM. Por um lado, houve JavaScript, diz ele, e JavaScript é "o que tornou o trabalho do navegador."

Por outro lado, havia o Document Object Model, também conhecido carinhosamente como o DOM. É o que a maioria das pessoas odeiam quando dizem que odeiam JavaScript. A maioria das pessoas que dizem que odeiam o JavaScript JavaScript não sei, nunca poderia ter visto o JavaScript, mas me senti bem o DOM. Se você não sabe qual é a diferença e você diz: "JavaScript é a coisa mais estúpida que eu já vi", você não está falando sobre o JavaScript, você está falando sobre o DOM. O DOM é uma API do navegador. É a interface. Ele fornece JavaScript para a manipulação de documentos.

O DOM pode ser imperfeita, mas é no entanto, crucial para que os engenheiros frontend fazer quando eles escrevem aplicações web. Nesta palestra, Douglas fornece uma visão geral, situado historicamente, de onde veio o DOM, como ele alcançados ascendência com o Ajax, e que o futuro pode prender. Na forma inimitável de Douglas, esta história começa com Sir John Harrington e nos leva até os dias atuais. Algumas palavras escolhidas para o CSS estão entre as linhas de muitos aplausos para os desenvolvedores de veterano:

Acho no seio da comunidade das pessoas que usam CSS grande afeto por ele. Eles são totalmente investidos em CSS, eles adoram. Eles não podem imaginar qualquer outra maneira de fazer a formatação de um documento. É isso. É uma espécie de como assistir a um episódio de Cops, onde a polícia chegar e acabar com a disputa da família, e isso não existe "CSS é ruim, você só não entendo como eu. Eu sei que isso me machuca, mas eu errar, eu estou errado. "CSS é horrível, e espanta-me a forma como as pessoas percebem que é investido. É como quando você descobrir, tipo de ir "Ah, OK, eu vejo como eu poderia ser capaz de fazê-lo funcionar", então você virar de odiar-lo para amá-la, e desprezando qualquer um que não tenha ido com o que você "Já passou. Não faz sentido para mim.

Se o vídeo embed abaixo não aparecer corretamente em seu leitor de RSS de sua escolha, clique com certeza através de assistir a versão de alta resolução do vídeo no YUI Theater.

• Download de vídeo HD (480p ~ 720MB)
• Baixar vídeo (m4v)
• Slides Download
• A versão de alta resolução, transcritas desta palestra está disponível no site do Teatro YUI

Outros Recentes YUI Theater Vídeos:

• Douglas Crockford: Crockford em JavaScript - Ato III: A função Ultimate - Yahoo! 'S arquiteto JavaScript Douglas Crockford continua sua série de palestras sobre a linguagem de programação JavaScript com uma discussão das funções em JavaScript. "As funções são a parte melhor de JavaScript, 'Crockford diz. "É onde o poder é, é onde a beleza é." Assista ao vídeo para saber porquê.
• Douglas Crockford: Crockford no Javascript - Capítulo 2: And Then There Was JavaScript - Yahoo! 'S arquiteto JavaScript Douglas Crockford inquéritos as características da linguagem de programação JavaScript.
• Douglas Crockford: Crockford em JavaScript - Volume 1: The Early Years - Douglas Crockford coloca a linguagem de programação JavaScript no seu próprio contexto histórico, a localização estrutura da linguagem e convenções (e alguns dos seus caprichos) de volta às suas raízes nas primeiras décadas do computador ciência.
• Christian Heilmann: YQL e YUI: Building Blocks para aplicações rápidas - O Yahoo! Internacional Developer Network evangelista Christian Heilmann discute sua filosofia para a criação rápida e poderosa, aplicações interessantes usando o Yahoo Query Language (YQL) eo Yahoo User Interface Library (YUI).

Inscrevendo-se YUI Theater:

• YUI Theater RSS feed
• YUI Theater no iTunes

Pesquisar conversas: Bloglines | technorati

Compartilhar e ampliar: Bookmark with Yahoo! My Web | Bookmark com del.icio.us | digg it! | Reddit!

YUI 3 Galeria Contest 2010 - Ganhe um Ticket to JSConf 2010

5 de março de 2010 às 2:12 pm por Eric Miraglia and Glass Dav | In Desenvolvimento, YUI Galeria 3 | 6 Comentários

Temos o prazer de anunciar o YUI 3 Galeria Contest 2010. Graças aos nossos amigos no Yahoo! Developer Network, temos uma conferência de passar para o esgotado JSConf 2010 para oferecer. Estamos a par de que, com um certificado de presente $ 500 a Expedia.com para ajudar o vencedor do prêmio de ir e vir à Virgínia para a conferência.

O prêmio vai para a pessoa que os autores do melhor YUI novo 3 módulo Gallery entre 5 de março e 22 de março e envia-lo para uso da comunidade sob licença BSD YUI's. Como acontece com qualquer competição, existem muitas regras. Já vimos alguns dos grandes na página do concurso e você pode ler o artigo da faixa legal aqui.

Estamos entusiasmados com o que todos nós como uma comunidade tem feito desde o final de 2009 para fazer a galeria de um viveiro para YUI 3 o crescimento ea inovação módulo. Hinch Greg's Form (apresentado horas depois de a galeria aberta), para excelente Ryan's Grove e módulos de História, über Ilyan Peychev de-Accordion popular, SimpleMenu Julien Lecomte's, timePicker Stephen Woods, TreeView Adam Moore, Chromahash Jeff Craig, módulo próprio Dav YQL ... e dezenas de outros.

Esperamos que você considere fazer algumas YUI 3 hacking durante as próximas semanas para adicionar a esta colecção. Listamos alguns recursos na página do concurso, e não há um tópico que ir com idéias para novos módulos (por favor, pesa ali, mesmo que você não vai estar escrevendo um módulo para o concurso de si próprio). E, claro, a Galeria de corrente é uma boa fonte de inspiração.

Happy hacking, e estamos ansiosos para ver um autor Galeria YUI cabeça para fora para JSConf mês que vem!

Pesquisar conversas: Bloglines | technorati

Compartilhar e ampliar: Bookmark with Yahoo! My Web | Bookmark com del.icio.us | digg it! | Reddit!

Primeiro Happy Birthday, JSMag

3 de março de 2010 às 7:27 pm por Tom Hughes-Croucher | Em Miscellany | 3 Comentários

Nossos amigos sobre a JSMag estão comemorando seu primeiro aniversário. Se você ainda não leu JSMag é uma revista mensal PDF que cobre notícias sobre temas quentes JavaScript e fornece tutoriais práticos.

JSMag estão dando uma edição livre de seu primeiro ano. Basta entrar em sua conta JSMag e usar o código "um ano" para obter uma edição gratuita.

Ao selecionar o problema livre, você pode querer procurar os artigos escritos por engenheiros JSMag frontend Yahoos ou sobre YUI ao longo dos últimos 12 meses:

• Março 2009
  
  • Matt Henry em testes de unidade com YUI
• Abril 2009
  
  • Yours truly no perfil o seu JavaScript
• Junho 2009
  
  • Atenciosamente em Build Scripts
• Julho 2009
  
  • Stoyan Stefanov na função Patterns
• Agosto 2009
  
  • Jon LeBlanc sobre YQL e navegador MVC
• Agosto 2009
  
  • Stoyan Stefanov sobre os padrões de função
• Setembro 2009
  
  • Chistian Tiberg sobre o uso do sistema de administração com YUI
  • Stoyan Stefanov em função de padrões mais
• Outubro 2009
  
  • Chistian Tiberg na edição em linha com YUI
  • Stoyan Stefanov em padrões mais construtor
• Novembro 2009
  
  • Yours truly "Reforçar YQL com server-side Javascript
  • Stoyan Stefanov sobre os padrões de herança mais
• Dezembro 2009
  
  • Christian Tiberg sobre o uso dos componentes DataTable e YUI2 gráfico
  • Stoyan Stefanov em padrões mais reuso
• Janeiro 2010
  
  • Christian Tiberg sobre o uso do YUI para criar gadgets para desktop do Windows
  • Stoyan Stefanov no padrão sandbox
• Fevereiro 2010
  
  • Stoyan Stefanov sobre o padrão de membros privados
• Março 2010
  
  • Atenciosamente, com uma visão geral do server-side Javascript
  • Stoyan Stefanov em currying

Happy Birthday, JSMag!

Pesquisar conversas: Bloglines | technorati

Compartilhar e ampliar: Bookmark with Yahoo! My Web | Bookmark com del.icio.us | digg it! | Reddit!

No YUI 3 Galeria: timePicker Stephen Woods 'Module

3 de março de 2010 às 7:30 am por Stephen Woods | Em YUI 3 Fotos | 3 Comentários

Eu estava trabalhando em um produto interno aqui no Yahoo! que é exigido aos utilizadores o tempo de entrada de dia em um formato específico. Eu decidi que em vez de forçar os usuários a digitar exatamente o formato certo que seria mais fácil apenas para fornecer um elemento da interface do usuário para a entrada de tempo. Eu sempre gostei do timePicker jQuery, é uma maneira simples e rápida para a hora de entrada e preenche o meu caso de uso perfeitamente. Claro, estávamos usando YUI 3, então eu decidi recriar o widget com YUI 3. (Esta é rápida e fácil com a fundação Widget YUI 3.) Eu pensei que poderia ser útil para outras pessoas que trabalham com YUI, então eu decidi dar-lhe direito de volta à comunidade para uso em seus próprios projetos.

Usando o selecionador deve ser bem simples para você, se você estiver familiarizado com os conceitos básicos de YUI 3. (ver uma versão ao vivo aqui).

Para usar o selecionador em seu próprio projeto inclui o script:

	 <script type = "text / javascript" src = "http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js&gallery-2010.02.25-22/build/gallery-timepicker/ galeria timePicker-min.js "> </ script>

Em seguida, instanciar e tornar o widget:

 YUI () use. ( 'Galeria timePicker', function (Y) (
	 / / Passar um objeto de configuração para o timePicker
        var picker = new Y.Saw.Timepicker (
            (
			    / / um elemento que irá conter o timePicker
                contentbox: 'div.foo', 

			    / o tempo inicial
                time: (
                    hora: 0, 
                    minuto: 0
                ), 
                Strings: (
                    AM: 'AM', 
                    PM: 'PM', 
                    seperator: ':'
                ), 
                atraso: 5 / atraso / antes de selecionar uma caixa no mouseover
            )
        );
       picker.render ();
 ));

Como todos os YUI 3 widgets timePicker o construtor leva um objeto de configuração para controlar a exibição inicial do widget. Manipulando o widget é feito então através dos métodos Widget render hide e show O render método é onde os elementos DOM reais são criados. hide e show simplesmente adicionar e remover os yui-timepicker-hidden aos elementos caixa delimitadora. Esta classe (e as classes CSS adicionais para o widget) devem ser implementadas para o widget se comportar corretamente. Para simplificar, aqui estão os estilos que eu estou usando o exemplo em execução:

	 / * Reset yui assumido * /
	 . yui-timePicker (
         display: block;
         margin: 5px;
         left: 0;
         position: relative;
         background: transparent;
     )

     / * Standard para widgets, neste caso, apenas empurrando a um escondido fora da tela * /
     . yui-timePicker-hidden (
         left:-9999em;
         position: absolute;
     )

     . yui-timePicker (
         color: # 000;
         font-family: Verdana;
         text-align: left;
     )

 / * O selecionador é na verdade duas listas ordenadas * /
     . yui-timePicker ol (
         display: block;
         position: relative;
         left: 0;
         . left: 5px;
         margin: 0;
         padding: 0;
         height: 24px;
         text-align: left;
         -webkit transição: left .1 s ease-in;
     )

     . timePicker Li Yui-(
         list-style: none;
         display: block;
         float: left;
         position: relative;
         left: 0;
         overflow: hidden;
         width: 19px;
         padding: 1px;
         margin: 0 2px 0 0;
         border: 1px solid # 999;
         text-align: center;
     )

     . timePicker Li Yui-(
         -moz-border-radius: 2px;
         -webkit-border-radius: 2px;
     )

	 / * Destacar as vezes selecionado * /
     . yui-timePicker li.yui-timePicker-active (
         background: # 000;
         color: # fff;
         -moz-box-shadow: 2px 2px 2px # ccc;
         -webkit-box-shadow: 2px 2px 2px # ccc;
     )

Estou usando o webkit animações apenas para o estilo, para o seu projecto, personalizar esses estilos como você vê o ajuste. Para a maioria dos efeitos que você vai querer esconder o selecionador inicialmente. Chamando a hide método apenas adiciona a yui-timepicker-hidden estilo yui-timepicker-hidden a caixa delimitadora do widget. Eu adicionei um manipulador de clique para o meu elemento wrapper de forma que um clique no elemento com o time id fará com que o widget para aparecer / desaparecer:

	  picker.hide ();
      Y.get ( "# main"). On ( 'click', function (e) (
          var target = e.target;
          if (target.test tempo ( '#')) (
              picker.toggle ();
          )
      ));

Para fazer com que o selecionador realmente útil eu vou ouvir o

timeset

evento, que retorna um objeto com informações sobre o tempo selecionado, vou usar o "s24hour" membro do objeto passado para o manipulador. Isso é uma representação de seqüência do tempo no formato de 24 horas. (também disponível são hour minute ampm e s12hour

	 picker.subscribe ( 'função timeset', (e) ( 
         / / timeset é um evento personalizado que é acionado quando o tempo é definido * *
         / / use este em vez de timeChange
         Y.get tempo ( '#'). Set ( 'valor', e.s24hour);
     ));
    
 / / adicionar um manipulador de "clique na célula" para ocultar o selecionador quando o usuário clica em uma célula
     picker.subscribe ( 'função CellClick', (e) (
        Hide (); 
     ), selecionador);

That's all there is to it! Apreciar.

Pesquisar conversas: Bloglines | technorati

Compartilhar e ampliar: Bookmark with Yahoo! My Web | Bookmark com del.icio.us | digg it! | Reddit!