Simple Star Rating Plugin with jQuery Font Awesome Raterater - Download Simple Star Rating Plugin with jQuery and Font Awesome - Raterater

Download Simple Star Rating Plugin with jQuery and Font Awesome – Raterater

By Posted on

This time I will share jQuery Plugin and tutorial about Simple Star Rating Plugin with jQuery and Font Awesome – Raterater, hope it will help you in programming stack.

Simple Star Rating Plugin with jQuery Font Awesome Raterater - Download Simple Star Rating Plugin with jQuery and Font Awesome - Raterater
File Size: 7.29 KB
Views Total: 9900
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download



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.

view source
1 <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.

view source
1 <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
2 <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.

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

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

view source
01 .raterater-wrapper { overflow: visible; }
02  
03 .raterater-layer,
04 .raterater-layer i {
05   display: block;
06   position: absolute;
07   overflow: visible;
08   top: 0px;
09   left: 0px;
10 }
11  
12 .raterater-hover-layer { display: none; }
13  
14 .raterater-hover-layer i,
15 .raterater-rating-layer i {
16   width: 0px;
17   overflow: hidden;
18 }

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

view source
01 $(function() {
02 $( '.demo' ).raterater({
03  
04 // this function will be called when a rating is chosen
05 submitFunction: 'rateAlert',
06  
07 // allow the user to change their mind after they have submitted a rating
08 allowChange: true,
09  
10 // width of the stars in pixels
11 starWidth: 100,
12  
13 // spacing between stars in pixels
14 spaceWidth: 10,
15  
16 numStars: 5,
17 isStatic: false,
18 mode: MODE_CALLBACK,
19 step: false,
20 });
21  
22 });

6. Callback function when a rating is chosen.

view source
1 function rateAlert(id, rating){
2   alert( 'Rating for '+id+' is '+rating+' stars!' );
3 }

7. Override star colors as you wish.

view source
1 .raterater-bg-layer { color: #95a5a6; }
2  
3 .raterater-hover-layer { color: #f1c40f; }
4  
5 .raterater-hover-layer.rated { color: #f1c40f; }
6  
7 .raterater-rating-layer { color: #f39c12; }
8  
9 .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.




source : jqueryscript.net

Related posts: