By: Prem Tiwari | Last Updated: | In: Bootstrap, Freebies, HTML & CSS, Jquery, Web Technologies
Are you developing an online store, or a product reviews portal, You need to add star rating functionality at the below of each product so that customer can rate that product with his/her comments.
In this post i will explain how to create functional star rating in bootstrap 3. by default rating will be blank when you hover on that and click on rating that will inserted and you will see the average rating of that product included your review.
Before start to creating star rating, first add bootstrap Java script and CSS files before head tag closed.
1 2 3 4 5 | <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> |
Add below html code where you want to display star rating on your web pages.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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> |
Copy paste below jQuery code at the end of file, before body tag closed. This code will enable the functional star rating on that web page. You can also customize below code as per your requirement.
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | 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); }); 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); }); }); |
Hope this tutorial helped you to create star rating system using bootstrap 3. If you like this article, do like & share it with your friends on social media. Don’t forget to follow us on Facebook and Twitter to learn cool bootstrap tutorials.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
Bootstrap, bootstrap rating component, bootstrap star rating example, jquery rating example, jquery rating stars, jquery rating stars example, rating stars, rating stars demo, rating using jquery, simple jquery star rating, star rating example, star rating jquery demo
