<< back to main page

Code generator




e.g. 0 or 0.5
round mean to step
animate
enable






show during milliseconds

Text masks:
%m - mean rate (measured in %)
%ms - mean rate (stars)
%p - hover/pointed rate (%)
%ps - hover/pointed rate (stars)
%maxs - total number of stars
%v - number of votes
%r and %rr - total (%r) and rest (%rr=%r-%v) required number of votes to display stats

* all text can be HTML formatted

Execute your custom functions on following events:

on stats loaded
on click
on mouse move
on mouse out

Complete html code

* Dont forget to provide the correct paths to .js (and manager.php) files
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Five Stars</title>

        <!-- Including jQuery and rating plugin -->
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.5stars.min.js"></script>
        
        <!-- Starting rating plugin -->
        <script type="text/javascript">
            $(document).ready(function(){ 

	//start plugin
                $(".stars").rating({                       
                    php : 'path/to/manager.php',    //path to manager.php file relative to HTML document. Not required in Display-only and Database-free modes.
                    skin    : 'skins/skin.png',      //path to skin file relative to HTML document
                });                 

      });
	  
	           
        </script>   

    </head>
    <body>

        <p>Normal mode (stats stored in database, requires PHP)</p>
        <!-- 1. Stars will appear here. Note: unique item Id is required -->
        <div class="stars" data-id="itemId" data-title="optional short item description"></div>

        <p>Display-only mode (displays values which you provide in html)</p>
        <!-- 2. Display-only mode -->
        <div class="stars" data-value="60" data-votes="45" data-displaymode="true"></div>

        <p>Database-free mode: rate stored locally (browser MUST support <a href="http://diveintohtml5.info/storage.html">HTML5 localstorage</a>)</p>
        <!-- 3. Database-free mode (browser MUST support HTML5 localstorage) 
          Note: unique item Id is required; php MUST be set to ""  -->
        <div class="stars" data-id="itemId2" data-php="" data-textmain="you gave %ms out of %maxs stars"></div>

    </body>
</html>