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

ユーザー インターフェイスを設(shè)計する場合、星を使用して數(shù)値評価を表すことが必要になることがよくあります。 jQuery プラグインが利用できるにもかかわらず、これらのプラグインを適応させて、特定の數(shù)値に基づいて星評価を表示するのは困難な作業(yè)となる場合があります。この記事では、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 ブロックでは、外側(cè)のスパン (span.stars) が個々のスター (span.stars) のコンテナーとして機能します。スパン）。どちらの要素もブロック レベルの要素として設(shè)定され、特定のオフセットと繰り返しパターンを持つ stars.png の背景畫像が與えられます。

畫像要件

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

jQuery の実裝

コア機能は、$.fn.stars という名前の jQuery プラグインを使用して実裝されます。このプラグインは、クラスの星を含む各要素を反復(fù)処理し、その數(shù)値コンテンツを星による評価表示に変換します。計算により、指定された數(shù)値に基づいて黃色の星の幅が決定され、比例表現(xiàn)が確保されます。

$.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 要素內(nèi)の元の數(shù)値を保持し、text-indent: -9999px を使用して視覚的に非表示にすることをお勧めします。このアプローチにより、スクリーン リーダーと CSS が無効になっているユーザーが基になるデータにアクセスできるようになります。

結(jié)論

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

以上がjQuery と CSS を使用して數(shù)値評価を星評価に変換する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。