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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

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

Paolo Dionisio () - 8 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 () - 5 years ago - Reply 0


where i past the js code ?

another page or in same html page ?

omar-bakhsh () - 6 years ago - Reply 0


how to start-existing fix don't change disable

y () - 8 years ago - Reply 0