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沒有材料設計?
展示一些東西,到目前爲止你已經嘗試找到。 –
我還沒有嘗試過任何東西......我不知道如何開始 –