任何好的星級評分庫或插件，快速，不需要jQuery或JavaScript

我的網頁有一個循環，可能會循環通過可能幾十個結果並顯示它們。每個結果都將具有星級評分。所以我正在尋找一個簡單的標籤，我可以在我的html頁面中添加一個簡單的標籤，我可以提供一個滿足星星數量的屬性（例如：tag data-star-number = 4），它會顯示4個滿星從任何好的星級評分庫或插件，快速，不需要jQuery或JavaScript

我已經看到了一些從post on Stackoverflow看起來像這樣的HTML，但我有點不知所措的一切。我想使用引導程序，可能字體真棒，因爲它們都已經在我的應用程序中大量使用。什麼是插入一個標籤與我的網頁上使用的類最好的插件？

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

來源

2015-10-14 user1186050

請看看http://codepen.io/jamesbarnett/pen/vlpkh – vijayP

你怎麼打算把這些結果到頁面/動態生成的網頁？ – Nikerym

你的動態是什麼意思？這是在搜索框中輸入內容後顯示的頁面，我將其重定向到結果頁面，循環遍歷每個結果。頁面上可能有幾十個結果，每個結果都會有一個可以表示評分的int值。所以我不想執行任何邏輯，我只是想獲取評級值並將其插入屬性或其他內容，並讓它顯示星星。它不需要像這樣工作，我只是不想運行頁面上的任何邏輯，並且我不想在頁面加載後執行任何jQuery邏輯。 – user1186050

純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>

等，演示 - >http://jsfiddle.net/0vffnwkw/

來源

2015-10-14 08:50:50 davidkonrad

如果你願意使用的角度，我想出了一些可能爲你工作： 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>

如果您已經採用了棱角分明，這應該是好的。我不會僅僅爲此特別使用角度，因爲它會增加太多的開銷與功能。

來源

2015-10-14 09:27:12 SamuelN

這裏是我找到我需要的最佳答案 - 純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>

來源

2015-10-15 07:33:30 NewbCoder

任何好的星級評分庫或插件，快速，不需要jQuery或JavaScript

回答

相關問題