akdoganTab jQuery Tab Eklentisi

Tarih: 06:50 Yazar: Unknown 0 yorum

Merhaba arkadaşlar kendim hazırlamış olduğum basit ve kullanımı oldukça kolay olan tab eklentisini sizlerle paylaşmak istiyorum.

Eklentiyi Github üzerinden İnceleyebilirsiniz.
Öncelikle eklentinin kullanımına bir bakalım.

KULLANIMI

Öncelikle jQuery Kütüphanesini Ve Eklenti Kütüphanesini ekleyelim.

[js]
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="akdoganTab.jquery.js"></script>

[/js]

Daha Sonra Eklentimizi Çalıştıralım.

[js]

<script type="text/javascript">
$(function(){
$("ul.tab").akdoganTab({
aktifIndis: 0, // default değer 0
tabDivAktif: "aktif", // default değer aktif
tabIcerik :$(".icerik"), // default değer $(".icerik")
tabEffect: "fade" // default değer null
});

});
</script>


[/js]
Html Yapısı:
[html]
<ul class="tab">
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<div class="icerik">Tab1 içeriği</div>
<div class="icerik">Tab2 içeriği</div>
<div class="icerik">Tab3 içeriği</div>

[/html]

Parametreler

• aktifIndis : Tab Eklentisinin açılışta hangi Tab içeriğinin görünür olacağını belirler.
  Default Değeri 0 dır. Yani 1. Tab Görünür Olacaktır.


• tabDivAktif : Aktif Olan Tab ın classıdır. default değeri "aktif" dir.


• tabIcerik : Tab İçeriklerine Ait Nesneyi Gösterir. Default Değeri " $(".icerik")" tir.


• tabEffect : Tab Geçişi Arasındaki Effekti Gösterir. Default değeri null dur. yani effekt yoktur.
  Alabileceği Değerler:
  
  
  
  • slide: slideDown effecti ile değişir.
  
  
  • fade: fadeIn effecti ile değişir.
  
  
  • slow: slow effecti ile değişir.
  
  
  • ease: easeIn effecti ile değişir.
  
  
  • null: effect olmadan değişir.
  
  
  
  

Demo | Download