Question

我的页面有一个循环，可以循环显示几十个结果并显示它们。每个结果都有一个星级。所以我正在寻找一个简单的标签，我可以在我的html页面中包含我可以提供填充星数的属性（例如：标签data-star-number = 4 ）并且它将显示5颗满颗星。

我从post on Stackoverflow看到了一些看起来像这样的HTML，但我对那里的一切都有点不知所措。我想使用bootstrap和可能的字体很棒，因为它们已经在我的应用程序中大量使用。什么是仅在我的页面上使用类插入标记的最佳插件？

<span class="rating">
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
</span>

Answer 1

纯CSS解决方案，比任何库更好，更轻：

.star {
    color: orange;
}
.star1:before {
    content : '★'
}
.star2:before {
    content : '★★'
}
.star3:before {
    content : '★★★'
}

等

<span class="star star1"></span>
<span class="star star2"></span>
<span class="star star3"></span>

依此类推，演示 - ＆gt; http://jsfiddle.net/0vffnwkw/

Answer 2

如果你愿意使用棱角分明，我想出了一些可能对你有用的东西： https://jsfiddle.net/15bu2qsk/1/

编辑较新版本的角度：https://jsfiddle.net/15bu2qsk/2/

它是一个简单的角度指令，允许您使用标签。

 <star-rating stars=3></star-rating>

可以这样使用：

<html ng-app="myApp"> 

<head>
    <title>Star Rating Directive</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>

<body> 
<script>
    var app = angular.module('myApp', []);

    app.directive('starRating', function () {
        return {
            restrict: 'E',
            scope: {
                stars: '=stars'
            },
            template: "<span ng-repeat='i in getTimes(stars) track by $index' class='glyphicon glyphicon-star'></span>",
            link: function ($scope) {
                $scope.getTimes = function (n) {
                    return new Array(n);
                };
            }
        };
    });
</script> 

<star-rating stars=3></star-rating>

</body>
</html>

如果您已经在使用Angular，那么这应该没问题。我不会仅仅针对此使用角度，因为它会增加太多的开销与功能。

Answer 3

这里是我找到的最佳答案 - 纯粹的css我可以在其中指定一个数字来填充星星。 http://codepen.io/Bluetidepro/pen/GkpEa

.star-ratings-css {
  unicode-bidi: bidi-override;
  color: #c5c5c5;
  font-size: 25px;
  height: 25px;
  width: 100px;
  margin: 0 auto;
  position: relative;
  padding: 0;
  text-shadow: 0px 1px 0 #a2a2a2;
  
  .star-ratings-css-top {
    color: #e7711b;
    padding: 0;
    text-shadow: 0px 1px 0 #ab5414;
    position: absolute;
    z-index: 1;
    display:block;
    left: 0px;
    overflow: hidden;
  }
  .star-ratings-css-bottom { z-index: 0; }
}

<div class="star-ratings-css">
  <div class="star-ratings-css-top" style="width: 68%"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
  </div>
  <div class="star-ratings-css-bottom"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
  </div>
</div>

任何好的星级评定库或插件都很快，不需要jquery或javascript

3 个答案: