Yahoo! User Interface Blog (YUIBlog)

Mit dem YUI 3 Kalenderauswahl aus aus Alloy

Die Alloy -Komponenten (beigesteuert von Nate Cavanaugh und Eduardo Lundgren von Liferay) im YUI 3 Galerie sind einfach zu bedienen. Dieses Beispiel veranschaulicht die Verwendung der Legierung Kalender, um schrittweise zu verbessern eine Reihe von select Elemente für die aktuelle Auswahl.

Beginnen wir mit dem Markup - HTML, die auf der Seite und das Funktionieren sein werden unabhängig davon, ob JavaScript aktiviert ist. Alloy-Kalender-Modul benötigt keine dieses Markup, man kann es füttern ein leeres Element und es wird die erstellen select Sie Elemente für den Fall, dass Ihre Nutzung Fall würde nicht von Progressive Enhancement profitieren.

  <div id="calendar">
	 <select class="yui3-datepicker-month" name="month" id="monthselect">
		 <option value="0">
			 Januar
		 </ Option>
		 <option value="1">
			 Februar
		 </ 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> 

Mit diesem Markup anstelle (oder nur mit einem leeren Root-Element, wenn es sich nicht schrittweise Verbesserung der bestehenden Formularfelder), bringen wir in der Legierung Kalender-Modul mit Unterstützung datepicker Auswahl aus der YUI 3 Gallery . Dies verlangt von uns, YUI 3 auf der Seite haben und dann, um die Konfiguration Schritt auf skizziert folgen der Modul-Galerie-Seite .

  <script src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"> </ script>
 <script>
 YUI ({
	 / / All dieses Konfigurations-Informationen können Cut-and-eingefügt werden aus der Galerie-Eintrag für
	 / / Dieses Modul: http://yuilibrary.com/gallery/show/aui-calendar-datepicker-select
     Galerie: "Galerie-2010.06.07-17-52 ',
     Module: {
         "Galerie-AUI-Haut-base ': {
             fullpath: 'http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/gallery-aui-skin-base/css/
							 Galerie-AUI-Haut-base-min.css ',
             Typ: 'CSS'
         },
         "Galerie-AUI-Haut-Klassiker": {
             fullpath: 'http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/
							 gallery-aui-skin-classic/css /
							 Galerie-AUI-Haut-classic-min.css ',
             Typ: 'css',
             erfordert: ['Galerie-AUI-Haut-base']
         }
     }
 }). Einsatz ('Galerie-AUI-calendar-datepicker-select', function (y) {
     var = new datePickerSelect Y.DatePickerSelect ({
		 displayBoundingBox: '# calendar',
		 dateFormat: '% m /% d /% y',
		 yearRange: [2009, 2012],
		 dayField: Y.one ("# dayselect"),
		 dayFieldName: "Tag",
		 monthField: Y.one ("# monthselect"),
		 monthFieldName: "Monat",
		 yearField: Y.one ("# yearselect"),
		 yearFieldName: "Jahr"
	 .}) Render ();
 });

 </ Script> 

Hier ist eine Live-Version von diesem einfachen Beispiel .

Es ist so einfach. Die Konfigurations-Eigenschaften für datePickerSelect sind klar in der Legierung Dokumentation definiert . In diesem Beispiel werden die Eigenschaften verwendet werden, um die Root-Element, formatieren Sie das Datum einzustellen, stellen Sie den Datumsbereich, und dann verdrahten Sie unsere bestehenden select Elemente auf den Widget-Instanz, so dass er die Formularfelder für Progressive Enhancement nutzen weiß. In der Praxis wird nur das Root-Element ( displayBondingBox ist) eine erforderliche Eigenschaft.

Schauen Sie sich die YUI 3 Galerie Dienstplan für eine vollständige Liste der Alloy UI Beiträge .

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!