Menukar Nombor kepada Penarafan Bintang: Penyelesaian Serbaguna Menggunakan jQuery dan CSS

Apabila mereka bentuk antara muka pengguna, selalunya menjadi perlu untuk mewakili penilaian angka menggunakan bintang. Walaupun terdapat pemalam jQuery, menyesuaikan pemalam ini untuk memaparkan penarafan bintang berdasarkan nombor tertentu boleh menjadi tugas yang mencabar. Artikel ini meneroka penyelesaian yang mantap untuk cabaran ini, menggunakan gabungan CSS, jQuery dan imej yang dipratakrifkan.

Definisi CSS

Untuk menggayakan penilaian bintang, peraturan CSS berikut adalah digunakan:

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

Dalam blok CSS ini, rentang luar (span.stars) bertindak sebagai bekas untuk bintang individu (span.stars span). Kedua-dua elemen ditetapkan sebagai elemen peringkat blok dan diberi imej latar belakang bintang.png dengan ofset tertentu dan corak ulangan.

Keperluan Imej

Fail imej, stars.png, berfungsi sebagai sprite yang mengandungi imej bintang kuning (diisi) dan kelabu (kosong). Imej ini mesti disimpan pada pelayan pengguna; pautan panas kepada imej yang disediakan tidak disyorkan.

Pelaksanaan jQuery

Fungsi teras dilaksanakan menggunakan pemalam jQuery bernama $.fn.stars. Pemalam ini berulang melalui setiap elemen dengan bintang kelas dan menukar kandungan berangkanya kepada paparan penarafan bintang. Pengiraan menentukan lebar bintang kuning berdasarkan nombor yang diberikan, memastikan perwakilan berkadar.

$.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);
    });
}

Penggunaan HTML

Untuk menggunakan pemalam ini, hanya gunakan bintang kelas pada rentang mengandungi penilaian angka.

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

Seruan

Pencetus pemalam menggunakan kod berikut:

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

Pertimbangan Kebolehcapaian

Untuk memastikan kebolehaksesan, adalah disyorkan untuk mengekalkan nilai angka asal dalam elemen span tetapi menjadikannya tersembunyi secara visual menggunakan inden teks : -9999px. Pendekatan ini membolehkan pembaca skrin dan pengguna dengan CSS dilumpuhkan untuk mengakses data asas.

Kesimpulan

Penyelesaian ini dengan cekap menukar penilaian angka kepada penilaian bintang menggunakan jQuery dan CSS, menjadikannya alat serba boleh untuk paparan penilaian dan maklum balas pengguna dalam pelbagai aplikasi web.

Atas ialah kandungan terperinci Bagaimana untuk Menukar Penarafan Numerik kepada Penarafan Bintang Menggunakan jQuery dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!