¦ 10.09.2009 ¦
jQuery - Sternchen Bewertungssystem
Heute möchte ich mit Ihnen klären, wie man ein tyisches Bewertungssystem mit Sternen animiert. Dabei möchte ich heute nicht den PHP/MySQL-Teil erarbeiten, sondern wie man solch eine Animation hinbekommt. Sie kennen sicherlich solche Bewertungssysteme bereits. Man hat fünf graue Sterne. Geht man nun mit der Maus rüber, werden die in Farbe dargestellt. Es ist an sich eine recht einfache geschichte, die mit jQuery erst richtig Spaß macht.
Ich wünsche Ihnen viel Spaß beim Lesen! Über Kommentare und Social Bookmarks würde ich mich sehr freuen.
Fangen wir also an. Als erstes müssen wir natürlich das HTML-Gerüst bauen. Ich habe mich bdabei für eine Liste entschieden. Das schien mir semantisch am passendsten zu sein. Die einzelnen Listenelemente sind der Klasse “star_off” zugeordnet und beinhalten noch einen Link, der später zum Versenden der Bewertung gebraucht wird. Zusätzlich erhält dieser ein bisschen Futter für die Suchmaschiene, bleibt aber für den Benutzer quasi unsichtbar. Setzen Sie das beschriebene um, dann müssten Sie einen ähnlichen Code erhalten:
<ul id="rating"> <li class="star_off"><a title="Ich vergebe dem Rezept 1 Punkt" href="?star=1">Ich vergebe dem Rezept 1 Punkt</a></li> <li class="star_off"><a title="Ich vergebe dem Rezept 2 Punkte" href="?star=2">Ich vergebe dem Rezept 2 Punkte</a></li> <li class="star_off"><a title="Ich vergebe dem Rezept 3 Punkte" href="?star=3">Ich vergebe dem Rezept 3 Punkte</a></li> <li class="star_off"><a title="Ich vergebe dem Rezept 4 Punkte" href="?star=4">Ich vergebe dem Rezept 4 Punkte</a></li> <li class="star_off"><a title="Ich vergebe dem Rezept 5 Punkte" href="?star=5">Ich vergebe dem Rezept 5 Punkte</a></li> </ul>
Jetzt müssen wir die Liste nur noch etwas formatieren. Schließlich sollen alle Sterne nebeneinander dargestellt werden. Zumal wir jetzt noch gar keine Sterne haben.
#rating li { float:left; }
Nun lassen Sie uns jetzt die grauen, deaktivierten, Sternchen einfügen. Dazu erstellen wir eine neue Klasse “star_off”. Das wird die Standardklasse sein.
#rating li.star_off { background:url('lib/images/star_off_48.png') no-repeat left top; }
Jetzt müssen wir noch eine weitere Klasse mit dem farbigen, aktivierten, Stern erstellen:
#rating li.star_on { background:url('lib/images/star_48.png') no-repeat left top; }
Da wir in unserem Beispiel auch einen Linktext haben, würde dieser nur stören. Der ist einfach viel zu lang und würde die Liste total auseinander ziehen. Zudem braucht man solch eine Beschreibung kaum. Schließlich sollte jeder gleich wissen, was die Sterne zu bedeuten haben. Also blenden wir den Text doch einfach komplett aus. Dazu definieren wir eine feste Höhe und Breite von 48px. Das entspricht der Höhe und Breite der Icons.
#rating a { display:block; font-size:0px; width:48px; height:48px; }
Jetzt kommt der eigentlich spannender Teil. Die Animierung mit jQuery. Der Effekt wird bei drüberfahren mit der Maus aktiviert. Dazu benötigen wir das hover()-Event. Im Grunde genommen müssen wir nur dafür sorgen, dass allen Sternen vor dem “anvisierten” Stren der Klasse “star_on” und alle nach ihr der Klasse “stern_off” zugewiesen werden.
$('.star_off').mouseover(function(){ $(this).removeClass('star_off').addClass('star_on'); $(this).prevAll('.star_off').removeClass('star_off').addClass('star_on'); $(this).nextAll('.star_on').removeClass('star_on').addClass('star_off'); });
Was jetzt noch fehlt ist, dass die Sterne alle deaktiviert werden, sobald man mit der Maus wo anders ist. Momentan bleiben sie einfach aktiviert. Außerdem wird Ihnen wohl das nervige Blinken aufgefallen sein, dass jedes Mal auftaucht, wenn man zwischen den beiden Listenelementen ist.
Doch auch das kann man noch anpassen. Sie müssen lediglich dafür sorgen, dass die oben geschriebene Funktion nur dann ausgeführt wird, wenn die Maus sich wirklich in der Liste mit der ID “rating” befinden.
$('#rating').hover(function(){ // Vorherige Sterne aktivieren und nachkommende ausblenden });
Verlassen wir die Liste, so müssen auch alle Sterne erlöschen. Das wird in dem untersten Teil definiert.
$(document).ready(function() { $('#rating').hover(function(){ // Vorherige Sterne aktivieren und nachkommende ausblenden }, function() { $('.star_on').removeClass('star_on').addClass('star_off'); }); });
Nun sind wir auch am Ende angelangt. Der fertige Code sieht dann folgendermaßen aus:
$(document).ready(function() { $('#rating').hover(function(){ $('.star_off').mouseover(function(){ $(this).removeClass('star_off').addClass('star_on'); $(this).prevAll('.star_off').removeClass('star_off').addClass('star_on'); $(this).nextAll('.star_on').removeClass('star_on').addClass('star_off'); }); }, function() { $('.star_on').removeClass('star_on').addClass('star_off'); }); });
Duke Hunter ¦ 12.02.2010 - 12:32
Schlecht beschrieben. Für mich zu Kopliziert.
Das ergebniss ist ungenügent
—————————–
[Hier stand der Quellencode aus dem Tutorial darüber.]
———————————–
Was soll dass ein?
Funktioniert nichts
Was soll das für eine Erklärung sein?
Fach-Chinesisch? damits extra keiner kapiert?
StarSt0rm ¦ 12.02.2010 - 16:22
Was genau verstehst Du nicht? An was ist es gescheitert? Wenn Du diese Fragen beantworten würdest, dann würde dein Beitrag als konstruktive Kritik durchgehen und ich würde versuchen es für Dich zu erläutern. So kann ich dir auch kaum weiterhelfen.
Nein, eigentlich habe ich versucht es so simpel wie möglich zu halten, aber gewisse Vorkenntnisse sind schon nötig.
asipak4you ¦ 23.02.2010 - 16:26
Hi starstorm,
ich hatte mir für meine Seite auch im letzten Jahr ein Sternchenbewertungssystem geschrieben, damals allerdings noch nicht auf Basis von jQuery. Daher habe ich mal dein Script ausprobiert und in ein aktuelles Projekt integriert.
Ich habe das Script zum Laufen bekommen, ohne deine Beschreibung zu lesen, nur indem ich die Codeschnipsel kopiert habe. Allerdings verstehe ich auch etwas davon und muss Duke Hunter recht geben. Für einen Anfänger, der von jQuery noch nichts gehört hat und vielleicht gerade mal ein paar HTML-Tags öffnen und schließen kann, ist die Beschreibung nicht ausführlich genug. Zum Beispiel könntest du noch sagen, welcher Code in welche Datei gehört und das man sich zunächst eine jquery – Javascript Datei herunterladen oder von extern einbinden muss, damit der oben genannte Code auch funktioniert
Ansonsten ist das Script wirklich eine super Sache. Es ist zur Zeit für eine Bildergalerie im Einsatz: http://www.messenger-inside.de/272,galeriebild,-baaby-.html . Kannst du ja als Referenz für dein Script angeben, wenn du magst.
Gruß
StarSt0rm ¦ 24.02.2010 - 12:54
Das nenne ich doch mal ein Kommentar!
Ich danke dir für den ausführlichen Beitrag. Solche Kritik bringt doch deutlich mehr.
Werde mir das zu Herzen nehmen und bei den folgenden Artikeln beachten.
Roland ¦ 13.10.2010 - 11:50
Wat? Alles easy. Keine Ahnung, warum der erste Kommentator sich so aufregt. Jetzt brauche ich nur noch Sternchen
Danke.
StarSt0rm ¦ 29.10.2010 - 07:07
Danke! Für Icons kann ich dir den iconfinder.com empfehlen.
Bond ¦ 06.11.2010 - 16:18
Hi,wie läuft es eigentlich mit jQuery?Kenn mich da nicht aus
StarSt0rm ¦ 06.11.2010 - 22:48
Hallo Bond, was genau möchtest du den wissen? Kann deine Frage leider nicht so wirklich verstehen.
Bond ¦ 07.11.2010 - 00:19
Hat sich erledigt
,allerdings hab ich ein neues Problem.
Was muss ich machen damit die Sterne “1-5″ angezeigt bleiben,je nach Bewertung?
StarSt0rm ¦ 08.11.2010 - 07:55
Du müsstest die Eingabe in eine Datenbank oder Datei speichern und dann auslesen.
Bond ¦ 12.11.2010 - 13:53
Hi,kannst du das etwas genauer erklären? Weil von php hab ich nicht viel Ahnung.
unknown ¦ 19.12.2010 - 00:45
@ bond du musst nicht unbedingt php nehmen, du musst nur halt irgendwie daten aus einer datenbank auslesen oder sie dorthin schreiben, und dann mit der anzahl der sternchen synchronisieren
unknown ¦ 19.12.2010 - 00:47
Außerdem sollten die Leute weniger meckern, du zeigst wie man mit jequery bewertungssysteme erstellt, dann sollte man auch ahnung von jquery haben
wer es nicht versteht sollte sich vll erstmal die grundlagen von jquery oder javascript anschauen, denn schwierig ist das beispiel nun wirklich nicht
andi ¦ 15.09.2011 - 15:27
Sers,
ich habe ganz einfach versucht das Beispiel nachzubilden und bekomme im Ergebniss die normale Liste nicht ganz weg. Vielleicht könntest du schnell drüber schauen? Den Link habe ich unter “Website” angegeben. Ich sehe nichtmal einen Unterschied zu deiner Demo…
Vielen Dank!
Andreas
andi ¦ 15.09.2011 - 22:31
hat sich erledigt, danke
StarSt0rm ¦ 16.09.2011 - 05:12
Es freut mich, dass es doch geklappt hat. Magst du den kurz erzählen was der Fehler war? So werden andere diesen unter Umständen vermeiden.
Chris ¦ 18.10.2011 - 09:58
Hallo StarStorm. Ersteinmal Danke! Gleich in einem sehr großem Projekt verbaut.
Aber eine Frage habe ich noch. Wie kann ich das machen, dass dann zb. 3 Sternchen
schon angezeigt werden, wenn die Bewertung 3 ist? Also mit php usw hab ich schon alles bloß
in js bin ich nicht so fit
StarSt0rm ¦ 18.10.2011 - 10:58
Wie meinst du das genau? Wenn es bereits Bewertungen gibt, dann liest du dir diese aus, berechnest den Durchschnitt und setzst die entsprechenden Sternchen mit der Klasse “star_on” auf “on”
Ich glaube du meinst genau das: http://www.starstormdesign.de/ausgabe-der-durchschnittlichen-bewertung/
Chris ¦ 18.10.2011 - 11:38
Ja, also ich meine jetzt, wie ich denn das jetzt anzeigen soll.
Also ich habe schon alles abgerufen, aber gibt es irgendein Script, was bewirkt, dass
eben die Klasse der Sternchen auf star_on gesetzt wird?
StarSt0rm ¦ 18.10.2011 - 12:00
Das ist doch genau das was unter dem Link beschrieben wird.
Chris ¦ 18.10.2011 - 12:03
Mh.. Ja ne das meine ich nicht, aber ok..
Trotzdem sehr sehr schön <3
Ps: kann man sich eigl. auch als Autor bewerben?
StarSt0rm ¦ 18.10.2011 - 12:05
Wenn du Zeit und Lust hast
Chris ¦ 18.10.2011 - 12:06
Öhm.. schrieb mir mal ne mail (ist hier angegeben)
asipak4you ¦ 18.10.2011 - 14:16
Hallo StarSt0rm,
kannst du mich bitte aus dem Mailverteiler von deinem Blog rausnehmen? Ich bekomme sämtliche Antworten zu diesem Thema per Mail zugeschickt, obwohl mich das überhaupt nicht interessiert. Die Mailadresse, um die es geht, müsste dem Kommentar #3 zugeordnet sein. Diesen Kommentar kannst du dann auch gleich löschen.
Danke.
Gruß
StarSt0rm ¦ 18.10.2011 - 14:28
Ich kann leider nicht sehen wer alle welche Kommentare abonniert hat. Aber jede E-Mail beinhaltet doch einen Link mit dem du dich aus der Liste austragen kannst. (To manage your subscriptions or to block all notifications from this site, click the link below…)