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.
Yazının ingilizcesi
Öncelikle buradan jQuery’nin dosyasını indiriyoruz. Daha sonra yeni bir html sayfası açıp içine dahil ediyoruz.
1.<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.
1.$("#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.
01.<script type="text/javascript">
02.function kapat()
03.{
04.$("#tab2").hide("slow");
05.$("#tab3").hide("slow");
06.}
07.function tab1()
08.{
09.$("#tab1").show("slow");
10.$("#tab2").hide("slow");
11.$("#tab3").hide("slow");
12.}
13.
14.function tab2()
15.{
16.$("#tab1").hide("slow");
17.$("#tab2").show("slow");
18.$("#tab3").hide("slow");
19.}
20.
21.function tab3()
22.{
23.$("#tab1").hide("slow");
24.$("#tab2").hide("slow");
25.$("#tab3").show("slow");
26.}
27.</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;
1.<body onload="kapat();">
2.
3.<a onclick="tab1();">Tab1</a> | <a onclick="tab2();">Tab2</a> | <a onclick="tab3();">Tab3</a>
4.<div id="tab1">Tab 1 denemesi</div>
5.<div id="tab2">Tab 2 denemesi</div>
6.<div id="tab3">Tab 3 denemesi</div>
7.
8.</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;
01.<script type="text/javascript" src="jquery-latest.js"></script>
02.<script type="text/javascript">
03.function kapat()
04.{
05.$("#tab2").hide("slow");
06.$("#tab3").hide("slow");
07.}
08.function tab1()
09.{
10.$("#tab1").show("slow");
11.$("#tab2").hide("slow");
12.$("#tab3").hide("slow");
13.}
14.
15.function tab2()
16.{
17.$("#tab1").hide("slow");
18.$("#tab2").show("slow");
19.$("#tab3").hide("slow");
20.}
21.
22.function tab3()
23.{
24.$("#tab1").hide("slow");
25.$("#tab2").hide("slow");
26.$("#tab3").show("slow");
27.}
28.</script>
1.<body onload="kapat();">
2.
3.<a onclick="tab1();">Tab1</a> | <a onclick="tab2();">Tab2</a> | <a onclick="tab3();">Tab3</a>
4.<div id="tab1">Tab 1 denemesi</div>
5.<div id="tab2">Tab 2 denemesi</div>
6.<div id="tab3">Tab 3 denemesi</div>
7.
8.</body>
İşte hepsi bu kadar 
uygulamanın son halini buradan indirebilirsiniz.
jQuery ile sayfaya refresh atmadan 3 satır kodla verileri ekrana bastırabilirsiniz. Yapıcağımız işlem çok basit önce jQuery’nin güzel özelliklerinden biri olan $.get() fonksiyonu ile verileri çağıracağız daha sonra ise window.setInterval() fonksiyonu ile bunları ekranda belli zaman aralıklarıyla refresh ediceğiz.