Simple HTML5 & Javascript Star Rating System For Your Website – SimpleStarRating.js

by Posted on

SimpleStarRating is a nice javascript based plugin which create star rating system for your website without using any third party plugin and fonts library. It is highly lightweight and customizable and quickest way to add star rating feature on your product or service based sites.
You only need to give elements a class of rating and apply an instance of SimpleStarRating to each rating element to convert it.
Simple HTML5 & Javascript Star Rating System For Your Website

Integrate SimpleStarRating Plugin

Libraries

Load plugins CSS and JS library.

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


HTML

Here is the list of example for creating different different types of rating system.

Supports data-stars and data-default-rating attributes on the target element
to determine how many stars are displayed, and how many stars are initially
selected. Half stars are also supported.

<span id="myRating" class="rating" data-stars="15" data-default-rating="10.5"></span>
<!-- Results in a set of 15 stars, 10.5 of them selected -->

Every time the rating is changed, the attribute data-rating will be
added/updated with the new rating. For example, after clicking on the fourth
star in the example above, the element would look like this:

<span id="myRating" class="rating" data-stars="15" data-default-rating="10.5" data-rating="4"></span>
<!-- data-rating attribute added with the value of 4 -->

The presence of the disabled attribute disables all interactivity.

<span id="myRating" class="rating" data-stars="15" data-default-rating="10.5" disabled></span>
<!-- Only displays a rating; the user may not select a new one -->

CSS

Customize the following CSS to change star rating look and feel as per your website layout.

.rating {
    font-size: 30px; // Changes the size of the stars. Default 20px
    color: green; // Changes the color of filled stars. Default #3af
}



JS

Initialize a new instance of SimpleStarRating with the target element as the
only parameter:

var r = new SimpleStarRating(document.getElementById('myRating'));

The plugin also support events methods.

r.onrate = function (rating) {
    // Called whenever the SimpleStarRating is clicked
};
document.getElementById('myRating').addEventListener('rate', function (e) {
    // e.detail contains the rating
});

Following API methods you can use with this plugin:

  • 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

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.


Published by admin