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 works out of the box. Simply call .aswesomeRating() jQuery function on given container then stars (1 - 5) are populated automatically.
Value:
$(".jquery-default .rating").awesomeRating({
valueInitial : 3,
targetSelector : ".jquery-default .result"
});
You are not forced to use numeric values so if you need to have more descriptive ones just pass them as one of the options. You are not limited here!
Value:
$(".jquery-string .rating").awesomeRating({
valueInitial : "Awesome",
values : [ "Really bad", "Could be worse", "Improvable", "Good", "Awesome" ],
targetSelector : ".jquery-string .result"
});
The plugin is fully customizable. It not only allows you to change existing styling but also to specify your own. Isn't it cool?
Value:
<div ng-controller="colourController">
<div awesome-rating="rating" awesome-rating-options="options"></div>
<p>
<span ng-bind="rating"></span>
</p>
</div>
<script type="text/javascript">
ratingApp.controller("colourController", [ "$scope", function($scope) {
$scope.rating = 1;
$scope.options = {
values : [ 1, 2, 3 ],
cssBaseSelected : "fa-thumbs-up",
cssBaseUnselected : "fa-thumbs-o-up",
cssValuesSelected : [
"first-selected",
"second-selected",
"third-selected",],
cssValuesUnselected : [
"first-unselected",
"second-unselected",
"thirs-unselected",],
cssHover : "rating-star-hover-blue"
};
}]);
</script>
Sometimes you only need to dispaly the rating for particular thing/ servic e without allowing users to change the value. Check it on the example below!
Value:
<div ng-controller="readonlyController">
<div awesome-rating="rating" awesome-rating-options="options"></div>
<p>
<span ng-bind="rating"></span>
</p>
</div>
<script type="text/javascript">
ratingApp.controller("readonlyController", [ "$scope", function($scope) {
$scope.rating = 3;
$scope.options = {
values : [ 1, 3, 5, 7, 9 ],
cssBaseSelected : "fa-thumbs-up",
cssBaseUnselected : "fa-thumbs-o-up",
readonly : true,
applyHoverCss : false
};
}]);
</script>
In many situations you calculate the rating as an average so that you need a fractional values for sure! Additionally, you are able to use fractional values with your non-numeric rating as well!
Value:
<div class="knockout-fractional">
<div data-bind="awesomeRating: rating, awesomeRatingOptions: options"></div>
<p>
<span data-bind="text: rating"></span>
</p>
</div>
<script type="text/javascript">
var modelFractional = {
rating : ko.observable("CD"),
options : {
values : ["A", "B", "C", "D", "E"],
allowFractional : true,
calculateFractional : function(current, rate) {
if (current.indexOf(rate) === 1) { return 0.6 };
return 1;
},
allowFractional : true,
readonly : true,
applyHoverCss : false
}
};
ko.applyBindings(modelFractional, $(".knockout-fractional")[0]);
</script>
Events enable the possibility to integrate the rating with an external code. Just simply attach your handler and you are good to go to store the value in databse!
Value:
<div class="knockout-events">
<div data-bind="awesomeRating: rating, awesomeRatingOptions: options"></div>
<p>
<span data-bind="text: rating"></span>
</p>
</div>
<script type="text/javascript">
$(".knockout-events .rating").on("ratingChanged", function(event, value) {
modelEvents.displayedValue(value);
});
var modelEvents = {
rating : ko.observable(1),
displayedValue : ko.observable(),
options: {
htmlEvent : "mouseenter",
eventName : "ratingChanged"
}
};
ko.applyBindings(modelEvents, $(".knockout-events")[0]);
</script>