mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Tab Uygulaması Hazırlama
Bu yazımda çok yaygın bir şekilde kullanılan tab uygulamasını Jquery ile nasıl yapabileceğimizi anlatmaya çalışacağım. Aslında daha önce Jquery ile hazır olarak kullanılan uygulamayı burada paylaşmıştım. Ancak zamanla Jquery üzerine olan ilgim arttı ve neredeyse gördüğüm tüm uygulamları kendim yapmaya başladım. Şimdi ise tab alan uygulamasını hazırladım ve sizlerle paylaşıyorum. (Buradan görebilirsiniz.) Daha önce de belirttiğim gibi hazır olarak birçok uygulama mevcut. Ancak bunları bizlerde yapabilmeliyiz. Bu bakımdan bu türlü uygulamaları kendim yapmaya ve projelerimde kullanmaya çalışıyorum. Böylece yaptığım işlere çok daha iyi bir biçimde hakim olabiliyorum. Şimdi bu uygulamayı nasıl yapacağımıza bakalım.

Öncelikle yaptığım bu uygulamanın da belli bir html yapısı var ve aşağıdaki gibi olmalı.

  <div id="tab">
    <div id="tab_bas">
      <span>Tab 1</span>
      <span>Tab 2</span>
      <span>Tab 3</span>
      <span>Tab 4</span>
      <span>Tab 5</span>
      <span>Tab 6</span>
    </div>
    <div id="tab_kutular">
      <div>Tab 1 Bölümü</div>
      <div>Tab 2 Bölümü</div>
      <div>Tab 3 Bölümü</div>
      <div>Tab 4 Bölümü</div>
      <div>Tab 5 Bölümü</div>
      <div>Tab 6 Bölümü</div>
    </div>
  </div>

Yukarıda html yapıya sahip alanı tab kontrol alanı yapmak için gereken Jquery kodlarımız şöyle olmalı.

  <script type="text/javascript">
    $(document).ready(function(){
      var aktif = 0;
      $("#tab_kutular div:eq("+aktif+")").show();
      tab_renklendir(0);
 
      $("#tab_bas span").click(function(){
        var index = $("#tab_bas span").index(this);
        if(aktif != index)
        {
          $("#tab_kutular div:eq("+aktif+")").hide();
          aktif = index;
          tab_renklendir(aktif);
          $("#tab_kutular div:eq("+aktif+")").fadeIn("normal");
        }
      });
    });
    function tab_renklendir(index)
    {
      $("#tab_bas span").css("background-color","#147").css("color","#fff");
      $("#tab_bas span:eq("+index+")").css("background-color","#fff").css("color","#147");
    }
  </script>

Kodlamalarımız böyle. Jquery kodlarımızda atadğımız değerler css kodları ile belirttiğimiz özellikler. Bu bakımdan css dosyamıza göre Jquery kodlarımızda belirttiğimiz özellikleri değiştirmeliyiz. Ayrıca css dosyamızda değişiklikler yaparak istediğimiz tarzda tab alanlar hazırlayabiliriz.

Örnek uygulamayı buradan görebilir, buradan da indirebilirsiniz.

En kısa zamanda sitemin sağ bölümünü tekrardan tasarlayacağım. Bu alanı yapmak için kendi Jquery kodlarımı kullanarak accordion ve tab alanlar hazırlayacağım. Umarım birkaç gün içinde de bu değişikliği de yaparım ve ziyaretçilere daha güzel, tamamen kendi kodlarımdan oluşan  bir blog sunarım.

İyi Çalışmalar!
Mehmet Duran 30 Ocak Cuma 2009 6 28286 4,9
Javascript Web Tasarım jQuery Jquery İndir Site Araçları Html Blog Benden
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar C Sharp 3.0 in a Nutshell (E-Book) Asp.net 2.0 - Selçuk Özdemir Asp.net ile Veritabanında Tutulan Verilerin Özetini Çekme Oracle 10g'de Kullanıcı Oluşturma ve Yetkilendirme Yine Bir Dönem Sonu
Yorumlar
Yorum Yaz
RSS Yorum Takibi
burak tankut 30 Ocak Cuma 2009 09:10 #1
Hocam yine coşturdunuz :) anket bekliyoruz ...
programci dostlarım elleriniz gözlerinize sağlık 06 Şubat Cuma 2009 14:37 #2
BENİM GİBİ YENİ BAŞLAYANLARIN UMUTLARINI YEŞERTENLERSİNİZ FARKLI ÖRNEKLERİ BEKLİYOURZ VE BİZLERDE YAPIP PAYLAŞMALIYIZ A.E.O
Özgür S. 03 Temmuz Cuma 2009 17:30 #3
Merhaba. Şöyle bi düşüncem var. Mesela, ben 6 sekme kullanacağım. 6sına da Datalist yerleştirmek durumundayım. Ee sayfanın performansında çok kötü bir etkisi olmaz mı bunun? Datalist yüklenmesini, her ilgili sekme tıklanışında başlayacak şekilde ayarlasak? Bu nasıl mümkün olabilir? jQuery ve AJAX mantığını merak ediyorum tabii ki...
Mehmet Duran 03 Temmuz Cuma 2009 22:47 #4
Merhaba. Dediğin gibi bir işlem için öncelikle 6 sekmeli bölümü tek bir datalist ile yapmak mümkün mü ona bakmak lazım. Eğer böyle birşey söz konusu ise performans için tek data kontrol kullanman daha mantıklı. Ancak mecburen farklı kontrol kullancaksan yapacak birşey yok. Jquery ve Ajax ile dediğini yapabilirsin. Ancak server yine işlemler yapmak zorunda. Yani server için performans değişimi olur mu bilinmez ama kullanıcı için sayfaların açılma hızı artacaktır.
mehmet 20 Ekim Çarşamba 2010 15:40 #5
koyduğunuz örnekle verdiğiniz kodlar birbiri ile aynı olsun .
Mehmet Duran 22 Ekim Cuma 2010 08:54 #6
@mehmet, hangi örneği incelediğine ve indirdiğine bir daha bakmanı öneririm. Zira ben bir fark göremedim.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Gençken bilgi ağacını dikmesek, yaşlandığımız zaman gölgesine sığınacak bir yerimiz olmayacaktır.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009