pillinetwork hesabınızla giriş yapın.

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 tıklayabilirsiniz. Şimdi tab içeriğini ekleyeceğimiz bir ana tablo oluşturalım;

1
2
3

<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;

1
2

.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;

1
2

.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>

NOT: en sonda bulunan "< / html >" kodundaki boşluğu silmeyi unutmayın!"

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 BURADAN indirebilirsiniz.

Orjinal Makale: jQuery İle “Tab” Uygulaması Geliştirmek

/* Etiketler: plugin, ajax, jquery, tab, jquery tab, app, content, develop, gelistirmek, jquery tab content, jquery tab içerik, uygulamasi */

/* Metin METE yazdı. 22 Ocak 2010 12:13. 7 yorum var */

önceki yazı
3 Adımda jQuery Sexy DropDown Menu

sonraki yazı
ActionScript 3.0 İle Metinleri Rastgele Renklendirmek

Yorumlar

Evet güzel bir uygulama oldu tşk ederim

/* Coderler Aşkına ! */

/* miltiyades | 22 Ocak 2010 23:08 */

Bu güzel uygulama için teşekkürler :) İşime yaradı.

/* Şenol */

/* Shenol | 29 Ocak 2010 01:34 */

Çok güzel bi uygulama olmuş. Çokta kullanışlı.

/* tonique | 31 Ocak 2010 07:46 */

Güzel hoş ama IE gibi browserlarda desteklenmeyen metotlarla yapılmış böyle bir uygulamayı kullanmak hiç mantıklı değil. İnsanları da FF Chrome kullanmaya zorlayamayacağınıza göre artık paylaşımlarıda multi-browser destekli yapmaya çalışın bence. Örn. bu uygulamada köşe yuvarlatma konusu IE de çalışmıyor hatta bu uygulamayı denemek istedim sayfa komple IE de açılmaz hale geldi bembeyaz boş sayfa geliyor. Köşe yuvarlatma üzerinede DDRound gibi js destekli uygulamalar mevcut.

/* NIREUS | 04 Şubat 2010 21:38 */

@NIREUS; bilmem farkındamısın yada direkt demo'ya bakıpmı konuştun bilmiyorum ama verdiğim kodlarda zaten ben durumu belirttim. ÖRN;

.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!!!..*/ }

ayrıca ben sadece yolunu gösterdim bu çalışmada! yaratıcılık ve çaba geliştirmeyi yapacak kişiye kalmıştır.

/* http://www.m2-stil.com (Kişisel Site) http://www.e-diyabet.com (Diyabet Sitesi Projesi ~ Yakında) */

/* Metin METE | 05 Şubat 2010 12:34 */

merhaba dostum güzel bir çalışma olmuş. şu border radius olayı ile ilgili birşey söylemek istiyorum. youtube google gibi dünya devleri bile border radius işlemi için arkadaşın yazdığı kodları kullanıyor. ie kullanıcıları da düz görsünler diyor.

söylemek istediğim bir başka şey ise tab değiştirme işlemini bir function olarak yazıp, span lara tıkladığımız da bu fonksiyonu çağırabilirdik daha da güzel olurdu.

/* Client Side Web Developer XHTML // CSS // XML // XSLT // Javascript // JQuery // Prototype // EXT JS */

/* diddyob | 18 Şubat 2010 23:05 */

hee takibimdesin sayın mete :)
hoş çalışmaların var geçen incelemiştim vb için birtane yapmışssın...gayet hoştu..

/* Jason Junior | 01 Mayıs 2010 21:57 */

pillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

İlgili Yazılar

Bu Yazıyı Tutanlar

Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

Bu siteye ilan vermek 7ytl/gün'den başlayan fiyatlarla

son yorumlar

devamı »

arama

çok tutulan yazılar

T.C. Kimlik No Algoritması ⁴⁸
friendfeed api kullanarak php ile uygulama geliştirmek ²²
PHP ile otomatik thumbnail oluşturun ²²
CSS'de Arkaplan : Bilmeniz Gereken Her Şey ¹⁸
Whois Domain Sorgulama - Tüm dillerde ¹⁵
Php - Dil Sistemi ¹⁵
formDogrula (fdo) sınıfı ile formları kolayca doğrulayın ¹⁴
Php ve Solr kullanarak yüksek performanslı metin aramaları ¹⁴
Daha iyi yazılım geliştiricisi olmak için ipucları ¹³
Web önyüzü nasıl olmalı? ¹²

hepsi »

pillinetwork

bilgi | üyelik ve kullanım şartları | gizlilik sözleşmesi | iletişim | rss:xml
Bu site nokta.com ve pilli.com ortak ürünüdür. Tüm hakları saklıdır. İçerikten yazarları sorumludur. Yazarın adı bildirilerek, ve yazıya link verilerek bir paragrafı aşmayacak şekilde alıntı yapılabilir. Herhangi bir yazının izinsiz tamamen kopyalanması durumunda hukuki işlem yapılacaktır. © 2008 - 2010

pilli projeleri: pilli.com: kolektif bağımsız içerik | sosyomat.com: arkadaşını etiketle | put.io: online cloud storage

kodaman.org

jQuery İle "Tab" Uygulaması Geliştirmek

Yorumlar

İlgili Yazılar

Bu Yazıyı Tutanlar

Bu site

pilliilan

son yorumlar

arama

çok tutulan yazılar

pillinetwork

zamazing.org

3ayak.org

hafif.org

bildirgec.org

22dakika.org

torpilli.com

yenimecra.org

sinepil.org

10marifet.org

ucandaire.org