🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Ratyli is a simple, lightweight yet highly customizable jQuery / HTML5 rating system which can be configured with JavaScript or datasets.

Rating star-rating

Documentation

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.


You May Also Like