jQuery Plugin For 5 Stars Rate Widget - Flexible Stars

Flexible Stars is a jQuery based rating system that allows you to add a 5 Stars Rate Widget on your website or web application.

Features:

• Highly customizable via CSS
• Ajax events support
• Input lock support
• Easy to use
• Quick implement via data- attributes or javascript

You might also like:

• Flexible Star Rating System with jQuery - jRating

Basic Usage (via javascript):

1.  Include jQuery library and flexible.stars.js in the head section of your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.flexible.stars.js"></script>

2. Markup

<div class="demo" id="rate"></div>

3. The CSS

<style type="text/css" media="screen">
i {
display: inline-block
}
 [class^="sprite-"] {
 background: url(star.png) no-repeat top left;
}
.sprite-gold-star {
background-position: 0 0;
width: 29px;
height: 28px;
}
.sprite-half-star {
background-position: 0 -78px;
width: 29px;
height: 28px;
}
.sprite-silver-star {
background-position: 0 -156px;
width: 29px;
height: 28px;
}
</style>

4. The javascript

<script>
$('.demo').flexibleStars({
    init: 4.5,
    doRate: '#rate'
})
</script>

5. More Options

<script>
$('.demo').flexibleStars({
    init: 4.5,
    doRate: '#rate', // action on click event, you can set CSS selector
    url: '/stars/handler/', // used if doRate == 'ajax''
    isLocked: 'no', // locking after initing
    ajaxLock: 'yes', // locking after ajax success handler
    inputLock: 'no' // locking after input set value handler
})
</script>

 

---

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