Feature-rich Star Rating Component With jQuery - ratings.js

File Size: 17.1 KB
Views Total: 1427
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Feature-rich Star Rating Component With jQuery - ratings.js

Yet another jQuery plugin for generating an HTML5 rating control from any element that features fractional star fill and custom rating icons.

How to use it:

1. Include the main style sheet jquery.ratings.css in the header and the JavaScript file jquery.ratings.js before the closing body tag.

<link rel="stylesheet" href="css/jquery.ratings.css">
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="js/jquery.ratings.js"></script>

2. Create a element for the rating control and uses the 'data-ratings' attribute to config the plugin. Accepted properties:

  • max: maximum number of stars
  • min: minimum number of stars
  • icons: custom icons. {"empty": "[SVG]", "full": "[SVG]"}
<span id="ratings-demo" 
      data-ratings='{"max": 5, "value": 0}'>
</span>

3. You can also customize the star icons as this:

<span id="ratings-demo"
      data-ratings='{"max": 5, "value": 2, "icons": {"full": "[data-template=full]", "empty": "[data-template=empty]"}}'>
  <span data-template="empty">
    <svg width="28" height="28" viewBox="0 0 28 28">
      <path d="M26 9.312c0-4.391-2.969-5.313-5.469-5.313-2.328 0-4.953 2.516-5.766 3.484-0.375 0.453-1.156 0.453-1.531 0-0.812-0.969-3.437-3.484-5.766-3.484-2.5 0-5.469 0.922-5.469 5.313 0 2.859 2.891 5.516 2.922 5.547l9.078 8.75 9.063-8.734c0.047-0.047 2.938-2.703 2.938-5.563zM28 9.312c0 3.75-3.437 6.891-3.578 7.031l-9.734 9.375c-0.187 0.187-0.438 0.281-0.688 0.281s-0.5-0.094-0.688-0.281l-9.75-9.406c-0.125-0.109-3.563-3.25-3.563-7 0-4.578 2.797-7.313 7.469-7.313 2.734 0 5.297 2.156 6.531 3.375 1.234-1.219 3.797-3.375 6.531-3.375 4.672 0 7.469 2.734 7.469 7.313z"></path>
    </svg>
  </span>
  <span data-template="full">
    <svg width="28" height="28" viewBox="0 0 28 28">
      <path d="M14 26c-0.25 0-0.5-0.094-0.688-0.281l-9.75-9.406c-0.125-0.109-3.563-3.25-3.563-7 0-4.578 2.797-7.313 7.469-7.313 2.734 0 5.297 2.156 6.531 3.375 1.234-1.219 3.797-3.375 6.531-3.375 4.672 0 7.469 2.734 7.469 7.313 0 3.75-3.437 6.891-3.578 7.031l-9.734 9.375c-0.187 0.187-0.438 0.281-0.688 0.281z"></path>
    </svg>
  </span>
</span>

4. API methods.

// enable
$('selector').ratings('enable');

// disable
$('selector').ratings('disable');

// gets the value
$('selector').ratings('get', 'value');

// sets the value
$('selector').ratings('value', 3);

// sets the max value
$('selector').ratings('max', 10);

// redraws the rating control
$('selector').ratings('redraw');

5. Events.

$('Selector').on('ratings:change', function () {
  // on change
});

$('Selector').on('ratings:enabled', function () {
  // when enabled
});

$('Selector').on('ratings:disabled', function () {
  // when disabled
});

$('Selector').on('ratings:redrawn', function () {
  // when redrawn
});

$('Selector').on('ratings:update', function () {
  // on update
});

Change log:

2016-12-01

  • Fixed x position bug when the ratings are used in another div.

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