"Functional Star Ratings"
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) {
return _this.setRating(_this.$el.find('span').index(e.currentTarget) + 1);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Tnq bro

I. Yazdani Charati () - 7 years ago - Reply 0


how can i get the count of star and store in php value? thank you ..

Paolo Dionisio () - 8 years ago - Reply 0


thanks msurguy
This is very helpful from my side ,But i want it with images can help please

Jaypal Kadam () - 8 years ago - Reply 0


how to keep started the rating.

eg: when I give 3 stars then I click again on 3rd star it cleans everything, I shouldn't be. I need it to be remain 3 stars. how can i do it ?

please bit urgent.

Prince Sodhi () - 9 years ago - Reply 0


Basically you would need to check if the rating value of the clicked star is equal to the existing rating. Here's my improved code (changed the `.click()` handler):

http://bootsnipp.com/snippe...

maxsurguy () - 9 years ago - Reply 0


How Can I chagne rating with javascript?

Aditya () - 10 years ago - Reply 0


Any ideas how can I enable half star ratings in it?

Nitesh Oswal () - 10 years ago - Reply 0


Amol Impal () - 7 years ago - Reply 0


Nice

Alf () - 11 years ago - Reply 0