Inilah solusi untuk Anda, dengan hanya menggunakan satu gambar yang sangat kecil dan sederhana dan satu elemen span yang dibuat secara otomatis:
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;
}
Gambar
(sumber: ulmanen.fi )
Catatan: jangan TIDAK hotlink ke gambar di atas! Salin file ke server Anda sendiri dan gunakan dari sana.
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);
});
}
Jika Anda ingin membatasi bintang menjadi hanya setengah atau seperempat ukuran bintang, tambahkan salah satu baris berikut sebelum var sizebaris:
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>
Pemakaian
$(function() {
$('span.stars').stars();
});
Keluaran
(sumber: ulmanen.fi )
Demo
http://www.ulmanen.fi/stuff/stars.php
Ini mungkin sesuai dengan kebutuhan Anda. Dengan metode ini Anda tidak perlu menghitung lebar bintang tiga perempat atau yang lainnya, cukup berikan pelampung dan itu akan memberi Anda bintang Anda.
Penjelasan kecil tentang bagaimana bintang ditampilkan mungkin secara berurutan.
Skrip membuat dua elemen rentang level blok. Kedua bentang awalnya mendapatkan ukuran 80px * 16px dan gambar latar belakang stars.png. Span dibuat bertingkat, sehingga struktur bentang terlihat seperti ini:
<span class="stars">
<span></span>
</span>
Rentang luar mendapat nilai background-positionsebesar 0 -16px. Itu membuat bintang abu-abu di bentang luar terlihat. Karena rentang luar memiliki tinggi 16 piksel dan repeat-x, itu hanya akan menampilkan 5 bintang abu-abu.
Rentang batin di sisi lain memiliki background-positiondari 0 0yang membuat hanya bintang kuning terlihat.
Ini tentu saja akan bekerja dengan dua imagefile terpisah, star_yellow.png dan star_gray.png. Tetapi karena bintang-bintang memiliki ketinggian yang tetap, kita dapat dengan mudah menggabungkannya menjadi satu gambar. Ini menggunakan teknik sprite CSS .
Sekarang, saat bentang bersarang, bentang secara otomatis terhampar satu sama lain. Dalam kasus default, saat lebar kedua bentang adalah 80 piksel, bintang kuning sepenuhnya mengaburkan bintang abu-abu.
Tapi ketika kita menyesuaikan lebar bentang dalam, lebar bintang kuning berkurang, menampakkan bintang abu-abu.
Dari segi aksesibilitas, akan lebih bijaksana untuk meninggalkan nomor float di dalam span bagian dalam dan menyembunyikannya dengan text-indent: -9999px, sehingga orang dengan CSS dimatikan setidaknya akan melihat nomor floating point daripada bintang.
Semoga itu masuk akal.
Diperbarui 2010/10/22
Sekarang bahkan lebih kompak dan lebih sulit untuk dipahami! Bisa juga diperas menjadi satu lapisan:
$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
});
}
