Simple Star Rating Plugin with jQuery and Font Awesome - Raterater

Raterater is an easy-to-use jQuery based 5 star rating widget that uses Font Awesome 4 for scalable & styleable star icons. 

How to use it:

1. Load the latest Font Awesome 4 in the head section of the web page.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

2. Load the jQuery raterater plugin anywhere on the web page, but after loading jQuery library.

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="raterater.jquery.js"></script>

3. Create a container element for the star rating widget and use data-rating attribute to specify the current star fractions.

<div class="ratebox" data-id="1" data-rating="4.7"></div>

4. The core CSS to style the star rating widget.

.raterater-wrapper { overflow: visible; }

.raterater-layer,
.raterater-layer i {
  display: block;
  position: absolute;
  overflow: visible;
  top: 0px;
  left: 0px;
}

.raterater-hover-layer { display: none; }

.raterater-hover-layer i,
.raterater-rating-layer i {
  width: 0px;
  overflow: hidden;
}

5. Call the function to enable the star rating widget.

$(function() {
$( '.demo' ).raterater({ 

// this function will be called when a rating is chosen
submitFunction: 'rateAlert', 

// allow the user to change their mind after they have submitted a rating
allowChange: true,

// width of the stars in pixels
starWidth: 100,

// spacing between stars in pixels
spaceWidth: 10,

numStars: 5,
isStatic: false,
mode: MODE_CALLBACK,
step: false,
});

});

6. Callback function when a rating is chosen.

function rateAlert(id, rating){
  alert( 'Rating for '+id+' is '+rating+' stars!' );
}

7. Override star colors as you wish.

.raterater-bg-layer { color: #95a5a6; }

.raterater-hover-layer { color: #f1c40f; }

.raterater-hover-layer.rated { color: #f1c40f; }

.raterater-rating-layer { color: #f39c12; }

.raterater-outline-layer { color: #7f8c8d; }

Change logs:

2015-11-28

• Trigger .change() on input for reactive frameworks

2015-10-02

• add step option for ratings

2015-09-06

• Update raterater.jquery.js

2015-08-19

• JS update.

---

This awesome jQuery plugin is developed by bainmullins. For more Advanced Usages, please check the demo page or visit the official website.