Inizio Blog User Interface (YUIBlog)

Utilizzando il YUI 3 Calendar Data Selector dalla lega

The Lega componenti (contributo di Nate Cavanaugh e Eduardo Lundgren da Liferay) nel 3 YUI Gallery sono semplici da utilizzare. Questo esempio illustra l'uso del calendario della lega a migliorare progressivamente una serie di select elementi per la selezione della data.

Cominciamo con il codice - il codice HTML che verrà sulla pagina e funzionamento indipendentemente se è abilitato JavaScript. Calendario modulo Lega non richiede questo codice, è possibile alimentare un elemento vuoto e si creerà la select gli elementi per voi nel caso in cui il caso d'uso non trarrebbe beneficio da progressive enhancement.

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

 ...

	 </ Select>

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

 ...

	 </ Select>

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

 ...

	 </ Select>
 </ Div> 

Con questo codice al posto (o con solo un elemento di primo livello vuoto se non siamo per migliorare progressivamente i campi del modulo esistenti), si mettono in calendario modulo di Lega con il supporto di selezione datepicker dal YUI 3 Gallery . Questo ci richiede di avere YUI 3 sulla pagina e poi a seguire il passo di configurazione delineata sulla Galleria di pagina del modulo .

  src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"> <script </ script>
 <script>
 YUI ({
	 / / Tutte queste informazioni di configurazione può essere tagliato e incollato dalla data di entrata Gallery
	 / / Questo modulo: http://yuilibrary.com/gallery/show/aui-calendar-datepicker-select
     galleria: 'galleria-2010.06.07-17-52',
     moduli: {
         'Galleria-AUI-pelle-base': {
             FullPath: 'http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/gallery-aui-skin-base/css/
							 galleria-AUI-pelle-base-min.css ',
             Tipo: 'CSS'
         },
         'Galleria-AUI-pelle-classico': {
             FullPath: 'http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/
							 gallery-aui-skin-classic/css /
							 'Galleria-AUI-pelle-classico-min.css,
             Tipo: 'CSS',
             richiede: ['galleria-AUI-pelle-base']
         }
     }
 }). Uso (funzione 'galleria-AUI-calendario-datepicker-selezionare', (Y) {
     datePickerSelect var = new Y. DatePickerSelect ({
		 displayBoundingBox: '# calendario',
		 DateFormat: '% m /% d /% y',
		 yearRange: [2009, 2012],
		 dayField: Y.one ("# dayselect"),
		 dayFieldName: "giorno",
		 monthField: Y.one ("# monthselect"),
		 monthFieldName: "mese",
		 yearField: Y.one ("# yearselect"),
		 yearFieldName: "anno"
	 }) Render ().
 });

 </ Script> 

Ecco una versione live di questo semplice esempio .

E 'così semplice. Le proprietà di configurazione per datePickerSelect sono lucidamente definite nella documentazione in lega . In questo esempio, le proprietà sono utilizzati per impostare l'elemento principale, il formato della data, impostare l'intervallo di date, e quindi legare il nostro attuale select elementi per l'istanza del widget in modo che sappia che i campi del modulo da utilizzare per il miglioramento progressivo. In pratica, solo l'elemento root ( displayBondingBox ) è una proprietà obbligatoria.

Scopri la Galleria di YUI 3 roster per un elenco completo dei contributi UI Lega .

Trova conversazioni: bloglines | technorati

Condividi e ampliare: Bookmark con del.icio.us | digg it! | reddit!