回答:
非常に小さくシンプルな画像を1つと、自動的に生成されたスパン要素を1つだけ使用するソリューションを次に示します。
span.stars, span.stars span {
display: block;
background: url(stars.png) 0 -16px repeat-x;
width: 80px;
height: 16px;
}
span.stars span {
background-position: 0 0;
}
(ソース:ulmanen.fi)
注:上記の画像にホットリンクしないでください!ファイルを自分のサーバーにコピーして、そこから使用します。
$.fn.stars = function() {
return $(this).each(function() {
// Get the value
var val = parseFloat($(this).html());
// Make sure that the value is in 0 - 5 range, multiply to get width
var size = Math.max(0, (Math.min(5, val))) * 16;
// Create stars holder
var $span = $('<span />').width(size);
// Replace the numerical value with stars
$(this).html($span);
});
}
星のサイズを半分または4分の1に制限する場合は、次の行のいずれかを行の前に追加しますvar size
。
val = Math.round(val * 4) / 4; /* To round to nearest quarter */
val = Math.round(val * 2) / 2; /* To round to nearest half */
<span class="stars">4.8618164</span>
<span class="stars">2.6545344</span>
<span class="stars">0.5355</span>
<span class="stars">8</span>
$(function() {
$('span.stars').stars();
});
(ソース:ulmanen.fi)
これはおそらくあなたのニーズに合うでしょう。この方法を使用すると、4分の3や星の幅を計算する必要はありません。浮動小数点数を指定するだけで、星が得られます。
星がどのように提示されるかについての簡単な説明が適切かもしれません。
スクリプトは、2つのブロックレベルのスパン要素を作成します。両方のスパンは、最初に80px * 16pxのサイズと背景画像stars.pngを取得します。スパンはネストされているため、スパンの構造は次のようになります。
<span class="stars">
<span></span>
</span>
外側のスパンはのbackground-position
を取得し0 -16px
ます。これにより、外側のスパンの灰色の星が見えるようになります。外側のスパンの高さは16pxとなので、repeat-x
灰色の星は5つしか表示されません。
一方、内側のスパンにはbackground-position
が0 0
あり、黄色の星だけが表示されます。
もちろん、これはstar_yellow.pngとstar_gray.pngの2つの別々の画像ファイルで機能します。ただし、星の高さは固定されているため、簡単に1つの画像にまとめることができます。これはCSSスプライト技術を利用しています。
これで、スパンがネストされるため、スパンは自動的に互いにオーバーレイされます。デフォルトの場合、両方のスパンの幅が80pxの場合、黄色の星は灰色の星を完全に覆い隠します。
しかし、内側のスパンの幅を調整すると、黄色の星の幅が減少し、灰色の星が現れます。
アクセシビリティに関しては、浮動小数点数を内部スパン内に残してで非表示にするとtext-indent: -9999px
、CSSがオフになっている人は少なくとも星ではなく浮動小数点数が表示されます。
うまくいけば、それはある意味をなした。
さらにコンパクトになり、理解しにくくなりました!ワンライナーに絞ることもできます:
$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
});
}
max-width
)。
最新のブラウザのみをサポートする必要がある場合は、次の方法で回避できます。
class
たとえば、数値をに変換するだけですclass='stars-score-50'
。
最初に「レンダリングされた」マークアップのデモ:
body { font-size: 18px; }
.stars-container {
position: relative;
display: inline-block;
color: transparent;
}
.stars-container:before {
position: absolute;
top: 0;
left: 0;
content: '★★★★★';
color: lightgray;
}
.stars-container:after {
position: absolute;
top: 0;
left: 0;
content: '★★★★★';
color: gold;
overflow: hidden;
}
.stars-0:after { width: 0%; }
.stars-10:after { width: 10%; }
.stars-20:after { width: 20%; }
.stars-30:after { width: 30%; }
.stars-40:after { width: 40%; }
.stars-50:after { width: 50%; }
.stars-60:after { width: 60%; }
.stars-70:after { width: 70%; }
.stars-80:after { width: 80%; }
.stars-90:after { width: 90%; }
.stars-100:after { width: 100; }
Within block level elements:
<div><span class="stars-container stars-0">★★★★★</span></div>
<div><span class="stars-container stars-10">★★★★★</span></div>
<div><span class="stars-container stars-20">★★★★★</span></div>
<div><span class="stars-container stars-30">★★★★★</span></div>
<div><span class="stars-container stars-40">★★★★★</span></div>
<div><span class="stars-container stars-50">★★★★★</span></div>
<div><span class="stars-container stars-60">★★★★★</span></div>
<div><span class="stars-container stars-70">★★★★★</span></div>
<div><span class="stars-container stars-80">★★★★★</span></div>
<div><span class="stars-container stars-90">★★★★★</span></div>
<div><span class="stars-container stars-100">★★★★★</span></div>
<p>Or use it in a sentence: <span class="stars-container stars-70">★★★★★</span> (cool, huh?).</p>
次に、ほんの少しのコードを使用するデモ:
$(function() {
function addScore(score, $domElement) {
$("<span class='stars-container'>")
.addClass("stars-" + score.toString())
.text("★★★★★")
.appendTo($domElement);
}
addScore(70, $("#fixture"));
});
body { font-size: 18px; }
.stars-container {
position: relative;
display: inline-block;
color: transparent;
}
.stars-container:before {
position: absolute;
top: 0;
left: 0;
content: '★★★★★';
color: lightgray;
}
.stars-container:after {
position: absolute;
top: 0;
left: 0;
content: '★★★★★';
color: gold;
overflow: hidden;
}
.stars-0:after { width: 0%; }
.stars-10:after { width: 10%; }
.stars-20:after { width: 20%; }
.stars-30:after { width: 30%; }
.stars-40:after { width: 40%; }
.stars-50:after { width: 50%; }
.stars-60:after { width: 60%; }
.stars-70:after { width: 70%; }
.stars-80:after { width: 80%; }
.stars-90:after { width: 90%; }
.stars-100:after { width: 100; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Generated: <div id="fixture"></div>
このソリューションの最大の欠点は次のとおりです。
width
)。これを修正するには、上記のソリューションを簡単に調整できます。:before
そして:after
ビットは、DOM内の実際の要素(私たちはそのためのいくつかのJSを必要とするので)になる必要があります。
後者は読者のための練習問題として残されています。
このjqueryヘルパー関数/ファイルを試してください
jquery.Rating.js
//ES5
$.fn.stars = function() {
return $(this).each(function() {
var rating = $(this).data("rating");
var fullStar = new Array(Math.floor(rating + 1)).join('<i class="fas fa-star"></i>');
var halfStar = ((rating%1) !== 0) ? '<i class="fas fa-star-half-alt"></i>': '';
var noStar = new Array(Math.floor($(this).data("numStars") + 1 - rating)).join('<i class="far fa-star"></i>');
$(this).html(fullStar + halfStar + noStar);
});
}
//ES6
$.fn.stars = function() {
return $(this).each(function() {
const rating = $(this).data("rating");
const numStars = $(this).data("numStars");
const fullStar = '<i class="fas fa-star"></i>'.repeat(Math.floor(rating));
const halfStar = (rating%1!== 0) ? '<i class="fas fa-star-half-alt"></i>': '';
const noStar = '<i class="far fa-star"></i>'.repeat(Math.floor(numStars-rating));
$(this).html(`${fullStar}${halfStar}${noStar}`);
});
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Star Rating</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/jquery.Rating.js"></script>
<script>
$(function(){
$('.stars').stars();
});
</script>
</head>
<body>
<span class="stars" data-rating="3.5" data-num-stars="5" ></span>
</body>
</html>
プロトタイプなしでjqueryを使用して、jsコードを
$( ".stars" ).each(function() {
// Get the value
var val = $(this).data("rating");
// Make sure that the value is in 0 - 5 range, multiply to get width
var size = Math.max(0, (Math.min(5, val))) * 16;
// Create stars holder
var $span = $('<span />').width(size);
// Replace the numerical value with stars
$(this).html($span);
});
また、スパンのデータレーティングの名前でデータ属性を追加しました。
<span class="stars" data-rating="4" ></span>