12
2011
MooTools Star Ratings with MooStarRating
An article by qeqnes
I’ve said it over and over but I’ll say it again: JavaScript’s main role in web applications is to enhance otherwise boring, static functionality provided by the browser. One perfect example of this is the Javascript/AJAX-powered star rating systems that have become popular over the past five years. Star rating systems are attractive, allow us to avoid ugly forms, and prevent unnecessary page reloads. A new plugin by Lorenzo Stanco called MooStarRating has hit the MooTools Forge and I wanted to share with you how to use it.
The HTML
The star rating system uses an HTML form with radio buttons as the base:
<form name="ratingsForm"> <label>Do you like this post?</label> <input type="radio" name="rating" value="0.5"> <input type="radio" name="rating" value="1.0"> <input type="radio" name="rating" value="1.5"> <input type="radio" name="rating" value="2.0"> <input type="radio" name="rating" value="2.5"> <input type="radio" name="rating" value="3.0"> <input type="radio" name="rating" value="3.5"> <input type="radio" name="rating" value="4.0"> <input type="radio" name="rating" value="4.5"> <input type="radio" name="rating" value="5.0"> <input type="radio" name="rating" value="5.5"> <input type="radio" name="rating" value="6.0"> <input type="radio" name="rating" value="6.5"> <input type="radio" name="rating" value="7.0" checked="checked"> <input type="radio" name="rating" value="7.5"> <input type="radio" name="rating" value="8.0"> <input type="radio" name="rating" value="8.5"> <input type="radio" name="rating" value="9.0"> <input type="radio" name="rating" value="9.5"> <input type="radio" name="rating" value="10.0"> <span id="htmlTip"></span> </form>
Note the ID of the form and the name of the radio buttons — we’ll use those when creating our MooStarRating instance. Also note that I’m creating “half” rating options, as well as using checked to note what the current average rating is.
The CSS
This plugin requires no additional CSS. That’s a bonus as it’s one less server request.
The MooTools JavaScript
The first step in using MooStarRating is defining the image paths for the stars:
// Configure the image paths
var MooStarRatingImages = {
defaultImageFolder: "/js/mooStarRating/images",
defaultImageEmpty: "empty.png",
defaultImageFull: "full.png",
defaultImageHover: "hover.png"
};
Once the path and image names are defined, it’s time to create an instance of MooStarRating:
// A fake post ID for the sake of submission
var postId = 10;
// When the DOM is ready....
window.addEvent("domready",function() {
// Create our instance
var starRater = new MooStarRating({
form: "ratingsForm",
radios: "rating",
half: true,
//imageEmpty: "star_boxed_empty.png", // For setting special images
//imageFull: "star_boxed_full.png",
//imageHover: "star_boxed_hover.png",
width: 17,
tip: "Rate as <i>[VALUE] / 10.0</i>",
tipTarget: document.byId("htmlTip"),
tipTargetType: "html",
click: function(value) {
// Send ajax request to server
new Request.send({
url: "rating.php",
data: { rating: value, postId: postId }
});
}
});
});
MooStarRating is loaded with options. Here we pass the form ID and the name we provided to the radio buttons. As I’m allowing half-stars, the half option is set to true. MooStarRating also provides a “tip” functionality which allows a message to be displayed along side the star rating. Lastly, the click event provides the user’s rating for which you may send an AJAX request to the server to save the rating. Simple!
That’s it! I love this plugin because it’s simple and effective. Big props go to Lorenzo Stanco for his excellent piece of work. If there’s enough interest, I’ll create a tutorial that includes enough PHP and MySQL to get this rating system working with real data.
Related Posts
4 Comments + Add Comment
Leave a comment
Tags
Ads
Great blog. I was checking continuously this blog and I am impressed! Very useful information specifically the first part. I care for such info much. I was seeking this certain information for a long time. Thank you and best of luck.
Great tinhinkg! That really breaks the mold!
Your awnesr was just what I needed. Its made my day!
Great post with lots of imoprntat stuff.