Minimal HTML List Based Star Rating Plugin - jQuery StarRating

StarRating is a really small and cross-browser jQuery rating system plugin which converts a standard HTML unordered list into a star rating control using Font Awesome for rating symbols.

How to use it:

1. Load the Font Awesome Iconic Font in the html file.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

2. Create an empty HTML unordered list on the page.

<ul id="starRating"></ul>

3. Load jQuery library and the jQuery StarRating plugin:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.starrating.js"></script>

4. Initialize the star rating control.

$('#starRating').starRating()

5. The primary CSS styles for the star rating control.

ul {
  list-style: none;
  padding: 0;
}

li {
  display: inline-block;
  font-size: 40px;
  color: #ccc;
  cursor: pointer;
}

li.active, li.hover { color: orange; }

ul.hover li.active:not(.hover) { color: #ccc }

6. Set the amount of rating stars.

<ul id="starRating"
    data-stars="10">
</ul>

7. Set the current amount of rating stars.

<ul id="starRating"
    data-current="2">
</ul>

8. Execute a callback function after rating.

$('#starRating').starRating({
  callback: function (value) {}
})

 

---

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