Yahoo! User Interface Blog (YUIBlog)

In der YUI 3 Galerie: Peter Peterson Ratings Widget

Ich wollte meine Füße nass mit den endgültigen Widget-Infrastruktur in YUI 3.1.0 vorgestellt, und ich habe immer das Gefühl, der beste Weg das zu tun, um einen Code zu schreiben. Ich wollte etwas einfach, und ich stellte fest, dass in einer CSS-Ratings Umsetzung ich gefunden Komodo Medien . Die daraus resultierende Widget ist die YUI3 Ratings Widget ( Demo ). Der Großteil der Arbeit des Widgets wird durch CSS behandelt und ist auch in den Komodo Medien Artikel beschrieben. Das einzige Problem mit diesem Widget, war einst ein Rating gewählt wurde, nichts wirklich passiert, wenn die Seite neu geladen wurde, und wenn das Widget den Fokus verloren, verlor es seine Bewertung. Hier wird die YUI 3 Galerie Ratings Widget kommt in.

Meine Ziele für das Projekt waren:

• Der Code für das Widget sollte gerade genug, um die Grundlagen für die Erstellung eines YUI 3 widget erstellen Touch
• Das Widget würden schrittweise Verbesserung der Seite
• Die Benutzer-Interaktion mit dem Widget ist leicht gefangen
• Fügen Sie eine klare Bewertung Taste, die nicht in dem ursprünglichen Entwurf existiert
• Das Widget sollte für Menschen mit Screenreadern
• Nehmen Sie die Instanziierung und Interaktion mit dem Widget Toten einfach mit so wenig Code wie möglich.

Es ist leicht, die Bewertungen Widget auf Ihrer Seite mit dem YUI Loader hinzugefügt:

 YUI ({
     Galerie: "Galerie-2010.04.14-19-47 '
 }). Verwenden ("gallery-Ratings ',' Event ', function (Y) {
     / / Programm-Logik ...
 });

Sie müssen auch das Bild Vermögenswerte und CSS-Datei befindet sich bei befindet github oder von Ihrer eigenen Kopie der Galerie.

Fügen Sie einfach einen Knoten in Ihrer Hand, dass die derzeitige Bewertung (beliebige Zahl zwischen 0 bis 5) enthält oder leer ist.

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

Sie können dann eine Instanz der Widget mit dem folgenden Code in der Sandbox:

 var myRating = new Y. Ratings ({srcNode: "# mywidget"});
 myRating.render ();

Ich fühlte, dass es wichtig sei, um dieses Widget einfach anzupassen und so fügte ich einige Konfigurationsänderungen an den Konstruktor. inline , wenn auf true gesetzt wird das Rating inline mit Text auf der Seite (Standard: false) angezeigt werden. skin eingestellt werden kann " klein ", um die Größe des Widgets (Beispiel verringern: )

Auf seiner eigenen, nicht die Ratings Widget wenig mehr, dass sich die Rating-Interaktion für den Benutzer gesetzt. Ein wenig mehr Arbeit getan werden muss, um tatsächlich den Wert verwenden. Ich verlasse, dass bis zu der Implementierer zu prüfen; ob ein Rückruf an den Ereignis ausgelöst hinzuzufügen, wenn die Rating-Veränderungen oder ein Plugin, um das Widget liefern, um es automatisch zu behandeln. Um Ihnen den Einstieg, wenn eine Bewertung der geändert wird ratingChange Ereignis ausgelöst wird. Es ist einfach einzurichten einem Ereignis-Listener, die fangen ratingChange Veranstaltung für alle Widgets auf der Seite. In diesem Beispiel, log ich das Rating Widget srcNode 's id, der vorherigen Bewertung, und die neue Bewertung für jede Rating-Widget auf der Seite, wenn die Rating-Änderungen:

 Y.on ("Ratings: ratingChange", function (e) {
   var id = e.target.get ("Contentbox") zu bekommen ("id").;
   Y.log (id + "New Value:" + e.newVal + "war:" + e.prevVal);
 });  

Zukünftige Ideen für das Projekt:

• Schrittweise zu verbessern Formelemente
• Machen Sie das klare Rating-Taste optional
• Machen Sie den Leistungsbereich konfigurierbar
• Weitere Skins und Kombination der CSS-Sprites
• Internationalisierung

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!