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>
<ul>
<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 id="tab1">
1. tab içeriği
</div>
<div id="tab2">
2. tab içeriği
</div>
<div 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ı;
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
ogzckr 