mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Yatay Accordion Uygulaması
Bu yazımda Jquery ile yatay accordion uygulamasını ve nasıl yaptığımı açıklamaya çalışacağım. Daha önce dikey olarak kullandığımız accordion uygulamasını bu sefer yatay olarak yapacağız. Bu uygulamayı da birçok amaç için kullanabiliriz. (Manşet alanı, menü alanı gibi.) Bu uygulamayı hazırlarken Jquery içinde yer alan efekt fonksiyonlarından olan show - hide ve animate fonksiyonlarını kullandım ve iki farklı örnek hazırladım. Çünkü bu fonksiyonların görselliği arasında az da olsa fark var. Ayrıca bu uygulamada tasarım ve efektlerde kullandığımız değerler yani css ile belirlemiş olduğum özellikler önemli. Bu bakımdan böyle bir uygulamada css kodlarımızı da göz önüne almalıyız. Şimdi bu uygulamayı nasıl yapacağımıza bakalım.

Örnek vereceğim uygulamada animate fonksiyonunu kullanacağım. Ancak hem show - hide fonksiyonu ile hemde animate fonksiyonu ile hazırlamış olduğum örnekleri hem indirebilir hem de görebilirsiniz.

Öncelikle bu uygulamanın da belli bir html yapısı var. Bu yapı aşağıdaki gibi olmalı.

  <div id="accordion">
    <span>A1</span>
    <div>İçerik - 1</div>
    <span>A2</span>
    <div>İçerik - 2</div>
    <span>A3</span>
    <div>İçerik - 3</div>
    <span>A4</span>
    <div>İçerik - 4</div>
    <span>A5</span>
    <div>İçerik - 5</div>
  </div>

Bu yapıya uygun olarak hazırladığımız jquery kodlarımız ise aşağıdaki gibi olmalı. (Jquery kodlarımızda belirttiğimiz css değerleri kendi örneğim için geçerli. Sizler yapacağınız örneklerde kendi değerlerinize göre değiştirmelisiniz.)

<script type="text/javascript">
  var aktif = 1;
  $(document).ready(function(){
    var son = $("#accordion div").length;
    aktif = (son - 1); //açılışta aktif olacak kutu.
    $("#accordion div:eq("+aktif+")").css("width","0px").animate({width:"306px"}, 300);
    $("#accordion span").click(function(){
      var index = $("#accordion span").index(this);
      if(index != aktif)
      {
        $("#accordion div:eq("+aktif+")").hide();
        $("#accordion div:eq("+index+")").css("width","0px").animate({width:"306px"}, 300);
        aktif = index;
      }
    });
  });
</script>

Görüldüğü kodlarımız böyle. Jquery kodlarında belirttiğimiz değerler tamamen kendi örneğim için geçerli. Böyle bir örnek yapacaklar değerleri kendi örneklerine uygun biçimde değiştirmelidir. Örneğimin css kodlarını örnek sayfalarda bulabilirsiniz. Böylece güzel bir çalışmayı daha yapmayı ve kullanmayı görmüş olduk. Ayrıca kodlar ile oynayarak daha efektif daha görsel bir çalışma yapılabilir.

Animate fonksiyonu ile hazırladığım örneği buradan ,
Show - Hide fonksiyonları ile hazırlamış olduğum örneği de buradan görebilirsiniz.
Hazırlamış olduğum örneği (iki fonskiyon ile beraber) buradan indirebilirsiniz.

İyi Çalışmalar!
Mehmet Duran 26 Ocak Pazartesi 2009 3 22426 4,7
Javascript Web Tasarım jQuery Jquery Site Araçları İndir İnternet Css Html
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar jQuery Ajax ile UserControl'leri Etkin Kullanma Web Service ile Ajax İşlemleri Javascript ile Date Time Picker jQuery 1.4 Yayınlandı Vesikalık Fotoğraflarınızı Eskiye Benzetin
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Tuncay Peker 09 Şubat Pazartesi 2009 11:55 #1
Eline sağlık arkadaşım.
Hakan Sarı 23 Nisan Cuma 2010 12:09 #2
Elinize sağlık. Peki burada aktif olan span ın rengini aktif olduğu sürece nasıl değişik bir renk yapabiliriz. Şimdiden teşekkürler.
Mehmet Duran 23 Nisan Cuma 2010 19:23 #3
Merhaba. Bunun için aktif=index yapılan if bloğu içinde aktif olan span tagının background değerini değiştirirsen istediğin sonucu alabilirsin. Bu arada aktif olanı yaparken eski aktif olan spanın rengini de değiştirmen gerekir.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Büyük işler gibi, büyük düşüncelerinde davula ihtiyaçları yoktur.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009