jQuery İle “Tab” Uygulaması Geliştirmek

Bu yazımızda, jQuery ile tab’lı uygulamalar nasıl geliştirebileceğinizi anlatmaya çalışacağım.

Öncelikle kodlamada kullanacabileceğiniz herhangi bir editör açarak, kodları yazmaya başlayarabiliriz! Bu iş için ben Dreamweaver programını kullandım. Yaptığımız çalışmanın çalışan örneği için BURAYI, efektsiz örneği için bu sayfada üst kısımdaki “yazı – yorum” çalışmasına bakabilirsiniz. Şimdi tab içeriğini ekleyeceğimiz bir ana tablo oluşturalım;

<div class="tab-tablo">
...
</div>

Stil kodları;

.tab-tablo { width:450px; margin:0 auto; }

NOT: ana tabloda kullanıcağımız stiller, değişkendir ve düzenlenebilir.

Şimdide sırasıyla bu tablomuzun içini doldurmaya başlıyoruz. İlk önce tablarımızı atayalım. Tablarımızıda ayrı bir tabloya alalımki n’olur, n’olmaz! Ekstra ayrı stil kullanabiliriz;

<div class="tab">
<span id="tab-1">Tab - 1</span>
<span id="tab-2">Tab - 2</span>
<span id="tab-3">Tab - 3</span>
</div>

Örnekteki tablara verdiğimiz stillerde bunlar;

.tab { margin-bottom:5px; }
.tab span { cursor:pointer; color:#999; background:#f2f2f2 url(tab-arkaplan.jpg) repeat-x left bottom; padding:5px 8px; font-weight:bold; font-size:16px; margin-left:10px; /*Buradan*/-moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }

Bu şekilde kullandığımızda aktif tab’da hiç bir belirginlik olmayacağından, aktif olmasını istediğimiz tab’ada bu stil’i verip;

span.tab-aktif { cursor:pointer; color:#666; background:#fff; padding:5px 8px; font-weight:bold; font-size:16px; margin-left:10px; /*Buradan*/-moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }

HTML kodlarımızı bu şekilde değiştiriyoruz;

<div class="tab">
<span id="tab-1" class="tab-aktif">Tab - 1</span>
<span id="tab-2">Tab - 2</span>
<span id="tab-3">Tab - 3</span>
</div>

Evet. Tablarımızı yerleştirmemiz bitti. Şimdide sıra bu tablar tıklanınca gösterilecek içeriklere geldi. İçerikleride yine ayrı bir tablo içine alıyoruz. Çünkü; hem stil açısından tek bir tablo kullanmış olucağız, hemde içerik geçişlerinde efekt sadece tablo içindeki içeriğe uygulanacak.

<div class="tab-icerik">
<div id="tab-1-icerik">Tab 1 İçerik</div>
<div id="tab-2-icerik">Tab 2 İçerik</div>
<div id="tab-3-icerik">Tab 3 İçerik</div>
</div>

Şimdi bu kodlardı koyup kullanmaya başlarsak! Tüm tablolarımız gözükücek. Sonuçda aktif olan tablo ve içerikleri dışında diğerlerinin saklanıp daha sonra bize “cii” yapması lazım. Onun içinde aktif olan tablo dışında diğer tablolara görünmez yapıyoruz. Bu paragrafda anlattıklarım ve üstteki kod için kullandığım stik kodlarıda bunlar;

.tab-icerik { padding:10px; background:#fff; /*Buradan*/-moz-box-shadow:1px 1px 5px #7e7e7e; -moz-border-radius:5px; -webkit-border-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
#tab-2-icerik, #tab-3-icerik { display:none; }

HTML kodların burada işi bitiyor. Şimdi jQuery kodlarımıza geçiyoruz. Kodlarıda uzunca anlatmayacağım, görünce zaten çok basit (basit ama çok kullanışlı) olduğunu sizde anlayacaksınız. Kodlardaki çalışma mantığını kısaca açıklayalım! Sayfa yüklenince en başda bizim üstde verdiğimiz css kodlarına göre gösterim yapıyorlar, daha sonrasında tablar tıklanınca jQuery kodlarımız devreye giriyor. jQuery kodlarımızda da tablarımıza teker tek görevler atıyoruz! 1. tab tıklanınca bu içerik gözüksün ve bu tab aktif stilini alsın, bunlarda gözükmesin. 2. tab tıklanınca bu içerik gözüksün ve bu tab aktif stilini alsın, bunlarda gözükmesin vs.vs.vs. Bu şekilde bir çok tab’da kullanabilirsiniz. Bu mantıkla, bu kodları yazdım;

$(document).ready(function() {
	$("span#tab-1").click(function(){
		$("span#tab-3").removeClass("tab-aktif");
		$("span#tab-2").removeClass("tab-aktif");
		$("span#tab-1").addClass("tab-aktif");
		$("div.#tab-3-icerik").slideUp();
		$("div.#tab-2-icerik").slideUp();
		$("div.#tab-1-icerik").slideDown();
		return false;
	});
	$("span#tab-2").click(function(){
		$("span#tab-3").removeClass("tab-aktif");
		$("span#tab-1").removeClass("tab-aktif");
		$("span#tab-2").addClass("tab-aktif");
		$("div.#tab-3-icerik").slideUp();
		$("div.#tab-1-icerik").slideUp();
		$("div.#tab-2-icerik").slideDown();
		return false;
	});
	$("span#tab-3").click(function(){
		$("span#tab-2").removeClass("tab-aktif");
		$("span#tab-1").removeClass("tab-aktif");
		$("span#tab-3").addClass("tab-aktif");
		$("div.#tab-2-icerik").slideUp();
		$("div.#tab-1-icerik").slideUp();
		$("div.#tab-3-icerik").slideDown();
		return false;
	});	
});

Şimdi tüm kod işimiz bitti. Sonuç olarak aşağıdaki kod topluluğu çıkardım;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery İle "Tab" Uygulaması Geliştirmek</title>
<style type="text/css">
body { margin:50px 0; background:#9cc url(arkaplan.png); font-family: “Trebuchet MS”, sans-serif; font-size:11px; }
.tab-tablo { width:450px; margin:0 auto; }
.tab { margin-bottom:5px; }
.tab span { cursor:pointer; color:#999; background:#f2f2f2 url(tab-arkaplan.jpg) repeat-x left bottom; padding:5px 8px; font-weight:bold; font-size:16px; margin-left:10px; /*Burdan*/-moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
span.tab-aktif { cursor:pointer; color:#666; background:#fff; padding:5px 8px; font-weight:bold; font-size:16px; margin-left:10px; -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; }
.tab-icerik { padding:10px; background:#fff; -moz-box-shadow:1px 1px 5px #7e7e7e; -moz-border-radius:5px; -webkit-border-radius:5px; }
#tab-2-icerik, #tab-3-icerik  { display:none; }
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("span#tab-1").click(function(){
		$("span#tab-3").removeClass("tab-aktif");
		$("span#tab-2").removeClass("tab-aktif");
		$("span#tab-1").addClass("tab-aktif");
		$("div.#tab-3-icerik").slideUp();
		$("div.#tab-2-icerik").slideUp();
		$("div.#tab-1-icerik").slideDown();
		return false;
	});
	$("span#tab-2").click(function(){
		$("span#tab-3").removeClass("tab-aktif");
		$("span#tab-1").removeClass("tab-aktif");
		$("span#tab-2").addClass("tab-aktif");
		$("div.#tab-3-icerik").slideUp();
		$("div.#tab-1-icerik").slideUp();
		$("div.#tab-2-icerik").slideDown();
		return false;
	});
	$("span#tab-3").click(function(){
		$("span#tab-2").removeClass("tab-aktif");
		$("span#tab-1").removeClass("tab-aktif");
		$("span#tab-3").addClass("tab-aktif");
		$("div.#tab-2-icerik").slideUp();
		$("div.#tab-1-icerik").slideUp();
		$("div.#tab-3-icerik").slideDown();
		return false;
	});	
});
</script>
</head>
<body>
<div class="tab-tablo">
<div class="tab">
<span id="tab-1" class="tab-aktif">Tab - 1</span>
<span id="tab-2">Tab - 2</span>
<span id="tab-3">Tab - 3</span>
</div>
<div class="tab">
<span id="tab-1">Tab - 1</span>
<span id="tab-2">Tab - 2</span>
<span id="tab-3">Tab - 3</span>
</div>
</div>
</body>
</html>

Bahsettiğim gibi! Mantığını kavrarsanız, benim yaptığım gibi 3 tabdan fazlasınıda ekleyebilirsiniz. Bu çalışmanın, çalışır örneğini aşağıdan indirebilirsiniz.

İsim / Soyisim

E-Posta Adresi

Web Sitesi

Yorum