This is just a little snippet that can enable you to use star based rating on a page and interactively do something with the voting results. It is not a plug and play solution, you can attach whatever events you want to it and have complete control over the number of stars on show, the colour transitions and formatting.

window.addEvent("domready", function() {
    doRating(4.6, true, {
        targetObject: $("myrating"),
        clickEvent: function(ratingOptions) { // save the vote
            new Request({
                url: "ratinger.php",
                method: "get",
                onComplete: function() {
                    alert("saved via ajax!");
                }
            }).send("a=vote&ratingID="+ratingOptions.ratingID+"&rating="+ratingOptions.newRating);
        }
    });
}); // end domready

Here is an example use with defaults, start value of 4.5 and an empty layer called “myrating” to hold it all:

You can run more than one instance of a “ratinger” per page, naturally – but they do need distinct IDs in order to differentiate the click events when saving data via ajax. This time, something very, very different: a 6 star rating in the style of a retro hi-fi stereo output indicator (a new gif file for the background), with the start value of 3.6 (4 stars) and ‘tips’ enabled: here is myrating2:

The code behind the above vote instance (if you can’t be bothered to view the source):

doRating(3.6, true, { 
    // use some default value you have read from the DB that represents your start / current rating
    targetObject: $("myrating2"),
    maxStars: 6,
    tipShown: true,
    background: '#010',
    colourBase: '#550000',
    colourTarget: '#00cc00',
    starWidth: 22, 
    border: 0,
    tipPadding: 0,
    starSpacing: 1,
    starHeight: 10,
    imageURL: '/images/stereo.gif',
    clickEvent: function(ratingOptions) { // save the vote
        new Request({
            url: "ratinger.php",
            method: "get",
            onComplete: function() {
                alert("saved via ajax!");
            }
        }).send("a=vote&ratingID="+ratingOptions.ratingID+"&rating="+ratingOptions.newRating);
    }
});

How to use on your site
As usual, nothing you get from this site just works, it requires you to actually know what you are doing… Using this particular mootools vote snippet is very simple, however. First, download the mooRating javascript source and save it. Include on a page after your usual mootools init lines and within domready, you can instigate a ‘ratinger’ / ‘vote’ widget within any element as defined by your html / css. You will probably need to save the star.gif image I made or make your own with some transparency…

Here are the default options the mooRating function supports:

var doRating = function(rate, addevents, options) {
    // mootools star rating system by dimitar christoff
    // v2.1 for mootools 1.2.1
    // last modified: 09/12/2008 19:37:15
    
    // defaults
    var options = $merge({
        background: '#fff', // vote cell background
        colourBase: '#f4edaf', // start colour (left side)
        colourTarget: '#f9e526', // end colour (right side)
        maxStars: 10, // number of stars 
        starWidth: 24, // box with
        starHeight: 22, // box height
        starSpacing: 0, // space between stars
        imageURL: "/images/star.gif", // url to box background image
        tipPadding: 8, // padding around the vote text
        tipSize: "12px", // size of text in tip
        tipShown: false, // toggle tips
        border: "1px solid #ffffff", // border around the "stars"
        clickEvent: $empty() // what to pass as a function on click
    }, options);
// .. and so on and so forth.

I hope it helps somebody to add easily votes or product ratings on their pages with plenty of control. NB: you need color.js compiled into your version of mootools or you need to take out the colour gradiency.