Simple HTML5 Star Rating System – SimpleStarRating.js

Category: Javascript , Others | April 25, 2016
Author: encody
Views Total: 1,242
Official Page: Go to website
Last Update: April 25, 2016
License: MIT

Preview:

Simple HTML5 Star Rating System – SimpleStarRating.js

Description:

SimpleStarRating.js is lightweight JavaScript library used for generating a simple, easy-to-customize star rating system without any 3rd dependencies and icon fonts.

How to use it:

Place the SimpleStarRating.css and SimpleStarRating.js into your html page as follows:

<link rel="stylesheet" href="SimpleStarRating.css">
<script src="SimpleStarRating.js"></script>

Create an empty element to place the star rating system.

<span class="rating"></span>

You can also specify the initial rating value using ‘data-default-rating’ attribute.

<span class="rating" data-default-rating="2.5"></span>

Initialize the star rating system. It will render a basic 5 star rating system inside the element you just created.

var ratings = document.getElementsByClassName('rating');

Specify the number of rating stars you want to use.

<span class="rating" data-stars="10"></span>

Style the rating stars.

.rating {
  ...
}

API methods.

  • disable: Disables the rating from being changed
  • enable: Reenables interactivity
  • setCurrentRating: Changes the current (user-selected) rating (data-rating) and displays it
  • setDefaultRating: Changes the default rating (data-default-rating) and displays it