Create Quick Rating System using jQuery and Material Icons

In this tutorial I am going to share awesome jQuery plugin (star.rating.js) to Create Quick Rating System using jQuery and Material Icons. This plugin is written in minimal jQuery code it uses Material Icons to display rating bar. you can set any icon which display as rating bar.

Jquery Rating Plugin


Create Quick Rating System using jQuery and Material Icons

Libraries

Include the Material Icons and jQuery library on page after that add plugin library (jquery.star.rating.min.js)

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.star.rating.min.js"></script>

HTML

Create a simple html div container element which display rating bar. This will generate a hidden input on the webpage.

<div class="rating"></div>



JS

Call the plugin Initialize the rating system.

$(function() {  
 $('.rating').addRating();
});

You can also customize your rating system by passing following options.

$('.rating').addRating({
                     max : 10,
                     icon : 'favorite',
                     half : true,
                     fieldName : 'rating',
                     fieldId : 'rating',
                     selectedRatings: 0
});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.