jQuery Ajax Star Rating
March 3rd, 2007
Tags: ajax, browser, css, Design, html, javascript, jquery, opensource, pluginsFür ein aktuelles Projekt brauchte ich so eine hübsche Sternchenbewertung. Meine Wahl fiel auf Komodo Medias CSS Lösung, da diese einfach in den meisten Browsern funktioniert und kein Javascript benötigt. Aber mit Javascript ist eben nun mal alles viel schöner und da das Projekt mit jQuery produziert wird, stiess ich auf ein Plugin das ähnlich aussah, aber eben dynamisch generiert wurde. Tolle Idee! Leider nicht so tolle Browserunterstützung. Im IE6 verschwanden die Grafiken. Schade.
Ich habe daher auf Basis des Skripts mein geliebtes Komodo-system eingebaut und die Funktion noch ein wenig erweitert und zum Teil verbessert. Es ist möglich unendlich viele Sterne mit der Komodo Methode zu haben (anstatt nur 5 mit statischen CSS Klassen). Mein Plugin rechnet die nötigen Werte selber aus.
Natürlich sind die sehr nützlichen Optionen des Vorgängers geblieben. Man kann festlegen wieviele Sterne, wieviele vorausgewählt sein sollen und an welche Adresse das Ergebnis des Klicks gesandt werden. Ich habe allerdings eine Callback Funktion eingebaut die das ebenfalls dynamisch erstellte Ergebnis-Element mit dem HTML der XHR Response füllt. Click->POST->Result.
Ich habe eine Demo-Seite erstellt wo man das 5K grosse, beziehungsweise 2K gepackte Skript samt CSS und Beispiel runterladen kann.
http://www.m3nt0r.de/devel/raterDemo/
March 3rd, 2007 at 12:44
aber ich bin kein techie. kannst daraus ein wp-plugin basteln, dass leute wie ich benutzen können ;-)
oder ne idiotensichere anleitung basteln ?
March 3rd, 2007 at 14:34
It would be great to have you among our worldwide network of bloggers at UBSquare
March 3rd, 2007 at 16:44
Jan: Ja, das würde gehen. Allerdings gibt es ein solches Plugin bereits. Es benutzt zwar einen anderen star-rater, aber ist eigens für wordpress entwickelt. Mein script richtet sich eher an die Entwickler solcher plugins und da es schon eines gibt, werde ich keinen zweiten Versuch unternehmen. Das überlass ich lieber jemand anderem :) Schau einfach mal bei wp-plugins.net .. Post Star Rating is recht gut.
March 3rd, 2007 at 17:18
Infact I make custom theme for people too tailored to their need and taste..for Free..it’s just like my hobby.
Do tell me if that sounds interesting for you…thanks indeed for your income.
August 2nd, 2007 at 19:12
Aber kannst mal genauer beschreiben, wie und wo man was hinlädt?!
THX
October 2nd, 2007 at 19:19
October 3rd, 2007 at 11:49
June 5th, 2008 at 13:19
wie speichert man denn die Bewertung so, dass man das dann auf einer Website einsetzen kann. Gibt es dazu auch irgendwo eine Anleitung?
June 7th, 2008 at 07:38
Auf jeden Falls solltest du dich mit dem Thema “Ajax” beschäftigen. Dort findest du dann genügend Beispiele wie man von Javascript Daten an einen Server sendet. Dann bau dein lauffähiges Ergebnis um, so dass es das Rater Script benutzt und du bist auf dem besten Wege es herrauszufinden. Zumindest hast du dann das Grundprinzip erlernt.
Sorry dass ich dir kein Rezept geben kann.
September 2nd, 2008 at 15:20
großartiges Plugin! Mir hat aber die Möglichkeit gefehlt, auch eine Callback - function für mehr Flexibilität anzugeben - vielleicht wäre das eine sinnvolle Ergänzung:
$('#inlineX').rater('URL', {style: 'inline', curvalue:2, callback: function(response, container){
alert('ok')
}});
und im script
jQuery.post(container.url, { "rating": raterValue }, function(response){
if(settings.callback != null) {
settings.callback(response, container);
} else {
container.children('.star-rating-result').html(response)
}
});
September 6th, 2008 at 23:42
September 9th, 2008 at 13:04
Zusätzliche Paramater:
count : 0 // anzahl der Votes
hasrated : false // flag, ob user gevoted hat
label : ‘ø %c / %t, %v Votes’ // zeigt das ganze nochmal in zahlen
wenn hasrated == true, span, nicht a
if( settings.hasrated ) {
listitems+=’i’
}
und das label
if( settings.label ) {
var label = settings.label.replace(/%c/,settings.curvalue).replace(/%t/,settings.maxvalue).replace(/%v/,settings.count);
container.append(” + label + ”);
}
so long
September 25th, 2008 at 11:12
October 1st, 2008 at 10:24
please
August 6th, 2009 at 20:08
August 11th, 2009 at 07:58
Kann man das Plugin eigentlich auch zurücksetzen?
Wenn ich ein Bild dynamisch anzeigen lasse und abstimme, anschließend ein neues Bild anzeige (ohne die ganze Seite neu zu laden), sollte auch das Voting von vorn beginnen…
Viele Grüße!
September 3rd, 2009 at 14:21
September 7th, 2009 at 03:33
http://www.ichwillspielen.com
Viele Grüße
lien
September 22nd, 2009 at 00:03
sorry I can’t speak German ^^;
I would like to use this script, but I don’t understand how it works, I tried to put the files (jquery.rater.js, jquery.rater.packed.js, rater.css, ratingsdemo.php, star.gif, and star_small.gif) in the same folder on my website, then I made a test page. I this page I had :
But I always have an error :
Parse error: syntax error, unexpected ‘(’, expecting T_VARIABLE or ‘$’ in /home/users/l/lina/www/rater/test.php on line 38
I don’t really know how I should use this script, could you please help me ?
Thanks in advance ^_^!