Lightweight jQuery Plugin For Star Rating Widget - Star Rating

jQuery Star Rating is a lightweight and fast jQuery plugin allows you to implement a customizable Rating (Vote) Widget on your webpage. The plugin uses data-rating-max attribute to set the max rating value of your rating system.

Features:

• Lightweight and easy to use
• Supports Hover, Active, Select, Deselect, Minus
• Selected rating stored as data-attribute, server readable if required
• Multiple instances on one page
• Supports all the modern browsers, IE7+, Chrome, Firefox, Safari, etc.

See also:

• Dynamic jQuery Rating Bar Plugin - ratingbar
• Flexible Star Rating System with jQuery - jRating
• Minimal jQuery Rating Widget Plugin - Bar Rating

Basic Usage:

1. Create a container for the star rating widget

<div class="rating" data-rating-max="5"></div>

2. The sample CSS for the widget

.rating {
float: left;
}
.rating > ul {
list-style: none;
float: left;
padding: 0;
margin: 0;
}
.rating > ul > li {
float: left;
margin-left: 2px;
background: url(src/star-rating.gif) no-repeat;
width: 25px;
height: 25px;
cursor: pointer;
}
.rating > ul > li:first-child {
margin-left: 0;
}
.rating > ul > li.hover {
background-position: -25px;
}
.rating > ul > li.active {
background-position: -50px;
}
.rating > span.less {
cursor: pointer;
background: url(src/star-rating.gif) -75px no-repeat;
display: block;
float: left;
height: 25px;
width: 25px;
}

3. Include the latest version of jQuery library and jQuery Star Rating Plugin on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="star-rating.js"></script>

4. Call the plugin

<script type="text/javascript">
$(".rating").starRating({
minus: true // step minus button
});
</script>

---

This awesome jQuery plugin is developed by MattONeillUK. For more Advanced Usages, please check the demo page or visit the official website.