Usuário Yahoo! interface Blog (YUIBlog)

Usando o YUI 3 Selector data do calendário da Liga

18 junho, 2010 às 10:46 por Eric Miraglia | Em Desenvolvimento , YUI 3 Galeria | 6 Comentários

A Liga de componentes (contribuíram por Nate Cavanaugh e Lundgren Eduardo de Liferay) na Galeria 3 YUI são simples de usar. Este exemplo ilustra o uso do calendário da liga para melhorar progressivamente um conjunto de select elementos para seleção de data.

Vamos começar com a marcação - o HTML que será na página e funcionamento, independentemente de JavaScript habilitado. Módulo de liga leve de calendário não requer essa marcação, você pode alimentá-lo com um elemento vazio e vai criar a select elementos para que, no caso de seu caso de uso não se beneficiariam de aprimoramento progressivo.

  <div id="calendar">
	 <select class="yui3-datepicker-month" name="month" id="monthselect">
		 value="0"> <option
			 Janeiro
		 </ Option>
		 value="1"> <option
			 Fevereiro
		 </ Option>

 ...

	 </ Select>

         <select class="yui3-datepicker-day" name="day" id="dayselect">
		 value="1"> <option
			 1
		 </ Option>
		 <option value="2">
			 2
		 </ Option>

 ...

	 </ Select>

         <select class="yui3-datepicker-year" name="year" id="yearselect">
		 <option value="2009">
			 2009
		 </ Option>

 ...

	 </ Select>
 </ Div> 

Com essa marcação no lugar (ou com apenas um elemento raiz vazio se não estamos aumentando progressivamente os campos do formulário existente), nós trazemos no módulo Calendário Liga, com o apoio datepicker seleção a partir do 3 YUI Gallery . Isso exige que tenhamos YUI 3 na página e, em seguida, siga o passo de configuração descritos na página do módulo Gallery .

  <script src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"> </ script>
 <script>
 YUI ({
	 / / Todas essas informações de configuração pode ser cortado e colado a partir da entrada para a Galeria
	 / / Este módulo: http://yuilibrary.com/gallery/show/aui-calendar-datepicker-select
     Galeria: 'galeria-2010.06.07-17-52',
     módulos: {
         "Galeria aui-pele-base": {
             fullpath: 'http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/gallery-aui-skin-base/css/
							 galeria aui-pele-base min.css ',
             Tipo: 'css'
         },
         "Galeria aui-pele-clássico": {
             http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/ ': fullpath
							 gallery-aui-skin-classic/css /
							 galeria aui-pele-classic-min.css ',
             Tipo: 'css',
             requer: ['galeria aui-pele-base']
         }
     }
 }). Uso (função 'galeria aui-calendário datepicker-selecione', (Y) {
     var = new datePickerSelect Y. DatePickerSelect ({
		 displayBoundingBox: '# calendário',
		 dateFormat: '% m /% d /% y',
		 yearRange: [2009, 2012],
		 dayField: Y.one ("# dayselect"),
		 dayFieldName: "dia",
		 monthField: Y.one ("# monthselect"),
		 monthFieldName: "mês",
		 yearField: Y.one ("# yearselect"),
		 yearFieldName: "ano"
	 }) Render ().;
 });

 </ Script> 

Aqui está uma versão ao vivo deste exemplo simples .

É tão simples como isso. As propriedades de configuração para datePickerSelect são lucidamente definidos na documentação do Alloy . Neste exemplo, as propriedades são usadas para definir o elemento raiz, formatar a data, definir o intervalo de datas, e depois conectar o nosso actual select elementos para a instância widget para que ele saiba que os campos do formulário a ser usado para aprimoramento progressivo. Na prática, apenas o elemento raiz ( displayBondingBox ) é uma propriedade necessária.

Confira a lista YUI Galeria 3 para uma lista completa das contribuições UI Alloy .

Encontrar conversas: bloglines | technorati

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