I needed a very simple jQuery Star Ratings Plugin, and what I found available out there just seemed too cluttered and complicated, so I came up with my own. The idea was to create something with the small amount of code possible, that would have two features: show rating, and allow for adding star rating to any type of form simply taking over a input filed
So here is what I came up with in a few hours:
(function ($) {
$.fn.stars = function (op) {
var starHtml = "<div><ul class=\"stars clearfix\"><li><a href=\"#1\" class=\"star_1\" rating=\"1\"><span class=\"selected\"></span></a></li><li><a href=\"#2\" class=\"star_2\" rating=\"2\"><span class=\"selected\"></span></a></li><li><a href=\"#3\" class=\"star_3\" rating=\"3\"><span class=\"selected\"></span></a></li><li><a href=\"#4\" class=\"star_4\" rating=\"4\"><span></span></a></li><li><a href=\"#5\" class=\"star_5\" rating=\"5\"><span></span></a></li></ul></div>";
return this.each(function () {
var wrap = $(this),
html = $(starHtml),
d = $(".dd", html),
a = $("a", html),
currentRating = wrap.attr("rating"),
isReadOnly = true;
if (typeof currentRating == "undefined") {
currentRating = "0";
isReadOnly = false;
}
//rating
html.addClass("stars_" + currentRating);
//bind events if is not read only
if (isReadOnly) {
//return false on click
a.click(function () {
return false;
});
//kills link default cursor
a.css("cursor", "default");
}
else {
//add default rating (0)
wrap.val(currentRating);
//click
a.click(function () {
var _this = $(this),
r = _this.attr("rating");
//add value
wrap.val(r);
//remove class
var currentClass = html.attr("class");
html.removeClass(currentClass);
//add current class
html.addClass("stars_" + r);
//update current
currentRating = r;
return false;
});
//hover
a.hover(function () {
var _this = $(this),
r = _this.attr("rating");
//add value
wrap.val(r);
//remove class
var currentClass = html.attr("class");
html.removeClass(currentClass);
//add current class
html.addClass("hover_" + r);
return false;
},
function () {
var currentClass = html.attr("class");
html.removeClass(currentClass);
//add current class
html.addClass("stars_" + currentRating);
currentRating
return false;
});
}
//put on page
wrap.after(html).hide();
});
};
})(jQuery);
And this is how you can use this plugin:
<p>Display Stars</p>
<span class="star_rating" rating="1"></span>
<span class="star_rating" rating="2"></span>
<span class="star_rating" rating="3"></span>
<span class="star_rating" rating="4"></span>
<span class="star_rating" rating="5"></span>
<p>Rate With Stars</p>
<input name="rating" value="0" class="star_rating" />
And here is how you can initiate it:
$(".star_rating").stars();
It works great for blog post comments, or simple directories, as this is where I am using it
You can download the source code of the star jquery plugin here.
Samsung Soul
12/26/2010 9:15 AM
This is amazing, I don’t know what else to say. Perfect execution of a cool idea!
Rock and roll hall of fame
12/27/2010 2:38 PM
I’ve turn out to be a devoted admirer of the website for some time but not actually supplied just one thing back, I hope to alter that within the future with more conversation.Thanks for another new addition to the internet website.
Ipl live score
12/31/2010 7:46 PM
Great article here, and a valuable reference. Prior to reading this,
Google sketchup
1/3/2011 3:57 AM
I completely agree with the above comment, the internet is with a doubt growing into the most important medium of communication across the globe and its due to sites like this that ideas are spreading so quickly.
provides access
1/17/2011 1:11 AM
Seems like sellers of these things simply have another model for generating revenue. To this end, I’ll look for other, less expensive, marketing tools. Thanks for this hard research.
painter 11
1/17/2011 10:12 AM
Very useful list of templates…thanks for the compilation!
sun country airlines
1/28/2011 12:40 AM
I don’t usually reply to posts but I will in this case. WoW
bofa online banking sign in
2/22/2011 11:13 AM
I just cant stop reading this. Its so cool, so full of information that I just didnt know. Im glad to see that people are actually writing about this issue in such a smart way, showing us all different sides to it. Youre a great blogger. Please keep it up. I cant wait to read whats next.