jQuery – Sternchen Bewertungssystem

jQuery - Ein Bewertungssystem mit Sternchen erstellen.

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.

Live-Demo

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:

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.

Nun lassen Sie uns jetzt die grauen, deaktivierten, Sternchen einfügen. Dazu erstellen wir eine neue Klasse „star_off“. Das wird die Standardklasse sein.

Jetzt müssen wir noch eine weitere Klasse mit dem farbigen, aktivierten, Stern erstellen:

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.

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.

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.

Verlassen wir die Liste, so müssen auch alle Sterne erlöschen. Das wird in dem untersten Teil definiert.

Nun sind wir auch am Ende angelangt. Der fertige Code sieht dann folgendermaßen aus:

ALL-INKL.COM

39 Kommentars zu dem Artikel “jQuery – Sternchen Bewertungssystem”

  1. Avatar von Duke Hunter
    Duke Hunter

    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?

    • Avatar von StarSt0rm
      StarSt0rm

      „Schlecht beschrieben. Für mich zu Kopliziert.“

      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.

      „Fach-Chinesisch? damits extra keiner kapiert?“

      Nein, eigentlich habe ich versucht es so simpel wie möglich zu halten, aber gewisse Vorkenntnisse sind schon nötig.

  2. Avatar von asipak4you
    asipak4you

    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ß

    • Avatar von StarSt0rm
      StarSt0rm

      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.

  3. Avatar von Roland
    Roland

    Wat? Alles easy. Keine Ahnung, warum der erste Kommentator sich so aufregt. Jetzt brauche ich nur noch Sternchen 🙂 Danke.

  4. Avatar von Bond
    Bond

    Hi,wie läuft es eigentlich mit jQuery?Kenn mich da nicht aus

    • Avatar von StarSt0rm
      StarSt0rm

      Hallo Bond, was genau möchtest du den wissen? Kann deine Frage leider nicht so wirklich verstehen.

  5. Avatar von Bond
    Bond

    Hat sich erledigt 🙂 ,allerdings hab ich ein neues Problem.
    Was muss ich machen damit die Sterne „1-5“ angezeigt bleiben,je nach Bewertung?

    • Avatar von StarSt0rm
      StarSt0rm

      Du müsstest die Eingabe in eine Datenbank oder Datei speichern und dann auslesen.

  6. Avatar von Bond
    Bond

    Hi,kannst du das etwas genauer erklären? Weil von php hab ich nicht viel Ahnung. 🙁

  7. Avatar von unknown
    unknown

    @ 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 🙂

  8. Avatar von unknown
    unknown

    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 🙂

  9. Avatar von andi
    andi

    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

  10. Avatar von andi
    andi

    hat sich erledigt, danke

    • Avatar von StarSt0rm
      StarSt0rm

      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.

  11. Avatar von Chris
    Chris

    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 😀

  12. Avatar von Chris
    Chris

    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? 🙂

    • Avatar von StarSt0rm
      StarSt0rm

      Das ist doch genau das was unter dem Link beschrieben wird.

  13. Avatar von Chris
    Chris

    Mh.. Ja ne das meine ich nicht, aber ok.. 😀

    Trotzdem sehr sehr schön <3 😀

    Ps: kann man sich eigl. auch als Autor bewerben? 🙂

    • Avatar von StarSt0rm
      StarSt0rm

      Wenn du Zeit und Lust hast 😉

  14. Avatar von Chris
    Chris

    Öhm.. schrieb mir mal ne mail (ist hier angegeben) 🙂

  15. Avatar von asipak4you
    asipak4you

    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ß

    • Avatar von StarSt0rm
      StarSt0rm

      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…)

  16. Avatar von Da Bamba
    Da Bamba

    Der Artikel ist zwar nun ewig her, wollte aber dennoch mal Danke sagen. Einige der anderen Kommentare verstehe ich absolut nicht – hier schreibt jemand einen Artikel über ein Bewertungssystem in jQuery und die Leute maulen, warum da nicht gleich noch ein jQuery-, PHP-, CSS- und Html-Grundkurs dabei ist. Sachen gibts…

    • Avatar von Alexander Bogomolov
      Alexander Bogomolov

      Auch nach langer Zeit freut man sich über Kommentare. 😉
      Vielen Dank!

  17. Avatar von Sabine
    Sabine

    Hallo, finde das Script super COOL, klappt auch wunderbar.
    Möchte aber, dass wenn ein Besucher die Sternchen dann angeklickt hat, z.B: 3 Sterne das der Wert in einer MySQL-Tabelle gespeichert wird.
    Wie kann ich das realisieren ?
    Bin leider totale Anfängerin auf diesem Gebiet.

    • Avatar von Alexander Bogomolov
      Alexander Bogomolov

      Hallo Sabine,
      im Endeffekt musst du nicht zwangsläufig was tun. Schließlich hast du einen ganz normalen Link, auf den du klickst. Du musst nur dafür sorgen, dass der Link eine Datei aufruft, die die DB aktualisiert. Dann wird die Seite aber neu geladen. Willst du das vermeiden, dann kannst du den Request auch per AJAX schicken.

      $('#rating a').click(function(e) {
        e.preventDefault();
        $.get($(this).attr('href'), function(response) {
          alert('Vielen Dank!');
        });
      });

      Ich habe hier schnell ein Beispiel erstellt:
      http://jsfiddle.net/abogomolov/Fn72L/

  18. Avatar von Elvis
    Elvis

    Hi,

    Weisst du zufällig auch, wie ich es hinbekomme die Bewertungen von einer externen Seite auszulesen und auf meiner Webseite anzeigen zu lassen?

    MfG Elvis!

    • Avatar von Alexander Bogomolov
      Alexander Bogomolov

      Hast du einen Beispiel der Seite, von der du die Bewertungen auslesen willst?

      • Avatar von Elvis
        Elvis

        Hi! Vielen Dank erst mal für die Antwort..

        Als Beispiel kann man sich die Homepage anschauen http://www.24h-im-einsatz.de.

        Links neben dem Facebook-Widget ist ein Bewertungstool eines Bewertungsportals. Nun… So etwas möchte ich selber basteln..

        Dieses Tool zeigt die Endnote der Bewertungen und leitet einen weiter auf die Profilseite.. Auf der Profilseite kann man dann halt Bewertungen abgeben..

        Ich arbeite gerade an einem kleinen Branchenbuch für die Stadt Essen und hätte das halt auch gerne.. Nuuur, ich bin noch ratlos, wie ich das hinbekommen kann o.O

        Wäre dankbar jeglichen Tipp!!

      • Avatar von Elvis
        Elvis

        Ooder.. Vielleicht has du Lust auf einen Auftrag 🙂

        • Avatar von Alexander Bogomolov
          Alexander Bogomolov

          Ne,sorry. Da ist gerade keine Zeit für sowas. 🙂

  19. Avatar von Martin
    Martin

    Hi,

    wie kann man bei deinem Script einen Wert übergeben, den man auf einer nächsten Seite als Variable anzeigen lassen kann? Also, dass der Wert in eine Variable „bewertung“ z.B. geschrieben wird und auf einer nächsten Seite angezeigt werden kann, im Sinne von „Ihre Bewertung war 4 Sterne“?

    Danke und Gruß
    Martin

    • Avatar von Alexander Bogomolov
      Alexander Bogomolov

      Also das kommt immer auf die Anwendung an. Man kann die Daten auf die Folgeseite per POST senden oder in der Session speichern.

  20. Avatar von Alex
    Alex

    Wie kann ich dann Anzahl der Sternen in eine Variable speichern?Z.B es würde 3 Sterne ausgewählt.Wie kann ich dieses Wert(4) in eine variable speichern?