Ratyli: Simple jQuery Rating Plugin

Output:

★★★☆☆

HTML

<span class="ratyli" data-rate="3"></span>

JS

$(function() {
    $('.ratyli').ratyli();
});

Demo & Examples

http://codepen.io/peet86/pen/LEzrYy (CodePen)

###Quick start: Incude the latest jQuery library and the jquery.ratyli.min.js script in to your HTML <header> or before the </body> tag:

<script src="jquery.ratyli.min.js"></script>

CSS

No CSS required, but you can pimp your ratings with these CSS selectors:

.ratyli{} /* container style*/
.ratyli.rated{} /* container style after rating*/
.ratyli .rate{} /* sign style*/
.ratyli .rate-active{} /* sign hover style */
.ratyli .rate-full{} /* full sign style */
.ratyli .rate-empty{} /* empty sign style */
/*etc..*/

Check the demo and play with the examples: http://codepen.io/peet86/pen/LEzrYy (CodePen)

Font Awesome

You can use the amazing Font Awesome icons as rating signs easily:

 $(".ratyli").ratyli({
      full:"<i class='fa fa-thumbs-up'></i>",
      empty:"<i class='fa fa-thumbs-o-up'></i>",
});

Updates

v0.3 (24.11.2015)

• unrateable attribute
• html5 data-rate and data-ratemax attributes
• other small fixes

v0.2.1 (09.02.2015)

• rated CSS selector fix

v0.2 (09.02.2015)

• Font Awesome fix
• interactive parameter replaced with disabled

Notes

• Requires jQuery 1.7+.
• Works in all A-grade browsers and IE9+.
• The name inspired by the famous hungarian food: Ratyli. ;)

License

This plugin is available under Apache 2.0 license.