Tidak sulit untuk membuat fungsi rating bintang, namun agak sulit untuk menulisnya hanya dengan menggunakan CSS. Mari kita screenshot terlebih dahulu:
Efeknya sangat sederhana. Mungkin Anda sudah mempunyai ide untuk menerapkannya di benak Anda. Mari kita lihat metode penerapan yang biasa kita lakukan:
CSS:
kode
.jsstar
{ gaya daftar: tidak ada;
margin: 0 piksel;
bantalan: 0 piksel;
lebar: 100 piksel;
tinggi: 20 piksel;
posisi: relatif;
}
.jsstarli
{
bantalan:0 piksel;
margin: 0 piksel;
mengapung: kiri;
lebar:20 piksel;
tinggi:20 piksel;
background:url(star_rating.gif) 0 0 tidak boleh diulang;
}
HTML:
<p>Implementasi Javascript + CSS</p>
<ul kelas="jsstar">
<li title="Bintang Satu"></li>
<li title="Dua bintang"></li>
<li title="Samsung"></li>
<li title="Empat bintang"></li>
<li title="lima bintang"></li>
</ul>
JS: (saya menggunakan jquery)
<skrip type="teks/javascript" src="jquery-1.3.1.js"></script>
<skrip tipe="teks/javascript">
$(dokumen).siap(fungsi(){
$(".jsstar >li").hover(
function(){$(ini).css({"background-position":"kiri bawah"}).prev().trigger("mouseover")},
function(){$(ini).css({"background-position":"kiri atas"}).prev().trigger("mouseout")})
.klik(fungsi(){alert($(ini).attr("judul"))});
});
</skrip>
Berikut renderingnya:
Apakah tidak ada bedanya dengan cara di atas, namun menurut saya jika pengguna menonaktifkan javascript, bukankah efeknya akan sangat merugikan?
Jadi kami berpikir untuk menggunakan CSS murni untuk mengimplementasikannya.
CSS:
kode
1 /*Bintang CSS dimulai*/
2. peringkat bintang
3 {
4 gaya daftar: tidak ada;
5 margin: 0 piksel;
6 bantalan: 0px;
7 lebar: 100 piksel;
8 tinggi: 20 piksel;
9 posisi: relatif;
10 latar belakang: url(star_rating.gif) kiri atas ulangi-x;
11 }
12. peringkat bintangli
13 {
14 bantalan: 0 piksel;
15 margin: 0 piksel;
16 pelampung: kiri;
17}
18 .peringkat bintang li a
19 {
20 tampilan: blok;
lebar 21: 20 piksel;
22 tinggi: 20 piksel;
23 dekorasi teks: tidak ada;
24 indentasi teks: -9000px;
25 indeks-z: 20;
26 posisi: mutlak;
27 bantalan: 0 piksel;
28 }
29 .peringkat bintang li a:hover
30 {
31 latar belakang: url(star_rating.gif) kiri bawah;
32 indeks-z: 1;
33 kiri: 0 piksel;
34}
35. peringkat bintang a.satu bintang
36 {
37 kiri: 0 piksel;
38 }
39. peringkat bintang a.bintang satu: arahkan kursor
40 {
lebar 41: 20 piksel;
42 }
43. peringkat bintang a.dua bintang
44 {
45 kiri: 20 piksel;
46 }
47. peringkat bintang a.dua bintang: arahkan kursor
48 {
lebar 49: 40 piksel;
50 }
51. peringkat bintang a.bintang tiga: arahkan kursor
52 {
53 lebar: 60 piksel;
54 }
55. peringkat bintang a.bintang tiga
56 {
57 kiri: 40 piksel;
58 }
59. peringkat bintang a. bintang empat
60 {
61 kiri: 60 piksel;
62 }
63. peringkat bintang a. bintang empat: arahkan kursor
64 {
lebar 65: 80 piksel;
66 }
67. peringkat bintang a.bintang lima
68 {
69 kiri: 80 piksel;
70}
71. peringkat bintang a.bintang lima: arahkan kursor
72 {
73 lebar: 100 piksel;
74
75 }
HTML:
<ul class='peringkat bintang'>
<li><a href='#' title='Bintang Satu' class='bintang satu'>1</a></li>
<li><a href='#' title='dua bintang' class='dua bintang'>2</a></li>
<li><a href='#' title='Samsung' class='three-stars'>3</a></li>
<li><a href='#' title='bintang empat' class='bintang empat'>4</a></li>
<li><a href='#' title='五星' class='bintang lima'>5</a></li>
</ul>
Melihat nomor baris CSS di atas, apakah Anda kaget karena efek sederhana seperti itu memerlukan begitu banyak kode? Menurut pendapat saya, Anda hanya dapat memiliki satu efek dan satu gaya tanpa menggunakan JS. Jika Anda memiliki efek yang lebih sederhana dan mempesona, beri tahu saya!