<< back to main page

Code generator


 


e.g. 0 or 0.5
round mean to step
display "mean" or only the last rate from current user
user can change his rate
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)
%i - hover/pointed index number (depends on | number in texthover)
%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>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Five Stars</title>

 	<!-- Including style for tooltip if necessary -->
        <link type="text/css" rel="stylesheet" href="css/tooltip.css"/>
        
        <!-- Including jQuery 1.7 or higher 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 with settings
                $(".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>