Bu yazımızda jQuery'in filtreleme tekniklerinden basit filtreleri inceleyeceğiz ve alternatif desen (zebra:farklı satır arkaplan rengi, farklı satır rengi) uygulaması yapacağız.
Alternatif desen uygulamasında hedef, tek ve çift indeks numaralı satırların arkaplan renklerinin sıralı bir şekilde değişimini sağlamaktır (Mesela bir tablo içerisindeki satırların arkaplan renginin alternatif bir şekilde değişmesi).
Bu uygulamayı jQuery veya javascript kullanmadan yapmak da mümkündür tabii... Her çift ve tek satırlar için ayrı bir "css sınıf (class)" tanımlayıp işi çözebiliriz, buradaki mantık da pek farklı değildir. Ancak eğer bu uygulamayı dinamik bir şekilde yapmak istediğinizde (Örneğin php ile veritabanından veriler çekip bir tablo oluşturacaksanız), en azından bir kontrol mekanizması oluşturmanız ve ilgili css sınıflarını (class) da tanımlamış olmanız gerekecektir.
Oysa bunu jQuery ile yaptığınızda, -herşeyden önce çok daha kolay ve hızlı yaparsınız-, tablo içerisinde herhangi bir kontrol mekanizması ya da class belirtmenize gerek kalmaz, ve diğer tablolarınızı da bu yöntemle kolayca zebra deseni haline getirmeniz mümkün olur.
Şimdi jQuery basit filtrelere kısaca bir göz atalım:
DOM sisteminde her nesnenin bir sıralama (index) numarası vardır, ve "0" ile başlar (Dizi kullanımı gibi), indeks numralarına göre filtre yapılır.
Basit filtreler (:) ile başlar
Basit filtreler:
- :first //index numarası 0 olan nesneyi seçer
- :last //Son index numarasına sahip olan nesneyi seçer
- :not //Belirtilen özelliğin olmayanını seçer
- :even //Çift index numarasına sahip olan nesneleri seçer
- :odd //Tek index numarasına sahip olan nesneyi seçer
- :eq(n);:nth(n) //Belirtilen index numarasına sahip olan nesneyi seçer
- :gt(n) //Belirtilen index numarasından büyük olan index numarasıa sahip nesneleri seçer
- :lt(n) //Belirtilen index numarasından küçük olan index numarasıa sahip nesneleri seçer
- :header //Header (h1,h2,h3 vb.) nesnelerini seçer
- :animated //Animasyon halindeki nesneleri seçer
Örnekler:
- $('p:first') // Index numarası 0 olan paragrafı seçer
- $('p:last') // Index numarası en son olan paragrafı seçer
- $('p:not("#pid")') // paragraflar içinde id değeri "pid" olmayan paragrafları seçer
- $('tr:even') //Çift index numarasına sahip olan tr değerlerini seçer
- $('tr:odd') //Tek index numarasına sahip olan tr değerlerini seçer
- $('p:eq(2)') //3. paragrafı (index=2)
- $('p:nth(2)') //3. paragrafı (index=2)
- $('p:gt(3)') //index numarası 3'ten büyük olan paragrafları seçer
- $('p:lt(10)') //index numarası 10'dan küçük paragrafları seçer
- $(':header') // Tüm header başlıklarını seçer
- $('div:animated') //Animasyon halindeki olan span nesnelerini seçer
Uygulama:
Aşağıdaki tablo jQuery kullanılarak zebra deseni haline getirilmiştir:
| # | Ders | Konu | Bölüm |
|---|
| 1- | JQuery Giriş | jQuery API açıklamalar | jQuery |
| 2- | Html Dom Nesne | Nesne Açıklamaları | JS |
| 3- | PHP ve Mysql | MySQL ile Veritabanı bağlantısı | PHP |
| 4- | Html Dom Nesne | Nesne Açıklamaları | JS |
| 5- | PHP ve Mysql | MySQL ile Veritabanı bağlantısı | PHP |
| 6- | JQuery Giriş | jQuery API açıklamalar | jQuery |
CSS yapısı:
#zebra{
border-collapse:collapse
}
<table id="zebra">
<thead><tr><th>#</th><th>Ders</th><th>Konu</th><th>Bölüm</th></tr></thead>
<tr><td>1-</td><td>JQuery Giriş</td><td>jQuery API açıklamalar</td><td>jQuery</td></tr>
<tr><td>2-</td><td>Html Dom Nesne</td><td>Nesne Açıklamaları</td><td>JS</td></tr>
<tr><td>3-</td><td>PHP ve Mysql</td><td>MySQL ile Veritabanı bağlantısı</td><td>PHP</td></tr>
<tr><td>4-</td><td>Html Dom Nesne</td><td>Nesne Açıklamaları</td><td>JS</td></tr>
<tr><td>5-</td><td>PHP ve Mysql</td><td>MySQL ile Veritabanı bağlantısı</td><td>PHP</td></tr>
<tr><td>6-</td><td>JQuery Giriş</td><td>jQuery API açıklamalar</td><td>jQuery</td></tr>
</table>
jQuery yapısı:
<script type="text/javascript">
$(document).ready(function(){
$('#zebra tr:odd').css({"background-color":"orange"});
$('#zebra thead').css({"background-color":"gray"});
});
</script>
Açıklamalar:
- 3. "zebra" id'li tablonun tek index numaralı satırları seçilip arkaplan renleri "turuncu" yapılıyor
- 4. "zebra" id'li tablonun "thead" etiketi seçilip "gri" yapılıyor
Kolay gelsin, görüşmek üzere...
