Easy Flexible Rating System - Awesome Rating

The Awesome Rating library lets you create a simple, flexible, customizable rating system for products, images, articles, and posts. Compatible with jQuery, Angular, and Knockout.js.

1. By default, the plugin uses Font Awesome for the rating stars. This step is OPTIONAL and you can use your own characters, images or icons for the rating symbols.

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

2. Insert jQuery library and the Awesome Rating's JavaScript and CSS files in your html document.

<link href="dist/awesomerating.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="dist/awesomeRating.min.js"></script>

3. Initialize the rating system with default settings.

<div class="awesomeRating"></div>

$('.awesomeRating').awesomeRating();

4. Create a container element to display the rating value.

<span class="awesomeRatingValue"></span>

5. Customize the rating symbols.

$('.awesomeRating').awesomeRating({
  cssBase             : "rating-star fa",
  cssBaseSelected     : "fa-star",
  cssBaseUnselected   : "fa-star-o",
});

6. More configuration options.

$('.awesomeRating').awesomeRating({
  // custom rating values
  values              : [ 1, 2, 3, 4, 5 ],
  // initial value
  valueInitial        : null,
  // applied to all selected element when corresponding value is selected
  cssValuesSelected   : null,
  // applied to all unselected element when corresponding value is selected
  cssValuesUnselected : null,
  // CSS class on hover
  cssHover            : "rating-star-hover",
  // CSS class applied for fractional values
  cssFractional       : "rating-star-fractional",
  // target selector
  targetSelector      : null,
  // container element
  htmlBase            : "<div></div>",
  // custom event to change the rating value
  htmlEvent           : "click",
  // allows hover effect
  applyHoverCss       : true,
  // is readonly?
  readonly            : false,
  // allows fractional values
  allowFractional     : false,
  // A special method used to calculate fractional values (the difference between two elements); 
  // It should return values between 0 and 1 when current value should be treated as fractional. 
  // It is called with currentValue as first parameter and particular rateValue from values array as second one.
  calculateFractional : null,
  // fired when user changes rating value
  eventName           : "rated"
  
});

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