Umut Keskin Yazdım, çizdim, paylaştım (:

jQuery ile Tab (sekme) yapımı

Merhaba. Bir sitede jQuery tab ile ilgili anlatım okudum. Kodlar çok karmaşık geldi ama benim Adressiz.net anasayfasında böyle birşeye ihtiyacım vardı. Sıvadım kolları, başladım yazmaya...

DEMO:  http://blog.adressiz.net/jquery-tab.html

Tab bildiğiniz üzere "sekme" demektir. Sekmeler, sayfa içerisindeki bir alanın, çok daha geniş içerikli olmasını sağlamak için kullanılır. Misal; 350px * 200px bir alana gelecek içerik çok uzun olamayacaktır ama sekmelerle bu alan zenginleştirilebilir.

Fazla uzatmadan işe koyulalım...

Önce -malum- jQuery kütüphanemizi sayfamıza çağırıyoruz

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

Ben Google üzerinden çağırdım siz istediğiniz gibi src=".." kısmını düzenleyin.

Gelelim jQuery kodlarımıza...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<script type="text/javascript">
$(document).ready(function(){ 
 
 $(".tetik").click(function(){ 
 
 var ustli=$(this).parents("li");
 
 $("#tab-control > ul > li").removeAttr("class");
 
 $(ustli).addClass("aktif");
 
 var hrefi=$(this).attr("href");
 
 $(".sekme").hide(); 
 
 $(hrefi).fadeIn('slow'); 
 
 return false //18
 
 }); 
 
 $(".sekme:first").fadeIn('slow'); 
 
}); 
 
</script>

Satır 2: Sayfa açılışında çalışmasını istedik

Satır 4: .tetik class'ı için tıklama olayını (click event) fonksiyona bağladık

Satır 6: ustli diye bir değişken tanımladık ve bunun .tetik sınıfına dahil olan <a> etiketimizin ÜST ETİKETİ olduğunu belirttik. <li><a>Tab Link</a></li> gibi bir dizede <li> yi seçmiş olduk.

Satır 8: "tab-control" kimlikli <div> elemanının altında bulunan <ul> elamanının da altında bulunan <li> elemanlarının css sınıflarını temizledik,sildik

Satır 10: Sadece tıklanmış olan linkin üstündeki <li> ye olarak stil verdik(ki az önce tümünün stilini temizlemiştik) .

Satır 12: tıklanan <a> elemanının href="#misal" şeklinde düşündüğümüzdeki #misal kısmını aldık. Yani url nin href attribute'ini.

Satır 14: Sekmelerin içerik alanını gizledik

Satır 16:Sadece yukarıdaki #misal href sahibine tahsis ettik içerik alanını ve fadeIn ile görünme efekti verdik.

Satır 18: Tab başlık linki tıklandığında url de http://www.adressiz.net/#misal gibi birşey çıkmasın diye tıklama etkisini burada false döndürdük

Satır 20:Tıklama işlemleri bitti

Satır 22: Bu da sayfa açılışında ilk sekmemizin efekt alması ve görünmesi için.

CSS Kodlarımız

<style type="text/css">
/* sekme: altta açılan kısım*/
a{ text-decoration:none}
#tab-control{ position:absolute; z-index:200; }
#tab-control ul{   margin: 0;padding: 0;list-style-type: none; display:block;  }
#tab-control ul li{display:inline; border-bottom:1px solid;  background:#CCCCCC; margin:0;  padding:2px 20px 0px 10px;   line-height:25px;  }
#tab-control ul li.aktif{ background:#fff;   border:1px solid #333333; border-bottom:none;  }
 
.sekme{display:none; position:absolute;   border:1px solid; width:600px; z-index:100;  margin-top:21px; padding:10px }
</style>

Sonrası html kodları

    <ul>
        <li class="aktif"><a href="#tab1" class="tetik">Birinci sekme</a></li>
        <li><a href="#tab2" class="tetik"> İkinci sekme</a></li>
        <li><a href="#tab3" class="tetik"> 3. numara</a></li>
 
 </ul>
</div>
 
<div id="tab1" class="sekme">ilk sekmenin içeriği</div>
<div id="tab2" class="sekme">İkinci sekme içeriği</div>
<div id="tab3" class="sekme"><img src="http://blog.adressiz.net/ff_logo.png" align="left" />Resimli üçüncü sekme içeriği<br /></div>

Hakkında Umut Keskin

Açıklama yok. Lütfen profilinizi tamamlayın.