Зведочный рейтинг на Font-awesome

218
10 декабря 2016, 10:28
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);
            });
            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("<i class='fa fa-star-o'></i>"));
            }
            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('i').eq(i).removeClass('fa-star-o').addClass('fa-star');
                }
            }
            if (rating && rating < 5) {
                for (i = _j = rating; rating <= 4 ? _j <= 4 : _j >= 4; i = rating <= 4 ? ++_j : --_j) {
                    this.$el.find('i').eq(i).removeClass('fa-star').addClass('fa-star-o');
                }
            }
            if (!rating) {
                return this.$el.find('i').removeClass('fa-star').addClass('fa-star-o');
            }
        };
        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);

Есть вот такой плагин под jQuery, взят с Гитхаба. он позволяет по $(selector).starrr(), создать зведочный рейтинг-бар, или что-то вроде того. Как после того, как пользователь выбрал какое-то конкретное значение на этом баре, сделать сброс значения на нем? Подскажите пожалуйста

Answer 1

Посмотри данный вариант, я его использую обычно:

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); 
 
fieldset, label { margin: 0; padding: 0; } 
body{ margin: 20px; } 
h1 { font-size: 1.5em; margin: 10px; } 
 
/****** Style Star Rating Widget *****/ 
 
.rating {  
  border: none; 
  float: left; 
} 
 
.rating > input { display: none; }  
.rating > label:before {  
  margin: 5px; 
  font-size: 1.25em; 
  font-family: FontAwesome; 
  display: inline-block; 
  content: "\f005"; 
} 
 
.rating > .half:before {  
  content: "\f089"; 
  position: absolute; 
} 
 
.rating > label {  
  color: #ddd;  
 float: right;  
} 
 
/***** CSS Magic to Highlight Stars on Hover *****/ 
 
.rating > input:checked ~ label, /* show gold star when clicked */ 
.rating:not(:checked) > label:hover, /* hover current star */ 
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */ 
 
.rating > input:checked + label:hover, /* hover current star when changing rating */ 
.rating > input:checked ~ label:hover, 
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */ 
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
<fieldset class="rating"> 
    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label> 
    <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label> 
    <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label> 
    <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label> 
    <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label> 
    <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label> 
    <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label> 
    <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label> 
    <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label> 
    <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label> 
</fieldset>

Answer 2

возможный вариант сброса, добавить после плагина или заменить в самом плагине setRating this.options.rating = 0;

window.Starrr.prototype.setRating = function(rating) {
  if (this.options.rating === rating) {
    rating = void 0;
  }
  this.options.rating = 0;
  this.syncRating();
  return this.$el.trigger('starrr:change', rating);
};
READ ALSO
Что делать с config.json после конфигурации bootstrap?

Что делать с config.json после конфигурации bootstrap?

Я работаю над адаптивной веб-страницей, использую bootstrap и SASS (работаю на macOS, компилирую SASS через Scout)

317
Не корректно работает подменю

Не корректно работает подменю

Не корректно работает подменюНеобходимо, чтобы при наведении курсора подменю раскрывалось, а получается оно постоянно раскрыто

155
Колонтитулы в HTML странице при печати

Колонтитулы в HTML странице при печати

хочу сделать колонтитулы на печати HTML страниц

649