Skip to content

Instantly share code, notes, and snippets.

@mdipierro
Last active February 13, 2019 15:42
Show Gist options
  • Save mdipierro/f221957e002baa014c9a to your computer and use it in GitHub Desktop.
Save mdipierro/f221957e002baa014c9a to your computer and use it in GitHub Desktop.
jQuery('input.rating,input[name*="rating"]').each(function(){
var span = jQuery('<span style="white-space:nowrap"><span class="rate0">&#x25CE;</span><span class="rate1">&#x2606;</span><span class="rate2">&#x2606;</span><span class="rate3">&#x2606;</span><span class="rate4">&#x2606;</span><span class="rate5">&#x2606;</span></span>');
var self = jQuery(this).hide().after(span);
var fill_stars = function() {
var k = parseInt(self.val()) || 0;
for(var i=1; i<6; i++) span.find('.rate'+i).html((i<=k)?'&#x2605;':'&#x2606;');
};
for(var k=0; k<6; k++) (function(k){
span.find('.rate'+k).mouseover(function(){
for(var i=1; i<6; i++) span.find('.rate'+i).html((i<=k)?'&#x2605;':'&#x2606;');
}).click(function(){self.val(k);fill_stars();});
})(k);
span.mouseout(fill_stars);
fill_stars();
});
@mdipierro
Copy link
Author

I have been very unsatisfied with existing star rating plugins. First, they are too complex. Second, they require dedicated fonts/images while all the necessary symbols are already in unicode. So I made this.
Just download it as star.rating.js and include it:

<script src="star.rating.js"></script>

and all the fields with a name containing the word "rating" or input fields having a class "rating" will be represented by a star 1-5 widget.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment