"Functional Star Ratings (improved)"
Bootstrap 3.0.0 Snippet by msurguy

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Working Star Ratings for Bootstrap 3 <small>Hover and click on a star</small></h2> </div> <div class="row lead"> <div id="stars" class="starrr"></div> You gave a rating of <span id="count">0</span> star(s) </div> <div class="row lead"> <p>Also you can give a default rating by adding attribute data-rating</p> <div id="stars-existing" class="starrr" data-rating='4'></div> You gave a rating of <span id="count-existing">4</span> star(s) </div> </div>
// Starrr plugin (https://github.com/dobtco/starrr) var __slice = [].slice; (function($, window) { var Starrr; Starrr = (function() { Starrr.prototype.defaults = { rating: void 0, numStars: 5, change: function(e, value) {} }; function Starrr($el, options) { var i, _, _ref, _this = this; this.options = $.extend({}, this.defaults, options); this.$el = $el; _ref = this.defaults; for (i in _ref) { _ = _ref[i]; if (this.$el.data(i) != null) { this.options[i] = this.$el.data(i); } } this.createStars(); this.syncRating(); this.$el.on('mouseover.starrr', 'span', function(e) { return _this.syncRating(_this.$el.find('span').index(e.currentTarget) + 1); }); this.$el.on('mouseout.starrr', function() { return _this.syncRating(); }); this.$el.on('click.starrr', 'span', function(e) { if (_this.options.rating === _this.$el.find('span').index(e.currentTarget)+1){ return false; } return _this.setRating(_this.$el.find('span').index(e.currentTarget) + 1); }); this.$el.on('starrr:change', this.options.change); } Starrr.prototype.createStars = function() { var _i, _ref, _results; _results = []; for (_i = 1, _ref = this.options.numStars; 1 <= _ref ? _i <= _ref : _i >= _ref; 1 <= _ref ? _i++ : _i--) { _results.push(this.$el.append("<span class='glyphicon .glyphicon-star-empty'></span>")); } return _results; }; Starrr.prototype.setRating = function(rating) { if (this.options.rating === rating) { rating = void 0; } this.options.rating = rating; this.syncRating(); return this.$el.trigger('starrr:change', rating); }; Starrr.prototype.syncRating = function(rating) { var i, _i, _j, _ref; rating || (rating = this.options.rating); if (rating) { for (i = _i = 0, _ref = rating - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) { this.$el.find('span').eq(i).removeClass('glyphicon-star-empty').addClass('glyphicon-star'); } } if (rating && rating < 5) { for (i = _j = rating; rating <= 4 ? _j <= 4 : _j >= 4; i = rating <= 4 ? ++_j : --_j) { this.$el.find('span').eq(i).removeClass('glyphicon-star').addClass('glyphicon-star-empty'); } } if (!rating) { return this.$el.find('span').removeClass('glyphicon-star').addClass('glyphicon-star-empty'); } }; return Starrr; })(); return $.fn.extend({ starrr: function() { var args, option; option = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : []; return this.each(function() { var data; data = $(this).data('star-rating'); if (!data) { $(this).data('star-rating', (data = new Starrr($(this), option))); } if (typeof option === 'string') { return data[option].apply(data, args); } }); } }); })(window.jQuery, window); $(function() { return $(".starrr").starrr(); }); $( document ).ready(function() { $('#stars').on('starrr:change', function(e, value){ $('#count').html(value); }); $('#stars-existing').on('starrr:change', function(e, value){ $('#count-existing').html(value); }); });

Related: See More


Questions / Comments:

how can i get the count of star and put in php?

Paolo Dionisio () - 2 years ago - Reply 1


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'));

$boundControl.val(value);

});

gmangsxr750 () - 2 months ago - Reply 0


where i past the js code ?

another page or in same html page ?

omar-bakhsh () - 3 months ago - Reply 0


how to start-existing fix don't change disable

y () - 2 years ago - Reply 0