0
A
回答
1
圣Jaisy考虑使用这一资源来创造你想要的明星: https://css-tricks.com/examples/ShapesOfCSS/
0
我试过用bootstrap。不过,我想用Material Design Lite做到这一点。下面是示例代码 -
<div class="container">
<p>Also you can give a default rating by adding attribute data-rating</p>
<div id="stars-existing" class="starrr" data-rating='4'></div>
</div>
// 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);
});
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);
});
});
代码从这个链接
相关问题
- 1. 使用Angular 2与材料设计Lite
- 2. 材料设计lite饼图动态
- 3. 使用表格材料设计Lite网格
- 4. 使用材料设计lite错误确认密码验证
- 5. 材料设计lite sidenav onhide只显示图标
- 6. 创建ListPopUpWindow按材料在Android设计
- 7. Xamarin.Android材料设计图标
- 8. 如何使材料设计lite卡仅在X上溢出imgs?
- 9. 材料设计Lite网格不适用于手机
- 10. 材料设计TabLayout
- 11. Angular2材料设计
- 12. 设置的材料设计图标
- 13. 材料设计lite菜单不能在角度2中工作
- 14. 安装Iron后材料设计Lite版面已经改变:router
- 15. 材料设计Lite卡没有正确对齐
- 16. 无法删除材料设计Lite上的tr元素悬停
- 17. 材料设计设置
- 18. 使用VueJS的材料设计
- 19. 如何使用材料设计
- 20. AlertDialog不正确使用材料设计?
- 21. 材料设计图标代码
- 22. 材料设计图标太大
- 23. 使用材料设计Lite显示汉堡包菜单的问题
- 24. 替代id选择器在材料设计中使用工具提示lite
- 25. 星级,鼠标变星在
- 26. 错误时,材料设计
- 27. 实现材料设计CrossFadeDrawer
- 28. angular2材料设计问题
- 29. 材料设计滚动
- 30. Polymer.js没有材料设计?
展示一些东西,到目前为止你已经尝试找到。 –
我还没有尝试过任何东西......我不知道如何开始 –