Javascript : Katman gizlemek / göstermek
Javascript browser tarafında kullanıcıya bir takım etkileşimler yaptırmak için kullanılan bir teknoloji. Kullanıcının form göndermeden formdaki hataları görmesini, o an ekranda olanları kaldırmayı ya da o an ekran olmayan birşeyi ekrana sunucuya bağlanmadan koymayı ve bunlar gibi pek çok etkileşimi sağlayabiliyor.
CSS tabanlı siteler bildiğiniz gibi web 2.0 için neredeyse şart oldular ki çok hit alan sistemlerde banttan kurtardığı gibi pek çok ayrı browserda hemen hemen aynı görüntüyü verdikleri için, sağlıklı çalıştıkları için oldukça avantajlılar. Bu sitelerin en önemli unsurlarından birisi ise DIV etiketleri.
İşte bu yazıda javascript ile DIV katmanların nasıl gizlenip gösterilebileceğini anlatağım. Bir kaç önemli detay var ki bunları bilmezseniz sizde benim bugün yaptığım gibi uzun uzun hata arayabilirsiniz.
<html>
<head>
<title>Katman gizlemek / göstermek</title>
</head>
<body>
<script language=”JavaScript” type=”text/JavaScript”>
<!–
function hide(divID){
document.getElementById(divID).style.display=’none’;
}
function show(divID){
document.getElementById(divID).style.display=’block’;
}
function myToggle(secilen)
{
for(i=0;i<=100;i++) {
s=”+i+”;
if((document.getElementById(s))) {
if((document.getElementById(s)!=document.getElementById(secilen)))
hide(s);
}
}
tiv=document.getElementById(secilen);
tiv.style.display=(tiv.style.display!=’none’ ? ‘none’:”);
}
–>
</script>
<a onClick=myToggle(’1′);>Katman1</a>|
<a onClick=myToggle(’2′);>Katman2</a>|
<a onClick=myToggle(’3′);>Katman3</a>
<div id=”1″ style=”display:block”>Katman 1 içeriğimiz</div>
<div id=”2″ style=”display:block”>Katman 2 içeriğimiz</div>
<div id=”3″ style=”display:block”>Katman 3 içeriğimiz</div>
<div id=”herhangi_katman”style=”display:block”>Katman 3 içeriğimiz</div>
</body>
</html>
Tümdengelim metodunun en azından kod öğrenmede daha çok işe yaradığını düşünen bir eğitimci olarak kodun tamamını verip incelemeyi seçtim. Birlikte inceleyelim.
İlk iki javascript fonksiyonu hide(); ve show(); fonksiyonları document.getElementById ile kendisine gönderilen DIV id isminden yola çıkıp style özelliklerinden display özelliğini değiştirmek için kullanılıyor. Zaten oldukça basitler.
Üçüncü fonksiyon myToggle(); ise aslında en önemli işi yapıyor. İlk olarak for döngüsünde ekrandaki 100 div için ( tabi bunlar sayılarla isimlendirilmişlerse ) display özelliğini hide(); ile değiştiriyor. Yani hepsini gizliyor. Bunu yaparken dönderdiği “i” değişkenini document.getElementById içinde kullanarak o sayıya ait DIV olup olmadığına bakıyor. Eğer varsa işlem yapıyor. Aksi takdir döngüde tüm fonksiyon durur ve çalışmazdı.
Daha sonra açılması ya da kapatılması istenen DIV’e ait olan id sayısını secilen değişkeninden alıp açıksa kapalı, kapalıysa açık yapıyor. Bu sayede ekranda istendiği sayıda ( 1 ile 100 arasında bu örnekte ) DIV açılıp kapanabiliyor ve ekranda görünen alandan bazı durumlarda tasarruf sağlanabiliyor.
Ayrıca bu örneği menü yapımında da kullanaileceğinizi veya myToggle fonksiyonununa XAJAX ile oluşturulmuş bir AJAX fonksiyonu ekleyip hangi tıklamanın yapıldığını veritabanına kaydedebileceğinizi, hatta bir kaç argüman daha gönderip daha fazla iş yapabileceğinizi hatırlatırım.
Sağlıkcakla kalın…
başarılı, açıklayıcı bir yazı olmuş.