Functional Star Ratings (improved)


I think I found a few issues/suggestions

in Starrr.prototype.createStars you are adding classes 'glyphicon .glyphicon-start-empty'. (there shouldn't be a dot at glyphicon-start-empty)

When attempting to override the numStars attribute at plugin initiation, if you override numStars to > 5, stars will appear but those over 5 will not undo the hover effect (but clicking them does maintain value). Example: return $(".starrr").starrr({numStars:10}); See the following two items for the fix for this item

In Starrr.prototype.syncRating it is checking for rating < 5 (so it ignores numStars value when attempting sync, so may miss stars above 5). Should be rating < this.options.numStars

Also in Starr.prototype.syncRating, there is hardcoded checks for 4 (so also expecting no numStars override). Changed the 4 to (this.options.numStars-1)

In my implementation I gave the .starrr DIV additional data attributes so that onReady you can have multiple DIV.starrr containers and manage multiple star ratings on a single page more dynamically. I gave my DIV.starrr these attributes

data-starrr-max: allows the user to specify the number of stars to display without having to hardcode it. Just assign it to DIV.starr (example: <div class="starrr" data-starrr-max="10">)

data-starrr-rating: the current value/star to be pre-selected when the stars are initially rendered (example: <div class="starrr" data-starrr-rating="3">)

* data-starrr-for: allows a particular DIV.starrr to know what element will hold the star value clicked. This allows multiple star containers on a page without conflict between them. Similar to a LABEL's "for" attribute. (Example: <div class="starrr" data-starrr-for="IdOfControlHoldingValue">)

Plugin initiation:

$(function () {

$(".starrr").each(function () {

var $this = $(this);

var new_rating = $this.attr('data-starrr-rating');

var new_numStars = $this.attr('data-starrr-max');

$(this).starrr({ rating: new_rating, numStars: new_numStars });



Then onReady:

$('.starrr').on('starrr:change', function (e, value) {

var $this = $(this);

var $boundControl = $('#' + $this.attr('data-starrr-for'));



gmangsxr750 () - 3 months ago - Reply 0