Basit jQuery Uygulamaları Yazıyoruz : Tab Menü Yapımı
Merhaba Arkadaşlar,
Eğitim serimizin bu konusunda jQuery ile Tab Menü yapımını göreceğiz. İnternet üzerinde yapacağınız kısa bir araştırma sonucunda bir çok yöntem ile yapılmış halini bulabileceğiniz bu sistemi ben bugün ” eq selector ” ile anlatacağım. Çalışma mantığından kısaca bahsetmek gerekirse ” eq ” ile yapacağımız işlemler sonucunda Tab’ lerin başlıklarının bulunduğu alanlardan birincisine tıkladığımızda Tab içeriklerinin bulunduğu div’ ler içerisinden de birincisi açılacaktır. Aynı şekilde de ikinci ve üçüncü olarak devam edecektir. Herhangi bir class veya id’ sine göre seçimler yaptırmayacağımız için içeriklerin bulunduğu div’ lerin sıralanmasında bir değişim yaptığımızda haliyle yanlış içeriklerin görüntülenmesi gibi bir sorunla karşılacağız. Bu nedenle başlıkların ve içeriklerin sıralanmasına dikkat etmemiz gerekmektedir. İşlemlerimize başlayarak hem sorunların yaşanacağı alanları hem de Tab menü yapımını iyi bir biçimde kavrayalım.
Bir klasör oluşturalım ve içerisine ” index.html ” adında da bir sayfa oluşturalım. Daha sonra jquery.com içerisinden son sürüm jQuery kütüphanesini oluşturduğumuz klasör içerisine kaydedelim. Artık kod yazmaya başlayabiliriz. HTML sayfamızı açalım ve ilk olarak klasik HTML kodlarımızı yazalım. Ardından da indirdiğimiz jQuery kütüphanesini sayfamıza dahil edelim.
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org</title>
<script src="jquery-1.9.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
</body>
</html>
Şimdi id’ si ” tab ” olan bir ana div açıyoruz ve içerisine başlık alanları için listeleme , içerik alanları için ise Class ‘ ları aynı olacak ayrı ayrı div’ ler oluşturuyoruz. Kodların görünümü şu şekilde olacaktır :
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org</title>
<script src="jquery-1.9.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="tab">
<ul class="tabHeader">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="tabContent">1.İçerik</div>
<div class="tabContent">2.İçerik</div>
<div class="tabContent">3.İçerik</div>
</div>
</body>
</html>
Bu görünüm ile sayfayı çalıştırdığımızda çok kötü ve hiç bir işe yaramayan bir görünüm ile karşılaşacağız. CSS ile sayfa görünümümüzü şekillendirmemiz ve bunun ardından bir düzene sokarak makalenin son maddesi olan jQuery’ e geçmemiz gerekmektedir.
etiketleri arasında tüm başlık ve içerik alanlarının konumlandırma ve renk tonlarını ayarlıyoruz.
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org</title>
<script src="jquery-1.9.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#tab{font-size: 12px;}
#tab .tabHeader{margin: 0; padding: 0; height: 30px; border: 1px solid #ccc; background: #f0f0f0; list-style: none; width: 400px;}
#tab .tabHeader li{float: left;}
#tab .tabHeader li.active{background: #ddd;;}
#tab .tabHeader li.active a{color: #fff;}
#tab .tabHeader li a{line-height: 30px; padding: 0 15px; display: block; text-decoration: none; color: #000; border-right: 1px dotted #900;}
.tabContent{padding: 10px; border: 1px solid #ccc; width: 380px; background: #ddd; color: #fff;}
</style>
</head>
<body>
<div id="tab">
<ul class="tabHeader">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="tabContent">1.İçerik</div>
<div class="tabContent">2.İçerik</div>
<div class="tabContent">3.İçerik</div>
</div>
</body>
</html>
Sayfamızı şimdi çalıştırıp kontrol ettiğimizde bir önceki haline göre düzgün ve nerede ne olabileceği anlaşılabilen bir görünüm ile karşılaşacağız. Css içerisinde verdiğimiz ” active ” class’ları seçili olan tab’ ler için belirleyici bir nitelik oluşturacaktır.
Şu an ki görünümde 3 Tab içeriğinin de açık bir biçimde alt alta sıralandığını göreceğiz. Bunları yazacağımız jQuery kodları ile ilk açılışta yalnızca birincisinin ve daha sonra da hangi başlığa tıklanırsa onun içeriğinin görüneceği biçimde düzenleyeceğiz. Kodlarımızın son ve çalışır biçimde ki hali şu şekilde olacaktır :
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org</title>
<script src="jquery-1.9.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
$(document).ready(function(){
$(".tabContent").hide();
$(".tabContent:first").show();
$("#tab ul li:first").addClass("active");
$("#tab ul li").click(function(){
$("#tab ul li").removeClass("active");
$(this).addClass("active");
$(".tabContent").hide();
var tab = $(this).index();
$(".tabContent:eq("+tab+")").fadeIn();
});
});
</script>
<style>
#tab{font: 12px tahoma;}
#tab .tabHeader{margin: 0; padding: 0; height: 30px; border: 1px solid #ccc; background: #f0f0f0; list-style: none; width: 400px;}
#tab .tabHeader li{float: left;}
#tab .tabHeader li.active{background: #ddd;;}
#tab .tabHeader li.active a{color: #fff;}
#tab .tabHeader li a{line-height: 30px; padding: 0 15px; display: block; text-decoration: none; color: #000; border-right: 1px dotted #900;}
.tabContent{padding: 10px; border: 1px solid #ccc; width: 380px; background: #ddd; color: #fff;}
</style>
</head>
<body>
<div id="tab">
<ul class="tabHeader">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="tabContent">1.İçerik</div>
<div class="tabContent">2.İçerik</div>
<div class="tabContent">3.İçerik</div>
</div>
</body>
</html>
Tab alanlarının ekrana geliş biçimlerinde ” fadeIn ” metodunu kullanarak küçük bir animasyon görünümü vermiş olduk ve makalemizi de burada tamamladık.
Hepinize iyi çalışmalar 🙂 ..
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 39 No ‘lu Maddeden İndirebilirsiniz..
Tüm Yorumlar