tangdaizheng / jquery.webrating

JQuery WebRating

##Demo

1. BigStar
2. Star
3. Hearts
4. Smile

###Features

• Easy to configure
• Precision upto 0.01
• Use stars, hearts, smiles or your logo
• Integrate with your own database
• CSS based coloring
• Customized toop-tip option
• Callback functions on click & hover
• Limit number of clicks per page view
• Use cookies to limit clicks per visitor

###How to use WebRating ####Step 1 Start with creating static or dyanmic div elements. Add "data-webRating" attribute to those divs which will include the ratings.

  <div class="divClass" data-webRating="2.5" data-webRatingN="5" data-webRatingArg='{"type":"book","uid":12}'></div>

####Step 2 Include WebRating plugin to your page.

<script type="text/javascript" src="js/jquery.webRating.js"></script>
<!-- or -->
<script type="text/javascript" src="js/jquery.webRating.min.js"></script>

####Step 3 WebRating will automatically detect relevant div elements checking for "data-webRating" argument. Just initialize the plugin with desired settings to display ratings for products, blogs, services.

jQuery("div").webRating({     
        // count
        ratingCount     : 5,

        // image & color
        imgSrc          : "generalIcons.png",
        xLocation     	: 53, //in px
        yLocation	      : 49, //in px
        width		        : 15, //in px
        height          : 15, //in px

        //CSS
        onClass         : 'onClass',
        offClass        : 'offClass',
        onClassHover  	: 'onClassHover', //Optional
        offClassHover 	: 'offClassHover', //Optional

        //on click funcitons
        cookieEnable		: false,
        cookiePrefix		: "myRating_",
        maxClick				: 1,
        onClick					: function(clickScore, data){
            //Your function & post action
        },

        //Tooltip
        tp_showAverage  : true,
        prefixAverage   : "Avg",
        tp_eachStar     : {'1':'Very Bad','2':'Bad','3':'Ok','4':'Good','5':'Very Good'} //Rating guide
}); 

###Parameters

Name	Compulsory	Default	Description
bind	optional	'load'	load will display all ratings after the page is ready. Use event to link display to particular event
ratingCount	optional	5	Max rating for given set
imgSrc	requried	null	Source .png image file
xLocation	requried	0	x-coordinate of the desired icon in the image file (in px)
yLocation	requried	0	y-coordinate of the desired icon in the image file (in px)
width	requried	0	width of the desired icon in the image file (in px)
height	requried	0	height of the desired icon in the image file (in px)
onClass	requried	null	CSS for active segment
offClass	requried	null	CSS for non-active segment
onClassHover	requried	null	On mouse hover CSS for active segment
offClassHover	requried	null	On mouse hover CSS for non-active segment
autoParentWidth	optional	true	Width of the parent div will be set automatically by plugin
onClick	optional	null	Callback function to be called when user clicks on any rating. Function has two paramenters - 1. Rating Score 2. Call back arguments supplied with div
onHover	optional	null	Callback function to be called when user hovers on any rating. Function has two paramenters - 1. Hover Score 2. Call back arguments supplied with div
attribute	optional	"data-webRatingArg"	DOM element attribute that will be used to get callback function 2nd argument.
score	required	"data-webRating"	DOM element attribute that will be used to get active average rating.
count	optional	"data-webRatingN"	DOM element attribute that will be used to get active count (N).
maxClick	optional	1	Max allowed user clicks per rating div.
cookieEnable	optional	true	Cookies will be used to limit clicks per visits
cookieLifeDays	optional	1	Cookies life in days
prefixAverage	optional	'Avg'	Prefix fool tool-tip for showing average
tp_showAverage	optional	true	Show average rating using toop-tip
tp_showMaxScore	optional	true	Show max rating using toop-tip
tp_showCount	optional	true	Show rating count (N) using toop-tip
tp_eachStar	optional	true	Text that is to be applied to each rating. Eg. 1st Star can have "Ok" displayed while rating. See demo for more info.
updateScore	optional	true	Update rating after user inputs new rating.