Inizio Interfaccia utente sul blog (YUIBlog)

Nel YUI 3 Galleria: Modulo TimePicker Stephen Woods '

Stavo lavorando su un prodotto interno qui a Yahoo! che gli utenti di ingresso necessario per tempo del giorno in un formato specifico. Ho deciso che invece di obbligare gli utenti a digitare esattamente il formato giusto sarebbe più facile solo per fornire un widget UI per l'ingresso del tempo. Mi è sempre piaciuto il TimePicker jQuery : è un modo semplice e veloce per tempo di ingresso e incontra il mio caso utilizzo perfettamente. Naturalmente, stavamo usando YUI 3 , così ho deciso di ricreare il widget con YUI 3. (Questo è semplice e veloce con la YUI 3 Widget fondazione .) ho pensato che potrebbe essere utile ad altri a lavorare con YUI, così ho deciso di dare diritto alla comunità per l'uso in propri progetti.

Utilizzando il selettore dovrebbe essere abbastanza semplice per voi, se si ha familiarità con le basi di YUI 3. (Vedere una versione dal vivo qui).

Per utilizzare il selettore a proprio progetto includere lo script:

	 <Tipo di script = "text / javascript"

Poi istanziare e rendere il widget:

 YUI (). Uso ('galleria-TimePicker', function (Y) {
	 / / Passare un oggetto di configurazione per il TimePicker
        var = new selettore Y.Saw.Timepicker (
            {
			    / / Un elemento che conterrà il TimePicker
                contentBox: 'div.foo', 

			    / Il tempo iniziale
                Tempo: {
                    ora: 0,
                    minuti: 0
                },
                stringhe: {
                    Sono: 'AM',
                    pm: 'PM',
                    separatore: ':'
                },
                Ritardo: 5 / / delay prima di scegliere una scatola al passaggio del mouse
            }
        );
       picker.render ();
 });

Come per tutti e 3 i widget YUI il costruttore TimePicker prende un oggetto di configurazione per controllare la visualizzazione iniziale del widget. Manipolare il widget è poi fatto tramite i metodi di widget di render , hide e show . La render metodo è dove effettivi elementi DOM vengono creati. hide e show semplicemente aggiungere e rimuovere la classe yui-timepicker-hidden agli elementi riquadro di delimitazione. Questa classe (e le classi aggiuntive CSS del widget) devono essere attuate per il widget a comportarsi correttamente. Per semplicità, qui ci sono gli stili che sto usando l'esempio in esecuzione:

	 / * Reset yui assunto * /
	 . Yui-TimePicker {
         display: block;
         margin: 5px;
         a sinistra: 0;
         position: relative;
         sfondo: trasparente;
     }

     / Standard * per i widget, in questo caso solo spingere quella nascosta dallo schermo * /
     . Yui-TimePicker nascosto {
         a sinistra:-9999em;
         position: absolute;
     }

     . Yui-TimePicker {
         color: # 000;
         font-family: Verdana;
         text-align: left;
     }

 / * Il selettore è in realtà due liste ordinate * /
     . Yui-TimePicker {olo
         display: block;
         position: relative;
         a sinistra: 0;
         . Left: 5px;
         margin: 0px;
         padding: 0px;
         height: 24px;
         text-align: left;
         -Webkit-transizione: sinistro 0,1 s facilità-in;
     }

     . Yui-TimePicker li {
         list-style: none;
         display: block;
         float: left;
         position: relative;
         a sinistra: 0;
         overflow: hidden;
         width: 19px;
         padding: 1px;
         margin: 2px 0 0 0;
         border: 1px solid # 999;
         text-align: center;
     }

     . Yui-TimePicker li {
         -Moz-border-radius: 2px;
         -Webkit-border-radius: 2px;
     }

	 / * Evidenziare i tempi selezionato * /
     . Yui-TimePicker li.yui-TimePicker-attivo {
         background: # 000;
         color: # fff;
         -Moz-box-shadow: 2px 2px 2px # ccc;
         -Webkit-box-shadow: 2px 2px 2px # ccc;
     }

Sto usando animazioni webkit solo per stile, per il progetto, personalizzare questi stili come meglio credi. Per la maggior parte dei casi si vuole nascondere il selettore inizialmente. Chiamando il hide metodo aggiunge solo il yui-timepicker-hidden stile riquadro del widget. Ho aggiunto un gestore di click per il mio elemento wrapper in modo che un clic sull'elemento con l'id time farà sì che il widget per apparire / scomparire:

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

Per rendere il selettore effettivamente utili che ascolterà le

timeset

evento, che restituisce un oggetto con le informazioni sul tempo selezionato, ho intenzione di utilizzare il membro "s24hour" dell'oggetto passato al gestore. Questa è una rappresentazione di stringa del tempo in formato 24 ore. (Disponibile anche sono hour , minute , ampm e s12hour ):

	 picker.subscribe ('timeset', function (e) {
         / / Timeset è un evento personalizzato che viene generato quando il tempo è impostato * *
         / / Utilizzare questo piuttosto che timeChange
         Y.get ('tempo #') insieme ('valore', e.s24hour).;
     });

 / / Aggiunge un gestore di "fare clic sulla cella" per nascondere il selettore quando l'utente clicca su una cella
     picker.subscribe ('CellClick', function (e) {
        this.hide ();
     }, Picker);

Questo è tutto quello che c'è da fare! Godetevi.

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!