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.

Basic usage:

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.