Fontawesome has a great star rating css extension, which looks really awesome.
However clicking on any of the span elements wouldn\'t really do anything. I don\'t
var $star_rating = $('.rating .star');
var SetRatingStar = function() {
return $star_rating.each(function() {
var puan = document.formname.whatever.value;
if ( parseInt($(this).data('rating')) <= puan) {
return $(this).removeClass('star').addClass('star filled');
} else {
return $(this).removeClass('star filled').addClass('star');
}
});
};
$star_rating.on('click', function() {
document.formname.whatever.value=$(this).data('rating');
return SetRatingStar();
});
.rating{unicode-bidi:bidi-override;direction:rtl;font-size:10px;}
.rating span.star{font-family:FontAwesome;font-weight:normal;font-style:normal;display:inline-block}
.rating span.star:hover{cursor:pointer}
.rating span.star:before{content:"\f006";padding-right:5px;color:#999}
.rating span.star:hover:before,.rating span.star:hover~span.star:before{content:"\f005";color:#e3cf7a}
.rating span.star.filled {}
.rating span.star.filled:before{content:"\f005";color:#e3cf7a; }