Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Star rating class

Star rating class can be used to display rating using empty and full star graphics (user defined or default package graphic) and allow visistors to rate items from 1 to user defined value, by displaying full/empty stars on mouse movement and passing value through get or post

Package contains star_rating.js and star_rating.packed.js (packed javascript), two graphic files (empty.png and full.png), and example file

Contents

Download

Example codes

<?php
print_r($_POST);
?>
<html>
<head>
</head>
<body>
<!--- Display rating --->
<p>Display rating: </p>
<div id="rating"></div>
<!--- Rate item --->
<p>Rate item: </p>
<div id="rate_star"></div>
<script type="text/javascript" 
    src="./star_rating.packed.js" ></script>
<script type="text/javascript">
//create rating instance
//parameter json with configuration values
var rate = new star_rating(
    {
        /*********************
         * Example of configuration 
         * options and default values
         *********************/
        //maximal rating(value greater than 0)
        max: 5,
        //graphic for empty star
        graphic_empty : "./empty.png",
        //graphic for full star
        graphic_full : "./full.png",
        //how to send data (possible values: post, get)
        send_type : "post"
    }
);
//creating ratable element
//parameter id of an element
rate.rate_item("rate_star");
//display rating
//parameter id of an element
rate.display_rating(2.5, "rating");
</script>
</body>
</html>

Examples in action

Example scripts provided with package in action:

Method list

Constructor

Back to method list

Method namenew star_rating(config)
DescriptionCreates class instance with specified configuration
Input parameters

Json structure with configuration parameters

  • integer max - maximal rating value (should be greater than 0), default value: 5
  • string graphic_empty - path and file name to empty star graphic, default value: './empty.png'
  • string graphic_full - path and file name to full star graphic, default value: './full.png'
  • string send_type - how to send data to server if value is post - data will be sent through post, get data will be used for any other value, default value: post
Example inputvar rate = new star_rating({max: 5, graphic_empty : "./empty.png", graphic_full : "./full.png", send_type : "post"});

Display rating

Back to method list

Method namedisplay_rating(rating, element_id);
DescriptionTakes provided element ID as container and create empty stars from 1 to maximal value provided in constructor, and fill them with full star graphics by calculating percentage - round((rating/max)*100)
Input parameters

double rating - rating value between 0 and max value

string element_id - id of html element which will contain star rating

Example inputdisplay_rating(2.5, "rating");
Example outputExample script Display rating section

Rate item

Back to method list

Method namerate_item(element_id);
DescriptionTakes provided element ID as container and create empty stars from 1 to maximal value provided in constructor with mouse events attached to fill all stars from left to current star where mouse cursor is positioned
Input parameters

string element_id - id of html element which will contain rating input, same string will be taken as key to send value through post or get.

For example if your provided ID is "rate_item", then you could access value through $_POST["rate_item"] or GET["rate_item"], depending on provided send_type value in constructor

Example inputrate_item("rate");
Example outputExample script Rate item section

Latest changes

None for now

Rate us

Like our script? Rate it at JavaScript > Hot Scripts

Scripts.com
RATE ME!

Try it out and Rate on JSclasses.org

Support

JS classes support forum or comments below


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus