MooTools ile Tab Örneği Yapalım

MooTools’a yeni yeni başladığımı birkaç önceki yazımda söylemiştim.. Bu yüzden sürekli örnekler yaparak pekiştirmeye çalışıyorum.. Ve genelde örnekleri basit tutarak anlaşılır kılıyorum.. jQuery’de onlarca kez örneğini yaptığım tab uygulamasını bir kezde mootools ile nasıl yapabileceğimizi anlatacağım bu makalede 🙂 Umarım mootools’a yeni başlayanlar için açıklayıcı oluyordur bu makaleler.MooTools’a yeni yeni başladığımı birkaç önceki yazımda söylemiştim.. Bu yüzden sürekli örnekler yaparak pekiştirmeye çalışıyorum.. Ve genelde örnekleri basit tutarak anlaşılır kılıyorum.. jQuery’de onlarca kez örneğini yaptığım tab uygulamasını bir kezde mootools ile nasıl yapabileceğimizi anlatacağım bu makalede 🙂 Umarım mootools’a yeni başlayanlar için açıklayıcı oluyordur bu makaleler.

Adım 1

İlk olarak her zaman ki gibi mootools kütüphanemizi aşağıdaki bağlantıdan indiriyoruz;
http://mootools.net/download

Adım 2

Gerekli dosyalarımızı oluşturuyoruz.
– index.html
– style.css
– custom.js
– mootools.js (kütüphane)

Adım 3

index.html‘i açalım.. Standart html etiketlerimizi girerek diğer dosyalarımız head içerisinde çağıralım.

<!DOCTYPE HTML>
<html lang="en-US">
<head>

	<meta charset="UTF-8">
	<title>MooTools Tab Örneği (DEMO)</title>
	
	<!-- style -->
	<link rel="stylesheet" href="style.css" />
	
	<!-- scripts -->
	<script type="text/javascript" src="mootools.js"></script>
	<script type="text/javascript" src="custom.js"></script>
	
</head>
<body>

</body>
</html>

Adım 4

Tab için kullanacağımız HTML yapısını oluşturalım;

<div class="tab">
	<ul class="tab_list">
		<li><a href="#tab1">1. Tab</a></li>
		<li><a href="#tab2">2. Tab</a></li>
		<li><a href="#tab3">3. Tab</a></li>
	</ul>
	<div class="tab_content" id="tab1">
	1. tab içeriği
	</div>
	<div class="tab_content" id="tab2">
	2. tab içeriği
	</div>
	<div class="tab_content" id="tab3">
	3. tab içeriği
	</div>
</div>

Biz burada idTab örneği yapacağımız için her tab içeriğininde id’si bulunmakta.. Ek olarak tab listesinde de a nesnelerinde href değeri olarak bu id’ler belirtilmiş.

Adım 5

Tab görünümü için basit bir CSS hazırlayalım;

* {
	padding: 0;
	margin: 0;
	list-style: none;
	border: 0;
	font-family: Arial;
	text-decoration: none
}

/*____ TAB _____*/
.tab {
	padding: 25px
}
.tab ul.tab_list {
	overflow: hidden;
	margin-bottom: 15px
}
.tab ul.tab_list li {
	float: left;
	margin-right: 10px
}
.tab ul.tab_list li a {
	display: block;
	padding: 10px 25px;
	border: 1px solid #ddd;
	border-top-color: #aaa;
	color: #111;
	border-radius: 2px;
	box-shadow: 0 2px 2px 0 #ddd inset
}
.tab ul.tab_list li a:hover {
	background-color: #f9f9f9
}
.tab ul.tab_list li.active a {
	background: #eee;
	box-shadow: none;
	border-color: #ccc
}
.tab .tab_content {
	border: 1px solid #ddd;
	border-top-color: #aaa;
	padding: 10px;
	font-size: 14px;
	line-height: 20px
}

Buraya kadar her şey tamam ise, şuan ki görüntü aşağıdaki gibi olmalı;

MooTools ile Tab Örneği Yapalım

Adım 6

custom.js dosyamızı açalım ve sayfamız hazır olduğunda bizde hazırız komutunu yazalım..

window.addEvent('domready', function(){
	/* .. */
});

Adım 7

Evet artık tab için gerekli kodları yazmaya başlayabiliriz.. Ben tab sınıfını döngüye sokacağım.. Böylece birden fazla tabı tek kodla kullanabileceğiz.. İlk olarak tüm tab sınıflı nesneleri $$ ile seçip each döngüsüne sokalım.

$$('.tab').each(function(elem, index){
	/* .. */
});

Adım 8

tab nesnesi içindeki tıklanacak tüm li nesnelerini ve tüm tab içerik nesnelerini getElements() ile seçip değişkenlere aktaralım. Burada bir hatırlatma yapmak gerekirse getElement() sadece bir nesne için getElements() ise tüm nesneler için kullanılıyor.. jQuery‘deki find() gibi düşünebilirsiniz 🙂

var tabLi = elem.getElements('ul.tab_list li'),
    tabContent = elem.getElements('.tab_content');

Adım 9

Sıra geldi ilk liste’ye active sınıfı ekleyip ilk tab içeriği hariç diğerlerini gizlemeye 🙂

tabLi.filter(':first-child').addClass('active');
tabContent.setStyle('display','none');
tabContent[0].setStyle('display','block');

jQuery‘de de filter()‘ı aynı mantıkta kullanıyoruz, burada da aynı mantıkta işliyor. tabContent[0] burada ilk tab içeriğini temsil ediyor.. Şöyleki; getElements() bize seçtiği nesneleri dizi olarak döndürdüğü için [0] ilk elemanı temsil ediyor.

Adım 10

Şimdide li’lere tıklama event’ını yazalım;

tabLi.addEvent('click', function(){
	/* .. */
});

İlk olarak yapmamız gereken şey a’nın içerisindeki href değerini almak olacak;

var idTab = this.getElement('a').get('href');

Daha sonra tüm li’lerin aktif sınıfını silelim;

tabLi.removeClass('active');

Tıklanana aktif sınıfını ekleyelim;

this.addClass('active');

Ve içeriklerin hepsini gizleyip id’si eşleşen içeriği gösterelim;

tabContent.setStyle('display','none').filter(idTab).setStyle('display','block');

Evet, gördüğünüz gibi çok basit bir şekilde tab uygulamasını hazırlamış olduk.

indexTab Örneği

Eğer idTab değilde indexTab örneği yapmak isterseniz.. Kodları şöyle değiştirmeniz yeterli;

window.addEvent('domready', function(){
	$$('.tab').each(function(elem, index){
		var tabLi = elem.getElements('ul.tab_list li'),
			tabContent = elem.getElements('.tab_content');
		tabLi.filter(':first-child').addClass('active');
		tabContent.setStyle('display','none');
		tabContent[0].setStyle('display','block');
		tabLi.addEvent('click', function(event){
			var index = tabLi.indexOf(this); /* tıklanan li'nin index değeri */
			tabLi.removeClass('active');
			this.addClass('active');
			tabContent.setStyle('display','none');
			tabContent[index].setStyle('display','block'); /* index'inci içeriği göster */
			event.preventDefault();
		});
	});
});

Demolar

idTab Örneği;
http://www.erbilen.net/demo/mootools-idTab/index.html

indexTab Örneği;
http://www.erbilen.net/demo/mootools-indexTab/index.html

İndir

http://yadi.sk/d/8a5elr7y77Nns

Yayınlayan

Tayfun Erbilen

2009’dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“MooTools ile Tab Örneği Yapalım” için bir yorum

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir