將數(shù)字轉(zhuǎn)換為星級(jí)：使用 jQuery 和 CSS 的多功能解決方案

設(shè)計(jì)使用者介面時(shí)，通常需要使用星星來表示數(shù)位評(píng)級(jí)。儘管有 jQuery 插件可用，但調(diào)整這些插件以根據(jù)給定的數(shù)字顯示星級(jí)評(píng)級(jí)可能是一項(xiàng)具有挑戰(zhàn)性的任務(wù)。本文結(jié)合使用 CSS、jQuery 和預(yù)定義圖像，探討了應(yīng)對(duì)這項(xiàng)挑戰(zhàn)的強(qiáng)大解決方案。

CSS 定義

要設(shè)定星級(jí)評(píng)級(jí)的樣式，請(qǐng)使用以下CSS 規(guī)則：使用：

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 區(qū)塊中，外部跨度(span. stars) 充當(dāng)各個(gè)星號(hào)(span.stars) 的容器跨度）。這兩個(gè)元素都設(shè)定為區(qū)塊級(jí)元素，並給出帶有特定偏移量和重複模式的stars.png背景影像。

影像要求

影像檔案stars.png用作包含黃色（實(shí)心）和灰色（空心）星星影像的精靈。該圖片必須儲(chǔ)存在使用者的伺服器上；不建議熱連結(jié)到提供的圖像。

jQuery 實(shí)作

核心功能是使用名為 $.fn.stars 的 jQuery 外掛程式實(shí)現(xiàn)的。該插件迭代帶有星級(jí)類別的每個(gè)元素，並將其數(shù)位內(nèi)容轉(zhuǎn)換為星級(jí)顯示。計(jì)算根據(jù)給定的數(shù)字確定黃色星星的寬度，確保按比例表示。

$.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 用法

要使用此插件，只需將類星星應(yīng)用於跨度包含數(shù)字評(píng)級(jí)。

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

呼叫

使用以下指令觸發(fā)外掛程式code:

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

輔助功能注意事項(xiàng)

為了確保輔助功能，建議保留span元素中的原始數(shù)值，但使用text-indent: -9999px 使其在視覺上隱藏。這種方法允許螢?zāi)婚喿x器和禁用 CSS 的用戶存取底層資料。

結(jié)論

該解決方案使用jQuery 和CSS 有效地將數(shù)位評(píng)級(jí)轉(zhuǎn)換為星級(jí)評(píng)級(jí)，使其成為一種多功能的顯示工具各種網(wǎng)路應(yīng)用程式中的評(píng)級(jí)和用戶回饋。

以上是如何使用 jQuery 和 CSS 將數(shù)字評(píng)級(jí)轉(zhuǎn)換為星級(jí)評(píng)級(jí)？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！