jQuery ile basit bir tab uygulaması yapıyoruz
jQuery çıktığı günden beri birçok uygulamada kullanıldı. Gerçekten çok güzel ve kullanımı basit bir kütüphane. Şimdi sizinle jQuery’yi kullanarak basit bir tab uygulaması yapacağız.
Not: Bu yazı sadece bir tab uygulamasının mantığını anlatmak içindir eğer bir tab uygulaması arıyorsanız bu yazıda yapılanın gelişmişine buradan ulaşabilirsiniz.
Öncelikle buradan jQuery’nin dosyasını indiriyoruz. Daha sonra yeni bir html sayfası açıp içine dahil ediyoruz.
<script type="text/javascript" src="jquery-latest.js"></script>
Burada kullanıcağımız 2 tane kontrol var bunlar herhangi bir div’i efektli açma ve kapama kontrolleridir.
$("#tab2").hide("slow");
tab2 yerine div’in id bilgisini yazıyoruz. “hide” div’i saklar ve “slow” ise bu işlemi yavaşça yapmasını belirtir. İstersek fast olarakda ayarlayabiliriz. Bu mantıktan yola çıkarak basit ve animasyonlu bir tab uygulaması geliştireceğiz.
<script type="text/javascript">
function kapat()
{
$("#tab2").hide("slow");
$("#tab3").hide("slow");
}
function tab1()
{
$("#tab1").show("slow");
$("#tab2").hide("slow");
$("#tab3").hide("slow");
}
function tab2()
{
$("#tab1").hide("slow");
$("#tab2").show("slow");
$("#tab3").hide("slow");
}
function tab3()
{
$("#tab1").hide("slow");
$("#tab2").hide("slow");
$("#tab3").show("slow");
}
</script>
kapa() isimli fonksiyonumuz ana fonksiyonumuzdur bu fonksiyonda tab2 ve tab3 ü kapattık. Hemen ardından 3 tab içinde farklı fonksiyonlar yazdık. tab1() fonksiyonunda tab1()’i açıp tab2 ile tab3′ü sakladık. tab2() fonksiyonunda tab2′yi açarken tab1 ve tab3′ü sakladık. Son olarak tab3() fonksiyonunda ise tab1 ve tab2 yi saklayıp tab3′ü açtık.
Şimdi diğer kodları görelim;
<body onload="kapat();"> <a onclick="tab1();">Tab1</a> | <a onclick="tab2();">Tab2</a> | <a onclick="tab3();">Tab3</a> <div id="tab1">Tab 1 denemesi</div> <div id="tab2">Tab 2 denemesi</div> <div id="tab3">Tab 3 denemesi</div> </body>
onload=”kapat();” yapmamızın nedeni başlangıçta kapat() fonksiyonunu çalıştırmak. onclick=”tab1();” kodu sayesinde Tab1 yazısına tıklanınca tab1() isimli fonksiyonu harekete geçirmesini istedik.
Son hali;
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">
function kapat()
{
$("#tab2").hide("slow");
$("#tab3").hide("slow");
}
function tab1()
{
$("#tab1").show("slow");
$("#tab2").hide("slow");
$("#tab3").hide("slow");
}
function tab2()
{
$("#tab1").hide("slow");
$("#tab2").show("slow");
$("#tab3").hide("slow");
}
function tab3()
{
$("#tab1").hide("slow");
$("#tab2").hide("slow");
$("#tab3").show("slow");
}
</script>
<body onload="kapat();"> <a onclick="tab1();">Tab1</a> | <a onclick="tab2();">Tab2</a> | <a onclick="tab3();">Tab3</a> <div id="tab1">Tab 1 denemesi</div> <div id="tab2">Tab 2 denemesi</div> <div id="tab3">Tab 3 denemesi</div> </body>
İşte hepsi bu kadar :) uygulamanın son halini buradan indirebilirsiniz.
[...] indirmek için Devamını okuyun.. Yazıyı [...]