Minimal Rating Plugin With jQuery And Material Icons - star.rating.js

Minimal Rating Plugin With jQuery And Material Icons - star.rating.js

star.rating.js is a super tiny jQuery plugin for rendering a simple rating system that uses Material Icons as rating stars.

How to use it:

1. Load the Material Icons in the head section of the html document.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

2. Create a container element for the rating system.

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

3. Initialize the rating system.

$('.rating').addRating();

4. This will generate a hidden input on the webpage like this:

<input type="hidden" name="rating" id="rating">

5. This will generate a hidden input on the webpage like this:

<input type="hidden" name="rating" id="rating">

6. Set the maximum number of rating stars.

$('.rating').addRating({
  max : 5,
});

7. Replace the default rating stars.

$('.rating').addRating({
  icon : 'favorite' // heart
});

8. More default options.

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

Change log:

2018-05-21

  • Set initial ratings

2016-09-08

  • toggle selected class on elements to allow users to override star color

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

  • Publication date: 21.05.2018
  • Source