104

私はjqueryプラグインを見ていて、そのプラグインをどのように適応させて数字（4.8618164など）を5つ星のうち4.8618164つ星に変えるのか疑問に思っていました。基本的に、5つ星未満の数字をjQueryを使用して5つ星評価システムで満たされた星に解釈します/JS/CSS.

これは、すでに利用可能な数からの星の評価のみを表示/表示し、新しい評価の提出を受け入れないことに注意してください。

4

8 に答える 8

256

非常に小さくてシンプルな画像を 1 つだけ使用し、自動生成されたスパン要素を 1 つだけ使用するソリューションを次に示します。

CSS

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 )

注:上の画像にホットリンクしないでください。ファイルを自分のサーバーにコピーして、そこから使用します。

jQuery

$.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 */

HTML

<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();
});

出力

フーガのアイコンセットからの画像 (www.pinvoke.com)
(出典: ulmanen.fi )

デモ

http://www.ulmanen.fi/stuff/stars.php

これはおそらくあなたのニーズに合うでしょう。この方法では、3/4 などの星の幅を計算する必要はありません。float を指定するだけで、星が表示されます。

星がどのように表示されるかについての簡単な説明が適切かもしれません.

このスクリプトは、2 つのブロック レベルのスパン要素を作成します。両方のスパンは、最初は 80px * 16px のサイズと背景画像 star.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 が無効になっているユーザーは、星の代わりに少なくとも浮動小数点数が表示されます。

うまくいけば、それはある程度の意味がありました。

2010/10/22 更新

さらにコンパクトになり、わかりにくくなりました！1 つのライナーに絞り込むこともできます。

$.fn.stars = function() {
    return $(this).each(function() {
        $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
    });
}
于 2010-01-01T00:09:33.643 に答える
7

星の 5 つの個別の画像 (空、1/4 満杯、1/2 満杯、3/4 満杯、満杯) を用意してから、4 を掛けた評価の切り捨てまたは丸められた値に応じて、DOM に画像を挿入するだけではどうですか (四半期の整数を取得するには）？

たとえば、4.8618164 を 4 倍して四捨五入すると 19 になり、4 と 3/4 スターになります。

または (私のように怠惰な場合)、21 個の画像 (星 0 個から星 5 個まで 4 分の 1 ずつ) から 1 つの画像を選択し、前述の値に基づいて単一の画像を選択します。次に、1 回の計算の後に DOM で画像を変更します (5 つの異なる画像を変更しようとするのではなく)。

于 2010-01-01T00:06:39.843 に答える
5

クライアント側のレンダリング ラグを回避するために、最終的には完全に JS を使用しなくなりました。これを実現するために、次のような HTML を生成します。

<span class="stars" title="{value as decimal}">
    <span style="width={value/5*100}%;"/>
</span>

アクセシビリティを向上させるために、title 属性に生の評価値も追加しています。

于 2015-03-29T02:22:02.820 に答える
4

プロトタイプなしで 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);
});

また、スパンに data-rating という名前のデータ属性を追加しました。

<span class="stars" data-rating="4" ></span>
于 2015-03-27T20:02:49.033 に答える