Star Rating (jQuery Plugin)

You can reveal pretty rating stars by this plugin. This plugin working fast because there is no user options. Just include and call it. If you would like store votes in a database then you must use callback method. Keep in mind its only beta version. Please let me know if you found any bug. Follow this document for more information.

Version and development

Dependencies
: jQuery 1.3.2 or higher
Latest Version
: 0.3b

Browser Support

Tested with the browsers below:

  • Mac OS X
    • Firefox 3.x, 4.x … 10.x
    • Chrome 7.x
    • Opera 10.63
    • Camino 2.1.x
    • Safari 5.x
  • Windows
    • No tests have been made as I don’t have any Windows installation.

Download

Github
: jQuery Star Rating on Github
All versions
: Check current or old versions

Demo

After set up the plugin, your page gonna be look like below;

Rate this page!

This demo is working by just a line.

 $('#star-rating-demo').rating();

How to Use

1. Include css and js files

Include jQuery and star rating plugin files in your code

<link rel="stylesheet" type="text/css" src="rating.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="rating.js"></script>

2. Prepare HTML part

You must have some input for rating plugin. If javascript wont work for any reason the rating part keep gonna work. Please dont put any other line of html into the #star-rating element.

<div id="star-rating">
    <input type="radio" name="example" class="rating" value="1" />
    <input type="radio" name="example" class="rating" value="2" />
    <input type="radio" name="example" class="rating" value="3" />
    <input type="radio" name="example" class="rating" value="4" />
    <input type="radio" name="example" class="rating" value="5" />
</div>

3. Initialize the plugin

Write just a line code inside the document.ready function.

$(function(){                   // Start when document ready
    $('#star-rating').rating(); // Call the rating plugin
});

4. Example usage with callback

If you would like to store the votes by ajax call or do something after user votes you must use callback method. Its easy of use. Please look the example below.

$(function(){
    $('#star-rating').rating(function(vote, event){
        // we have vote and event variables now, lets send vote to server.
        $.ajax({
            url: "/get_votes.php",
            type: "GET",
            data: {rate: vote},
        });
    });
});

Change Logs

0.3b

  • Performance improvements
  • Fixed crash problem on some version of browser

0.2b

  • Performance improvements
  • Using DataURI instead of rating.png
  • Examples updated.
  • Fixed couple of bugs.
  • Using 1 cell of stars instead of 5. We save 0.4 kb by this

0.1b

  • Plugin released.