Etiketler: jquerytab uygulaması

      

     Bu yazımda size aktaracağım konu bir tab uygulaması olacak. Tab mantığını açıklamak gerekirse, web tasarımdaki klasik menü yapımı ile kısmen benzer diyebiliriz ancak aralarındaki en önemli farka yönlendirmenin sayfalar arası değilde; tüm içeriğin aynı sayfada gizlenip sadece kullanıcı tarafından tıklanılan içeriğin gösterilmesi diyebiliriz. Bu yapıyı şu ana kadar hiç kullanmaya gerek duymadım ama kullanmamış olmam kullanmayacağım anlamına gelmiyor elbet bir gün işime yarar. Özellikle mobil tasarım yaparken başvurulabilir bir yapıdır.

 

     Bizim tab uygulaması da menüde tıklanılan elemanın index değeri ile aynı olan divimizi gösterip geri kalan divlerimizi gizleyerek çalışmaktadır.

Öncelikle html yapımızı kurmakla başlayalım kod satırında da gördüğünüz gibi üçlü bir yapı kurdum.

 

<ul>
	<li>1.Tab</li>
	<li>2.Tab</li>
	<li>3.Tab</li>
</ul>
<div class="tab">Burası 1. tab içeriğidir.</div>
<div class="tab">Burası 2. tab içeriğidir.</div>
<div class="tab">Burası 3. tab içeriğidir.</div>

 

Ardından gözüme hoş gelecek şekilde css ile değişikliklerde bulundum.

 

*{margin: 0;padding: 0;border: 0;}
ul{list-style: none;position: relative;height: 42px;margin-left: 41.5%;}
ul li{float: left;text-decoration: none;background-color: #555;padding: 12px 20px 12px 20px;display: block;color: aliceblue;border-right: 1px solid aliceblue;}
ul li:hover{background-color: #787878;transition-duration: 0.4s;cursor: pointer;}
.tab{text-align: center;padding: 25px;position: relative;border: 1px solid #555;margin-top: 5px;}
.aktif{background-color: blueviolet;transition-duration: 0.4s;border-radius: 20px;}

 

Son olarak asıl hamleyi yapıyoruz jquery ile tab uygulamamızı yazıyoruz.

 

$("div").hide();
$("div").first().show(800);
$("ul li").first().addClass("aktif");
$("ul li").click(function(){
	var index = $(this).index();
	$("ul li").removeClass("aktif");
	$(this).addClass("aktif");
	$("div").hide();
	$("div").eq(index).show(800);
});

 

Jquery kısmında ise yaptıklarımızı şu şekilde sıralayabiliriz:

1. Tüm divler'imizi gizleyip sadece ilk div'imizi görünür hale getiriyoruz ve ilk li'mize aktif class'ımızı atıyoruz.
2. Menümüzdeki herhangi bir li'ye tıklanıldığında o li'nin index değerini bir değişkene atıyoruz.
3. Tüm liler'den aktif class'ını kaldırıyoruz "this" anahtar sözcüğü ile tıklanılan li'ye aktif class'ımızı tekrar atıyoruz.
4. Divler'in tamamını gizleyip tıklanılan li'nin index değerindeki div'i gösteriyoruz.

 

     Basit bir tab uygulamasını ben bu şekilde yaptım ve sizlerle paylaşmak istedim.Detay bilgi vermeden direkt kodların bulunduğu bir yazı oldu ancak umarım yararlı olmuştur.