Download
User Rating: 2.9/5 ( 28 votes)
Raterater is a jQuery 5 star rating plugin based on Font Awesome icons that allows arbitrary star fractions, variable star sizes, and CSS colors.
Requirements
-
jquery >=1.4.1
-
font-awesome >= 4.2.0
Source: github.com
1. INCLUDE CSS AND JS FILES
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="raterater.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.4.1.min.js"></script>
<script src="raterater.jquery.js"></script>
2. HTML
<div class="ratebox" data-id="1" data-rating="2.2"></div>
<div class="ratebox" data-id="2" data-rating="3.6"></div>
3. JAVASCRIPT
$( '.ratebox' ).raterater( { submitFunction: 'rateAlert', allowChange: true } );
function rateAlert(id, rating)
{
alert( 'Rating for ' + id + ' is ' + rating + ' stars!' );
}
4. OPTIONS
|
Attribute |
Default |
Values |
Description |
|
submitFunction |
'submitRating' |
String |
A function name that will be called when the user selected a rating. The function should take 2 arguments: id and rating. The id is the data-id of the rating div and the rating is a float representation of the number of stars the user selected. |
|
allowChange |
false |
Boolean |
If set to true, allows the user to change his rating. the submitFunction callback will be called again, so be prepared to handle this in your code. |
5. STYLING
Change the size of the stars
.raterater-layer { font-size:20px; }
Change the colors of the stars
/* Star placeholder color */
.raterater-bg-layer {
color: rgba( 0, 0, 0, 0.25 );
}
/* Star color on hover */
.raterater-hover-layer {
color: rgba( 255, 255, 0, 0.75 );
}
/* Star color after rating */
.raterater-hover-layer.rated {
color: rgba( 255, 255, 0, 1 );
}
/* Initial star color */
.raterater-rating-layer {
color: rgba( 255, 155, 0, 0.50 );
}
/* Color of the star outline */
.raterater-outline-layer {
color: rgba( 0, 0, 0, 0.25 );
}
JS Tutorial
