jQuery と CSS を使用して数値評価を星評価に変換する方法

数値を星評価に変換: jQuery と CSS を使用した多用途ソリューション

ユーザー インターフェイスを設計する場合、星を使用して数値評価を表すことが必要になることがよくあります。 jQuery プラグインが利用できるにもかかわらず、これらのプラグインを適応させて、特定の数値に基づいて星評価を表示するのは困難な作業となる場合があります。この記事では、CSS、jQuery、および事前定義された画像の組み合わせを使用して、この課題に対する堅牢な解決策を検討します。

CSS 定義

星の評価をスタイルするには、次の 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;
}

この CSS ブロックでは、外側のスパン (span.stars) が個々のスター (span.stars) のコンテナーとして機能します。スパン）。どちらの要素もブロック レベルの要素として設定され、特定のオフセットと繰り返しパターンを持つ stars.png の背景画像が与えられます。

画像要件

画像ファイル、stars.png は、黄色 (塗りつぶし) と灰色 (空) の両方の星の画像を含むスプライト。この画像はユーザーのサーバーに保存する必要があります。提供された画像へのホットリンクは推奨されません。

jQuery の実装

コア機能は、$.fn.stars という名前の 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);
    });
}

HTML の使用法

このプラグインを利用するには、クラスの星をスパンに適用するだけです。

<span class="stars">4.8618164</span>
<span class="stars">2.6545344</span>
<span class="stars">0.5355</span>
<span class="stars">8</span>

呼び出し

次を使用してプラグインをトリガーします。 code:

$(function() {
    $('span.stars').stars();
});

アクセシビリティに関する考慮事項

アクセシビリティを確保するには、span 要素内の元の数値を保持し、text-indent: -9999px を使用して視覚的に非表示にすることをお勧めします。このアプローチにより、スクリーン リーダーと CSS が無効になっているユーザーが基になるデータにアクセスできるようになります。

結論

このソリューションは、jQuery と CSS を使用して数値評価を星評価に効率的に変換し、表示用の多用途ツールにします。さまざまな Web アプリケーションにおける評価とユーザーのフィードバック。

以上がjQuery と CSS を使用して数値評価を星評価に変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。