Awesome-rating is a jQuery plugin that allows you to use simple, but flexible star rating mechanism.
Awesome-rating is a jQuery plugin that allows you to use simple, but flexible rating mechanism. The basic configuration uses Font Awesome, but it's not a problem to replace it with any library you like.
The plugin requires a jQuery and it's recommended to use the latest one, although only basic methods were used (see Advanced Usage for more details). In the package you can also find integration scripts that allows to use the plugin with AngularJS and KnockoutJS.
bower install awesome-rating
Always remember to place scripts tags before calling plugin:
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<!-- JQuery --> <script type="text/javascript" src="dist/awesomeRating.min.js"></script>
<!-- KnockouJS --><script type="text/javascript" src="js/knockout-3.1.0.js"></script>
<!-- KnockouJS --><script type="text/javascript" src="dist/awesomerating.knockout.min.js"></script>
<!-- AngularJS --><script type="text/javascript" src="js/angular.min.js"></script>
<!-- AngularJS --><script type="text/javascript" src="dist/awesomerating.angular.min.js"></script>
Always remember to include basic styling:
<link rel="stylesheet" type="text/css" media="all" href="dist/awesomeRating.min.css">
Although it's very simple so you can easily copy the content so that you do not need to link another file - it's up to you.
<div class="awesomeRating"></div>
<div class="awesomeRatingValue">
<span>Rating value:</span> <span class="awesomeRatingValue"></span>
</div>
<script type="text/javascript">
$('.awesomeRating').awesomeRating({
valueInitial: "D",
values: ["A", "B", "C", "D", "E"],
targetSelector: "span.awesomeRatingValue"
});
</script>
<div class="awesomeRating" awesome-rating="rating" awesome-rating-options="options"></div>
<div class="awesomeRatingValue">
<span class="awesomeRatingValue" ng-bind="'Rating value: ' + rating"></span>
</div>
<script type="text/javascript">
angular.module("ratingApp", ["awesome-rating"])
.controller("RatingController", function($scope) {
$scope.rating = "D";
$scope.options = {
values : [ "A", "B", "C", "D", "E"]
};
});
</script>
<div class="awesomeRating" data-bind=" awesomeRating: rating, awesomeRatingOptions: options"></div>
<div class="awesomeRatingValue">
<span class="awesomeRatingValue" data-bind="text: 'Rating value: ' + rating()"></span>
</div>
<script type="text/javascript">
$(function() {
var model = {
rating : ko.observable("D"),
options : {
values: ["A", "B", "C", "D", "E"]
}
};
ko.applyBindings(model);
});
</script>
The default configuration is provided as global settings for the plugin. You can easily change it globally (for every usage on your page) or pass as an object (with same properties' names) to awesomeRating method to change it locally for single usage.
$.fn.awesomeRating.defaults = {
values : [ 1, 2, 3, 4, 5 ],
valueInitial : null,
cssBase : "rating-star fa",
cssBaseSelected : "fa-star",
cssBaseUnselected : "fa-star-o",
cssValuesSelected : null,
cssValuesUnselected : null,
cssHover : "rating-star-hover",
cssFractional : "rating-star-fractional",
targetSelector : null,
htmlBase : "<div></div>",
htmlEvent : "click",
applyHoverCss : true,
readonly : false,
allowFractional : false,
calculateFractional : null,
eventName : "rated"
};
Options meaning is as follows:
The base CSS is as follows:
.rating-star { color: lightgrey; cursor: pointer; }
.rating-star.fa-star { color: #FDD05B; }
.rating-star-hover { opacity: 0.6; }
.rating-star-fractional { position: absolute; overflow: hidden; z-index: 2; }
It's included in the package, but as you can see the content is pretty simple so making adjustments is a piece of cake. Please remember to and links to Font Awesome if you decided to use the default configuration.
Please, feel free to visit Demo Page to check how the library can be useful for you.