MooTools Rating Plug-In
MooTools Rating Plug-In
Have you ever wondered how the rating stares work? In advanced JavaScript this has been never so easier. This kind of form elements generally found in blog for getting feedback of their usability. Some days before it was like some boring radio buttons or checkboxes. There is a mootools plug-in ‘moostarrating’ to make these kinds of works handy. Moostarrating is a plug-in that creates a non-obstructive star ratings control based on a set of radio input boxes. So let’s make a sample rating tool with it.
The HTML:
|
<!—Form elements – Radio buttons –> <form name=”basic”> <input type=”radio” name=”rating” value=”1”> <input type=”radio” name=”rating” value=”2”> <input type=”radio” name=”rating” value=”3”> <input type=”radio” name=”rating” value=”4”> <input type=”radio” name=”rating” value=”5”> </form>
<!—Here radios have a default value, 2.5 –> <form name=”simple”> <label>Rate this article</label> <input type=”radio” name=”my_rating” value=”0.5”> <input type=”radio” name=”my_rating” value=”1.0”> <input type=”radio” name=”my_rating” value=”1.5”> <input type=”radio” name=”my_rating” value=”2.0”> <input type=”radio” name=”my_rating” value=”2.5” checked> <input type=”radio” name=”my_rating” value=”3.0”> <input type=”radio” name=”my_rating” value=”3.5”> <input type=”radio” name=”my_rating” value=”4.0”> <input type=”radio” name=”my_rating” value=”4.5”> <input type=”radio” name=”my_rating” value=”5.0”> <span id=”simpleTip”></span> </form>
|
Here you can notice that I’m increasing rating value with .5 bases. You can use your comfortable contrast. By default the rating will be checked on 2.5. No CSS is required for this html body. Just skip to the scripting section.
The JavaScript:
First step to start is to configure image paths in an instance. We need three images to go.
|
// Configuring image path Var MooStarRatingImages = { defaultImageFolder = “../js/images/”, defaultImageEmpty = “empty.png”, defaultImageFull = “full.png”, defaultImageHover = “hover.png” };
|
Now we have to instantiate the moostarrating object.
|
var postId = 55;
// After DOM getting ready window.addEvent(“domready”,function() { // Creating instance var starRater = new MooStarRating({ form: “ratingsForm”, radios: “rating”, half: true, //imageEmpty: “star_boxed_empty.png”, //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” }); // Rating event starRater.addEvent(“click”,function(value) { // Send ajax request to server new Request.send({ url: “rating.php”, data: { rating: value, postId: postId } }); }); });
|
For more variation, you can send your own parameters. Here increasing value is ‘half’ and this is the value set by default. So what do you think… easy? Now time to do your own creation.
Related posts:
No Comments
No comments yet.
RSS feed for comments on this post.
Sorry, the comment form is closed at this time.
