
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.
- Publication date: 17.12.2017
- Source