JQuery ile Tab Menü

 bcakir
 19 Ekim 2011

Merhaba arkadaşlar yeni bir uygulama yazısında tekrar buluştuk. Bu yazımda JQuery ile menü şeklinde içerik gösterimi yapmayı anlatacağım. Kısaca uygulamamızı açıklarsam, butona tıklanınca div içerisindeki içerik değişecek ve tıklanan buton ile ilgili içerik gelecek. Uygulamamızda herhangi bir veritabanı bağlantısı olmayacak. Sizin sadece yazı ve buton içeriklerini kendinize göre düzenlemeniz uygulamayı çok rahatlıkla kullanmanız için yeterli. Eğer sitilini değiştirmek isterseniz de css kodlarında küçük değişiklikler yapmanız yeterli olacak. Uygulamamızın açıklamasını anlattığıma göre geliştirmeye başlayabiliriz.

<!DOCTYPE html>
<html>
<head>
<title>JQuery Tab Menü Yapımı</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var aktif = 0;
    $("#sag div:eq("+aktif+")").show();
    tab_renklendir(0);

    $("#sol span").click(function(){
        var index = $("#sol span").index(this);
        if(aktif != index){
            $("#sag div:eq("+aktif+")").hide();
            aktif = index;
            tab_renklendir(aktif);
            $("#sag div:eq("+aktif+")").fadeIn("normal");
        }
    });
});
function tab_renklendir(index){
    $("#sol span").css("background-color","#aaa").css("color","#fff");
    $("#sol span:eq("+index+")").css("background-color","#180").css("color","#fff");
}
</script>

<style>
/* Conteiner */
#conteiner {width: 650px;}

/* Sol */
#sol {border: 2px solid #ddd; background-color: #fff; padding: 10px; width: 200px; display: inline-block}
#sol div {padding:10px}
#sol span {cursor: pointer; padding:3px 5px; margin:0 5px 0 0; background-color:#aaa; color:#fff; font-weight:bold;}

/* Sağ */
#sag {float: right; border: 2px solid #ddd; background-color: #fff; padding: 10px; width: 400px}
#sag div{display:none;}
</style>
</head>
<body>
<div id="conteiner">
    <!-- Sol -->
    <div id="sol">
        <div><span>Buton 1</span></div>
        <div><span>Buton 2</span></div>
        <div><span>Buton 3</span></div>
        <div><span>Buton 4</span></div>
        <div><span>Buton 5</span></div>
    </div>

    <!-- Sag -->
    <div id="sag">
        <div>Buton 1 içeriğini girin</div>
        <div>Buton 2 içeriğini girin</div>
        <div>Buton 3 içeriğini girin</div>
        <div>Buton 4 içeriğini girin</div>
        <div>Buton 5 içeriğini girin</div>
    </div>
</div>
</body>
</html>

Uygulamamızı JQuery kütüphanesinden yararlanarak kolayca yaptık. Yukarıda da anlattığım gibi küçük değişikliklerle daha iyi görünen bir uygulama elde edebilirsiniz. Ben sadece temel mantığını sizlere gösteren bir örnek yaptım. Ayrıca bu uygulamayı aşağı doğru sıralanan menü yerine, sağa doğru sıralanan menü şekline de kolayca getirebilirsiniz. Tek yapmanız gereken float: left; css kodunu uygun yerde kullanmak. Uygulamamızın açıklamasını da yaparak bir yazının daha sonuna gelmiş olduk. Yararlı bir uygulama olması dileğiyle.

 5.373 Okunma

Bu yazıya 13 yorum yapılmış.

  1. Elinize sağlık. Denemedim ama Dreamveawer’ın içinde Spry tab adında benzer bir eklenti var. Onu kullanarak sizinkiyle aynı mantıkta menü oluşturmuştum.

    2 şey sormak istiyorum aslında. Birincisi, jquery.min.js kimi zaman 1.3.2 kimi zaman 1.4.2 versiyonuyla ekleniyor. Bu gerçekten versiyon mu ? Mesela benim sitemde 1.4.2. Zaten bunu server’ımdan değil de sizin yaptığınız gibi google’dan çekmeyi düşünüyorum. Sizin kullandığınız adresi kullansam acaba çalışır mı jquer uygulamalarım ?

    Bir başkası da şu: acaba bunu yönetim panelinden nasıl yönetebiliriz ?

  2. jquerynin sürekli yeni versiyonları çıkıyor. yeni versiyonlar çıktıkça da üzerine birşeyler ekliyorlar. versiyon takibini buradan yapabilirsin. jquery kütüphanesini googledan yüklememin nedeni googleın veri merkezlerinin bizimkilerden kat kat daha hızlı çalışmasından ve server kotaosını kullanmamamdan kaynaklanıyor. tavsiyem sende böyle yap. uygulamalarında herhangi bir sorun çıkmaz çünkü kütüphanenin içeriği sonuçta aynı. yukarıdaki uygulamayı mı yönetim panelinden yönetmek istiyorsun? eğer sorun buysa; uygulamanın değiştirilmesi gerekiyor. çünkü buton sayısı ve butunların içeriğinin veritabanından alınıp, uygulamanın veritabanından gelen bilgiye göre döngü içerisinde oluşturulması gerekiyor.

  3. Çok faydalı bir paylaşım olmuş, teşekkürler.
    Benim bir sorum olacak : Ben bunu yukarda yazının sonunda bahsetiğiniz gibi üstte sağa doğru sıralanan şekilde yapmak istiyorum ama bir türlü başaramadım 🙁 Yardımcı olmanız mümkün mü .
    Şimdiden teşekkürler.

    • css kodlarına aşağıdakini ekle:
      #sol div (float: left;)

      css kodlarından aşağıdakileri kaldır:
      #sol (width: 200px;)
      #sag (float: right;)

      • Çok teşekkür ederim 🙂 İstediğim şekilde oldu. Allah(cc) razı olsun kardeşim. Paylaşımlarınız içinde tekraren teşekkürler.

        • Teşekkür ederim ben de, yardımım olduysa ne mutlu bana.

          • Tekrar rahatsız ediyorum kardeşim kusura bakma ama bir sorum daha olacak, şöyle ki; menünün birine müzik ekledim yada video, başlatığımda müzik devam ederken başka bir menüye tıkladığımda o menü açılıyor ama başlamış olan müzik yada video kapanmıyor arka planda çalmaya devam ediyor, müzik yada videonun menü değiştiğinde kapanmasını nasıl ayarlayabilirim 🙁

          • Kusura bakma bu aralar çok meşgulüm, bundan dolayı cevap yazacak vaktim olmuyor. if koşulu olan yeri aşağıdaki şekilde değiştirirsen, istediğinin olması lazım.
            if(aktif != index){
            $(“#sag div:eq(“+aktif+”)”).hide();
            icerik = $(“#sag div:eq(“+aktif+”)”).html();
            $(“#sag div:eq(“+aktif+”)”).html(icerik);
            aktif = index;
            tab_renklendir(aktif);
            $(“#sag div:eq(“+aktif+”)”).fadeIn(“normal”);
            }

  4. merhaba hocam bu buton1 buton2 onları sağa doğru nasıl yapabilirim aşşa doğru oluyor onu saya doğru şeklinde nasıl yapabilirim

    • Css ile yapacaksın. float: left kodunu kullanacaksın. Kullanmayı bilmiyorsan araştırıp bulabilirsin kullanımını.

  5. yazınızı faydalı buldm teşekkürler.

  6. Hakikaten aradığım bilgileri yazmıssın.Teşekkür ederim

  7. yazınız için teşekkürler

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JQuery
Kapat