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.

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.

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.

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.

Related