Sebagai contoh, kita buat sebuah kerangka list seperti ini (boleh ordered list ataupun unordered list):
<ul class='kuda-zebra'>
<li>Andai Saja</li>
<li>Engkau Tahu</li>
<li>Betapa Aku</li>
<li>Kebelet Pipis</li>
<li>Maukah...</li>
</ul>Di sini kita memakai
<ul> atau unordered list.Sekarang kita buat kode pemodel sederhana untuk bahan praktek tersebut seperti ini:
ul.kuda-zebra {font-weight:bold;}
.kuda-zebra li {color:darkRed;}Maka nantinya hasilnya akan tampak seperti ini:

Sekarang kita terapkan sistem JQuery sederhana seperti ini:
$(document).ready(function() {
$('ul.kuda-zebra li:even').addClass('kampret');
});Lalu tambahkan sebuah pemodel baru dengan nama
li.kampret (maksudnya elemen <li> yang memiliki class "kampret") dan buat deklarasi pewarnaan yang berbeda (misalnya hijau tua):ul.kuda-zebra {font-weight:bold;}
.kuda-zebra li {color:darkRed;}
li.kampret {color:darkGreen;}Nah, sekarang, elemen listmu akan berubah warna menjadi seperti ini:

Menarik bukan? (Jawab: tidak juga)
Ada dua hal penting yang mempengaruhi perubahan warna ini, yaitu pada CSS
li.kampret{ ... } dan dari JQuery itu sendiri.Perhatikan kode ini:
$('ul.kuda-zebra li:even').addClass('kampret');Kode tersebut dibaca: Elemen
<li> bernilai genap yang berada dalam elemen <ul> dengan class "kuda-zebra" akan mendapatkan jatah class "kampret" satu-satu secara otomatis.Nah, karena kita sudah menentukan bahwa elemen
<li> dengan class "kampret" akan mendapatkan tampilan berwarna hijau tua (li.kampret{color:darkGreen;}), maka berubahlah tampilan setiap elemen <li> bernilai genap secara otomatis.:even artinya genap, :odd artinya ganjil
Sebenarnya, meskipun tidak memakai JQuery, kita juga bisa menerapkan sistem ini dengan menuliskannya secara manual seperti ini:
<ul class='kuda-zebra'>
<li>Ganjil</li>
<li class='kampret'>Genap</li>
<li>Ganjil</li>
<li class='kampret'>Genap</li>
<li>Ganjil</li>
</ul>Tapi bukankah itu adalah pekerjaan yang melelahkan? (Jawab:Hmmm...)
Asal tahu saja, penerapan sistem ini juga digunakan dalam Accordion TOC buatan Abu Farhan, juga pada menu navigasi JQuery yang warnanya cokelat itu.


Posting Komentar