"Font Awesome Star Ratings"
Bootstrap 3.2.0 Snippet by 4l3x4ndr3

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.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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>Thanks @Maks for this snippet ! - With working FontAwesome Stars - <a href="http://twitter.com/AlexMahrt" target="_blank">@AlexMahrt on Twitter</a><br><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
2
/* FontAwesome for working BootSnippet :> */
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css')
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', 'i', function(e) {
return _this.syncRating(_this.$el.find('i').index(e.currentTarget) + 1);
});
this.$el.on('mouseout.starrr', function() {
return _this.syncRating();
});
this.$el.on('click.starrr', 'i', function(e) {
return _this.setRating(_this.$el.find('i').index(e.currentTarget) + 1);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: