Inizio Blog User Interface (YUIBlog)

Nel YUI 3 Gallery: gli Peterson Valutazioni Peter Widget

Volevo avere i piedi bagnati con la versione definitiva della infrastruttura widget presentato in YUI 3.1.0, e ho sempre sentito il modo migliore per farlo è quello di scrivere del codice. Volevo qualcosa di semplice, e ho scoperto che in un rating di attuazione CSS che ho trovato su Komodo Media . Il widget risultante è la notte YUI3 Widget ( demo ). Il grosso del lavoro dei widget è gestito da CSS ed è descritto bene in questo articolo Komodo Media. Il solo problema con widget che, una volta era un voto è stato scelto, nulla è realmente accaduto a meno che la pagina è stata ricaricata, e quando il widget perso messa a fuoco, ha perso il suo rating. Questo è dove il YUI 3 Galleria widget Valutazioni entra in gioco

I miei obiettivi per il progetto sono stati:

• Il codice per il widget dovrebbe essere appena sufficiente per toccare le basi per la creazione di un widget YUI 3
• Il widget sarebbe progressivamente migliorare la pagina
• L'interazione dell'utente con il widget è facilmente catturato
• Aggiungere un pulsante di rating chiaro che non esiste nel disegno originale
• Il widget deve essere accessibile per persone che usano lettori di schermo
• Fai la creazione di istanze e l'interazione con il semplice widget morti con il codice meno possibile.

È facile aggiungere il widget di voti per la tua pagina utilizzando il caricatore YUI:

 YUI ({
     galleria: 'galleria-2010.04.14-19-47'
 }). Uso ('evento', galleria-rating ', function (Y) {
     / / Programma di logica ...
 });

Dovrai anche il patrimonio di immagini e CSS file che si trova situato a github o dalla vostra copia della galleria.

Basta aggiungere un nodo nell'origine che contiene la media attuale (un numero compreso tra 0 - 5) o è vuoto.

 <span id="myWidget"> 2,5 </ span>

È quindi possibile creare un'istanza del widget con il seguente codice nella tua sandbox:

 var = myRating nuovi rating Y. ({srcNode: "# myWidget"});
 myRating.render ();

Sentivo che era importante fare questo widget facile da personalizzare e quindi ho aggiunto qualche configurazione al costruttore. inline quando è impostata a true per visualizzare il rating in linea con il testo nella pagina (il default è false). skin può essere impostato su " piccolo "per ridurre le dimensioni del widget (Esempio: )

Di per sé, il widget di rating non fa altro che impostare l'interazione di rating per l'utente. Un po 'di lavoro deve essere fatto per utilizzare realmente il valore. Lascio che fino al realizzatore di prendere in considerazione, se aggiungere un callback per l'evento generato quando le variazioni di rating, o per la fornitura di un plugin per il widget per gestire automaticamente. Per iniziare, ogni volta che un rating è cambiato il ratingChange evento. E 'facile da impostare un listener di eventi per catturare i ratingChange evento per tutti i widget sulla pagina. In questo esempio, io registro il Rating Widget srcNode id s ', il rating precedente, e il nuovo rating per ogni widget rating sulla pagina quando le variazioni di rating:

 Y.on ("rating: ratingChange", function (e) {
   id = var e.target.get ("contentBox") get ("id").
   Y.log (id + "Nuovo valore:" + e.newVal + "è stato:" + e.prevVal);
 });  

idee future per il progetto:

• Aumentare progressivamente gli elementi del modulo
• Effettuare la valutazione chiara pulsante opzionale
• Rendere la gamma di rating configurabile
• Più pelli, e la combinazione dei sprite CSS
• Internazionalizzazione

Trova conversazioni: bloglines | technorati

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