Custom Rating Control Plugin For jQuery - Ranking.js

Ranking.js is a lightweight yet customizable jQuery rating plugin based on Font Awesome icons (or something else), which can be used to rank products, posts, images, people and more.

How to use it:

1. Load the Font Awesome for the rating icons. You're also allowed to use any other iconic fonts for the rating symbols.

<link rel="stylesheet" href="font-awesome.min.css">

2. Load the Ranking.js plugin's JavaScript and Stylesheet in your jQuery project.

<link rel="stylesheet" href="css/rating.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/rating.js"></script>

3. Create an empty container to holder the rating control.

<div id="ratingBox"></div>

4. Create a hidden input field to store the rating value.

<input name="rate" type="hidden">

5. You can also create a normal input filed to display the current value.

<input type="text" name="rank"/>

6. Initialize the plugin to generate a basic rating control ...

$("#ratingBox").rating({
  complete: function (index) {
    $("[name=rate], [name=rank]").val(index);
  },
  load: function (index) {
    $("[name=rate], [name=rank]").val(index);
  }
});

7. As this:

<div class="rating-box">
  <ul>
    <li><i class="fa fa-star"></i></li>
    <li><i class="fa fa-star"></i></li>
    <li><i class="fa fa-star"></i></li>
    <li><i class="fa fa-star"></i></li>
    <li><i class="fa fa-star"></i></li>
  </ul>
  <div class="footer">
    <span class="info min">Bad</span>
    <span class="info max">Great</span>
  </div>
</div>

8. Customize the rating control during init.

$("#ratingBox").rating({
  placeholder: "Rating!",
  itemCount: 5,
  minString: "Bad",
  maxString: "Great",
  activeIndex: 0,
  innerItem: "<i class='fa fa-star'></i>",
});

---

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