Membuat Tampilan List/Daftar dengan Warna Berselingan secara Otomatis

Melanjut sedikit tentang bagaimana JQuery bisa mengubah tampilan list menjadi berbeda warna antara list genap dan list ganjil, ini adalah sebagian kecil cara kerjanya.
Sebagai contoh, kita buat sebuah kerangka list seperti ini (boleh ordered listataupun 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 TOCbuatan Abu Farhan, juga pada menu navigasi JQuery yang warnanya cokelat itu.

9 Komentar

  • Putra

    gak bisa make hover yahh? kok pas sy coba gak bisa T_T

  • Taufik Nurrohman

    @Alam Perwira Sekarang tutorial ini sudah tidak terlalu berlaku. CSS3 sudah memiliki selektor pseudo class :nth-child(), jadi buat saja seperti ini:

    ul li:nth-child(even) {color:green;}

    Demo: http://jsfiddle.net/tovic/jUaG4/4/

    Kalau ingin menerapkan :hover, nama kelas yang spesifik di atas harus ditambahkan juga:

    ul.kuda-zebra {font-weight:bold;}
    ul.kuda-zebra li {color:darkred;}
    ul.kuda-zebra li.kampret {color:darkgreen;}
    ul.kuda-zebra li:hover,
    ul.kuda-zebra li.kampret:hover {color:orange;}

    Demo: http://jsfiddle.net/tovic/jUaG4/5/

    • Putra

      saya coba di post-outer kok gak bisa yah? :D
      width yang ganjil saya lebarin..

      • Taufik Nurrohman

        Di luar post outer masih ada elemen lagi, lebih baik targetkan direct chidren dari kolom posting seperti ini:

        #main-wrapper > div:nth-child(odd) {
        width:300px !important;
        }

        Atau coba gunakan :nth-of-type()

        .post-outer:nth-of-type(odd) {
        width:300px !important;
        }
        • Putra

          masih belum jadi T_T
          udah saya atasin make tag kondisional deh :)
          thanks penjelasannya. Tp masih kurang tahu :nth-of-type sama kawan kawannya (:nth.. :last-ch..) :(

  • Putra

    @Alam Perwira yeah, berhasil!! ;)

    oh ia, dapet pesen dari MUXLIMO. Dia nggak bisa buka blog ini, katanya ada notif malware dr blog ini T_T .Ada lagi yang mengatakan begitu, Muhammad Irham. Dia beri tahu ak pas di chat facebook. Kok saya gak ada yah?. Yaudahlah pesan disampaikan!! Laporan selesai dengan penuh duka T_T

  • Taufik Nurrohman

    @Alam Perwira Kayaknya pesan itu muncul gara-gara link CSSDeck, atau gara-gara ikon Lisensi Creative Commons. Ikonnya sudah Saya ganti. Sekarang bagaimana?

  • Putra

    @Alam Perwira ohh, belum tau nih, belum ada kabar. Coba tak tanya dia dulu.

    mas, mau tanya. Kalau buat sub menu di navigasi blogazine template yang dibuat kangmas caranya gmn? tak coba kayak gini failed T_T
    <ul>
    <li><a href='https://www.facebook.com/Alaamzz' target='_blank' title='Contact Me at Facebook'>Contact Me</a>
    <ul>
    <li>Beranda/li>
    <li>Site Map</li>
    <li>Archive</li>
    </ul>
    </li>
    </ul>

  • Taufik Nurrohman

    @Alam Perwira Harus ada CSS khusus untuk level navigasi sekunder ⇒ Mari Berbicara Soal Menu Navigasi

Komentar telah ditutup.