Bu yazımızda, daha önce başladığımız "jQuery'de kendi eklentimizi oluşturma" yazımıza devam edeceğiz, ilk açıklamalar için önceki dersimize göz atabilirsiniz.
Uygulama:
Bu uygulamamızda, kendi eklentimizi oluşturup, başlık kısmındaki ana onay kutusunun ("checkbox") seçimi ile diğer onay kutularının ("checkbox") seçilip seçilmemesini sağlayan bir uygulama yapacağız.
HTML yapısı:
<div id="area">
<table id="table1">
<thead><tr><th><input type="checkbox"/></th><th>Ders</th><th>Konu</th><th>Bölüm</th></tr></thead>
<tbody>
<tr><td><input type="checkbox"/></td><td>JQuery Giriş</td><td>jQuery API açıklamalar</td><td>jQuery</td></tr>
<tr><td><input type="checkbox"/></td><td>Html Dom Nesne</td><td>Nesne Açıklamaları</td><td>JS</td></tr>
<tr><td><input type="checkbox"/></td><td>PHP ve Mysql</td><td>MySQL ile Veritabanı bağlantısı</td><td>PHP</td></tr>
</tbody>
</table>
</div>
Javascript kodları:
<script type="text/javascript">
$.fn.extend({
alterCheck:function(tablo){
if($(""+tablo+" input[type='checkbox']:first").is(":checked")){
return this.each(function(){
this.checked=true;
});
}else{
return this.each(function(){
this.checked=false;
});
}
}
});
$("#table1 input[type='checkbox']:first").click(function(){
$("#table1 input[type='checkbox']").alterCheck('#table1');
});
</script>
Açıklamalar:
- 3. "alterCheck" adlı eklentimizi tanımladık ($.fn.extend)
- 4. Gönderilen "#table1" id'li tablo içindeki ilk checkbox kutusunun işaretli olup olmadığı kontrol ediliyor,
- 6. Tablo içindeki tüm checkbox (Onay kutusu) seçili hale getiriliyor
- 10. Tablo içindeki tüm checkbox (Onay kutusu) üzerindeki seçim kaldırılıyor
- 16. "#table1" id'li tablo içindeki ilk checkbox tıklandığında, fonksiyonumuz "alterCheck()" eklentimizi çağırıyor, parametre olarak da tablonun "id" bilgisini gönderiyor (Bu şekilde bir parametre gönderdik ki, aynı sayfa içinde benzer başka bir tablo olduğunda karışıklık olmasın)
Kolay gelsin, görüşmek üzere...
