Awesome Rating

v1.0.0

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.

JQuery

Default configuration

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"
});

String values

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"
});

AngularJS

Styling

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>

Readonly

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>

KnockoutJS

Fractional values

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

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>