Jquery ile tab uygulaması nasıl yapılır?
Bu dersde size özellikle bloglarda, haber sitelerinde ve diğer bir çok sitede kullanılan bir uygulama olan tab (sekme) uygulamasını nasıl yapabiliriz, bunu öğreneceğiz. Öncelikle, uygulamanın esnek olmasını her zaman sevmişimdir yani yaptığımız uygulamanın HTML kodunda tabla ilgili fazla teknik bilgi saklamak istemiyorum. Rahat düzenlensin, işte bu sebepten kodumuz birazcık daha zorlaşıyor.
HTML kodlarımızı yazalım:
Standart HTML giriş betiğimi yazıyorum. Jquery’nin en son sürümünü yüklüyoruz ve tabın iskeletini oluşturup lipsum içerik giriyoruz.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>AliGorkem Tooltip Demo</title> <!--Sayfaya jquery ekliyoruz--> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> <!--javascript kodu--> </script> <style> <!--css kodları--> </style> </head> <body> <div class="kapsayici"> <div class="sekme"> <ul class="sekmeler"> <li><a href="#">Son Konular</a></li> <li><a href="#">Popüler Konular</a></li> <li><a href="#">Çok Okunanlar</a></li> </ul> <div class="icerikler"> <ul class="tabicerik"> <li><a href="#">Phasellus porta, in porta risus sagittis odio.</a></li> <li><a href="#">Scelerisque mauris diam integer cras nunc.</a></li> <li><a href="#">Magna. Turpis in enim adipiscing, lectus.</a></li> <li><a href="#">Nec cras dolor purus dictumst vel.</a></li> <li><a href="#">Egestas pulvinar nec, nascetur cras integer.</a></li> <li><a href="#">Egestas pulvinar nec, nascetur cras integer.</a></li> <li><a href="#">Egestas pulvinar nec, nascetur cras integer.</a></li> </ul> <ul class="tabicerik"> <li><a href="#">Elit egestas, nec enim, pulvinar porttitor.</a></li> <li><a href="#">Montes. Aliquam. Adipiscing facilisis placerat ac.</a></li> <li><a href="#">Aliquam amet tincidunt mauris scelerisque, a.</a></li> <li><a href="#">Elementum pid porttitor, magna dis cursus.</a></li> <li><a href="#">Platea purus! Eu ultricies tincidunt rhoncus.</a></li> </ul> <ul class="tabicerik"> <li><a href="#">Platea. Non velit, odio risus, urna.</a></li> <li><a href="#">Aliquet eros facilisis etiam arcu egestas.</a></li> <li><a href="#">Cras non sed amet scelerisque velit.</a></li> <li><a href="#">Ultrices augue, urna, a scelerisque lectus.</a></li> <li><a href="#">Ultrices augue, urna, a scelerisque lectus.</a></li> <li><a href="#">In massa pid lectus! Augue platea.</a></li> </ul> </div> </div> </div> </body> </html>
CSS kodlarımızı yazalım:
Sekmelerin tümünü “display: none;” ile gizledik. Jquery kodumuz ile istediğimizi göstereceğiz. Sekmelerin linklerinin bulunduğu listede kapsamama sorununu çözmek için kısa çözüm olan overflow: hidden; değeri verdik ve bu sorunu da halletik.
.icerikler {
background: #f0f0f0;
padding: 10px 20px;
}
.tabicerik {
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.tabicerik a {
display: block;
color: #404040;
text-decoration: none;
padding: 4px 0;
border-bottom: 1px dotted #c8c8c8;
}
.tabicerik a:hover {
color: #57b6ea;
}
.sekmeler {
list-style: none;
padding: 0;
margin: 0;
overflow: hidden;
}
.sekmeler li {
float: left;
}
.sekmeler li a {
display: block;
padding: 5px 8px;
margin-right: 10px;
text-decoration: none;
color: #2c2e3b;
background: #828282;
font: 13px/100% arial;
}
.sekmeler li.aktif a{
background: #f0f0f0;
color: #57b6ea;
}
Jquery kodumuzu yazalım:
Şimdi İşin esprisine geldik. Bu yazıda kodların yanına açıklamaları yazdım böylece daha kolay ve anlaşılır oldu.
$(document).ready(function(){ /*jquery'i başlatıyoruz*/
var sekmeler = $("ul.sekmeler > li"); /* Üst kısımdaki sekme başlıklarını seçiyoruz.*/
var icerikler = $("div.icerikler"); /*iceriklerin bulunduğu bölümü seçiyoruz.*/
var icerik = $("ul.tabicerik"); /*içeriği seçiyoruz*/
var gecmistab = 0; /*bu sonraki kısımda kullanacağımız bir değişken*/
icerik.first().show(); /*ilk sekmedeki içeriği gösteriyoruz.*/
sekmeler.first().addClass("aktif"); /*ilk sekme başlığını aktif yapıyoruz*/
sekmeler.live("click",function() { /*Sekme başlığına tıkladığımızda çalışacak fonksiyonu tanımlıyoruz*/
icerikler.stop(true, true); /*eğer icerikler kısımı bir animasyon halinde iken tıklandıysa bu işlemi hemen tamamlatıyoruz*/
var index = sekmeler.index(this); /*tıkladığımız sekmenin sırasını index değişkenine atıyoruz*/
var icerikHeight = icerik.eq(index).height(); /*index değişkenindeki sıra ile aynı sıradaki içeriğin yüksekliğini alıyoruz.*/
if(index != gecmistab) { /*index değişkeninde aktif olan tabın sırası var. Yeni tıkladığımız tab aslında eskiden aktif olan tab mı? kontrol ediyoruz.*/
sekmeler.removeClass("aktif"); /*önceden aktif olan tab başlığının aktifliğini kaldırıyoruz*/
gecmistab = index; /*gecmis tab"a şu anda aktif lan tabın sırasını yüklüyoruz.*/
icerik.fadeOut(200, function(){ /*şu anda aktif olan içerik kısımını fadeOut ile görünmez yapıyoruz ve bu işlem bittiğinde bir fonksiyon çağırıyoruz.*/
icerikler.animate({ /*icerikleri saklayan alan için bir animasyon oluşturuyoruz.*/
height: icerikHeight /*yeni aktif olan içeriğin yüsekliğini bu değişkene ayarlıyoruz.*/
}, 300,function(){ /*bu animasyon bittiğinde yeni bir fonksiyon çağırıyoruz.*/
icerik.eq(index).fadeIn(200); /*yeni aktif olan içeriği görünür hale getiriyoruz.*/
sekmeler.eq(index).addClass("aktif"); /*yeni aktif olan sekmenin başlığını aktif hale getiriyoruz.*/
});
});
}
return false;
});
});
Kodları satır satır açıkladım. Eburhan‘ın Jquery Derslerine biraz bakan, Jquery dökümanlarına biraz gezen birisi bile anlar.
Tab uygulamamızı tamamladık. Elimden geldiğince verimli olmaya çalışıyorum. Kusurlarımı yorumlarla düzeltmeniz bana yardımcı olur. Ben görmek istiyorum diyenler için Demo burada, ben yazmam diyenler için Dosyalar burada. Okuduğunuz için teşekkürler.
Yorumlar:
Düşüncelerinizi duymaya ihtiyacım var!
Zamanınızın çok küçük bir bölümünü ayırarak, bu form aracılığı ile yazı hakkındaki düşüncelerinizi paylaşabilirsiniz.
Jquery ile tab uygulaması nasıl yapılır?
Jquery ile tooltip yapalım
Yazıya Gelen Yorumlar