Basit jQuery Uygulamaları Yazıyoruz : Tablolara Zebra Deseni Uygulamak
Merhaba Arkadaşlar,
Bugün sizlere” Basit jQuery Uygulamaları Yazıyoruz ” isimli eğitim makaleleri serimizin bir konusu olan ” Tablolara Zebra Deseni Uygulamak ” isimli konuyu anlatmaya çalışacağım. Günümüz tasarım dünyasında bilindiği üzere tablolar artık eskisi kadar yer alamamaktadırlar. Ancak bazı sıralamaların kullanıcılara aktarımları sırasında listeleme işlemlerinin yetersiz kalmasından dolayı tablo kullanımları halen bulunmaktadır.
Bu tablo kullanımlarında da bir satırın içerisinde bulunan tüm bilgilerin rahatlıkla okunabilmesi ve diğer satırlarla karışmaması için tüm satırlara zebra deseni uygulanmaktadır. Sayfamızın CSS kodları arasında belirleyeceğimiz iki farklı renk tonuna ait class ‘ı jQuery kodları ile tablonun tek numaralı ve çift numaralı satırlarına atayacağız. Bu kısa işlem ile bu makalemizi amacına ulaştırarak sonlandırmış olacağız. İşlemlerimize başlayalım..
Bir adet klasör oluşturalım ve içerisine ismi ” index.html ” olan bir sayfa yaratalım. Daha sonra kodlamak üzere sayfamızı bir metin editörü ile açarak ilk olarak klasik html kodlarımızı ve daha sonra datag ‘leri arasına bir tablo oluşturarak 10 adet satır içerisine rastgele bilgiler girelim. Görüntü şu şekilde olacaktır.
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulamaları</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>Admin</td>
<td>Amca</td>
</tr>
<tr>
<td>2</td>
<td>Ali</td>
<td>Can</td>
</tr>
<tr>
<td>3</td>
<td>Veli</td>
<td>Kara</td>
</tr>
<tr>
<td>4</td>
<td>Ayşe</td>
<td>Can</td>
</tr>
<tr>
<td>5</td>
<td>Fatma</td>
<td>Kara</td>
</tr>
<tr>
<td>6</td>
<td>Admin</td>
<td>Amca</td>
</tr>
<tr>
<td>7</td>
<td>Ali</td>
<td>Can</td>
</tr>
<tr>
<td>8</td>
<td>Veli</td>
<td>Kara</td>
</tr>
<tr>
<td>9</td>
<td>Ayşe</td>
<td>Can</td>
</tr>
<tr>
<td>10</td>
<td>Fatma</td>
<td>Kara</td>
</tr>
</table>
</body>
</html>
Sayfamızı kaydedip çalıştırdığımızda 10 satırlı bir tablo göreceğiz. Şimdi zebra deseni uygulamak için ilk olarak son sürüm jQuery kütüphanemizi indireceğiz. Bunun için ” www.jquery.com ” adresine giderek ” Download ” butonundan indirme işlemimizi gerçekleştiriyoruz ve index sayfamızın bulunduğu klasör içerisine kaydediyoruz.
Şimdi yapacağımız işlemde ise hem jQuery kütüphanemizi sayfamıza çağıracağız hem de inline olarak CSS yazarak iki farklı renk ile class ‘larımızı belirleyeceğiz. Sayfamızın bu işlemleri yaptıktan sonraki görüntüsü şu şekilde olacaktır.
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulamaları</title>
<script src="jquery-1.9.0.min.js"></script>
<style>
.ilkRenk{background: #acacac;}
.ikinciRenk{background: #d4d7d5;}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>Admin</td>
<td>Amca</td>
</tr>
<tr>
<td>2</td>
<td>Ali</td>
<td>Can</td>
</tr>
<tr>
<td>3</td>
<td>Veli</td>
<td>Kara</td>
</tr>
<tr>
<td>4</td>
<td>Ayşe</td>
<td>Can</td>
</tr>
<tr>
<td>5</td>
<td>Fatma</td>
<td>Kara</td>
</tr>
<tr>
<td>6</td>
<td>Admin</td>
<td>Amca</td>
</tr>
<tr>
<td>7</td>
<td>Ali</td>
<td>Can</td>
</tr>
<tr>
<td>8</td>
<td>Veli</td>
<td>Kara</td>
</tr>
<tr>
<td>9</td>
<td>Ayşe</td>
<td>Can</td>
</tr>
<tr>
<td>10</td>
<td>Fatma</td>
<td>Kara</td>
</tr>
</table>
</body>
</html>
Belirlediğimiz iki rengin ardından bu renkleri jQuery vasıtası ile tablo satırlarına aktarmamız gerekmektedir. Bunun içintag ‘leri açarak kodlarımızı yazıyoruz. İlk olarak kodları paylaşalım ve daha sonra anlamlarını açıklayalım.
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulamaları</title>
<script src="jquery-1.9.0.min.js"></script>
<style>
.ilkRenk{background: #acacac;}
.ikinciRenk{background: #d4d7d5;}
</style>
<script>
$(document).ready(function(){
$('table tr:odd').addClass('ilkRenk');
$('table tr:even').addClass('ikinciRenk');
});
</script>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>Admin</td>
<td>Amca</td>
</tr>
<tr>
<td>2</td>
<td>Ali</td>
<td>Can</td>
</tr>
<tr>
<td>3</td>
<td>Veli</td>
<td>Kara</td>
</tr>
<tr>
<td>4</td>
<td>Ayşe</td>
<td>Can</td>
</tr>
<tr>
<td>5</td>
<td>Fatma</td>
<td>Kara</td>
</tr>
<tr>
<td>6</td>
<td>Admin</td>
<td>Amca</td>
</tr>
<tr>
<td>7</td>
<td>Ali</td>
<td>Can</td>
</tr>
<tr>
<td>8</td>
<td>Veli</td>
<td>Kara</td>
</tr>
<tr>
<td>9</td>
<td>Ayşe</td>
<td>Can</td>
</tr>
<tr>
<td>10</td>
<td>Fatma</td>
<td>Kara</td>
</tr>
</table>
</body>
</html>
Etiketlerimiz arasında ilk olarak bu işlemin sayfa yüklendiği anda yapılması gerektiğini yazdık. Daha sonra ise tablo içerisinde bulunan satırlara atayacağımız class ‘ların yerlerini ” : odd ” ve ” : even ” komutları ile belirledik. Bu komutlardan ” : odd ” tek haneli ( 1,3,5,7,9 ) satırlara atayacağımız Class ‘ın belirlendiği alandır. ” : even ” ise çift haneli ( 2,4,6,8,10 ) satırlara atayacağımız Class ‘ın belirlendiği alandır.
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 33 No ‘lu Maddeden İndirebilirsiniz..
çok faydalı teşekkürler…