mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Kendi Accordion Alanımızı Hazırlama
Bu yazımda Jquery ile kendi accordion alanımızı hazırlamayı göstereceğim. Daha önce buradaki yazımda accordion eklentisini ve nasıl kullanılacağını anlatmıştım. Ancak zamanla Jquery'e olan ilgim arttı ve birçok uygulamayı olduğu gibi accordion uygulamasını da kendim yapabildim. (Buradan görebilirsiniz.) Hazır eklentileri kullanmaktansa kendi ihtiyaçlarımıza göre alanlar tasarlamak ve kodlamak en iyisi. Eklentiler birçok özelliği kapsıyor ve boyut olarakta oldukça büyük oluyor. Bizler ise bu eklentilerin tüm özelliklerini kullanmıyoruz ve kullanmadığımız bölümleri boşu boşuna projelerimizde tutarak projemizi yavaşlatıyoruz. Ayrıca herşeyi hazır kullanmak yerine kendimiz de yapabiliriz. Bunun için de bu uygulamayı hazırladım.

Öncelikle yaptğım bu uygulamanın eklenti de olduğu gibi belli bir html yapısı var. Bu yapı şu şekilde olmalı:

<div id="accordion">
  <span>Accordion 1</span>
  <div>
    <a href="#">Deneme</a>
    <a href="#">Deneme</a>
  </div>
  <span>Accordion 2</span>
  <div>
    <a href="#">Deneme</a>
    <a href="#">Deneme</a>
    <a href="#">Deneme</a>
  </div>
</div>

Bu yapıya göre de yazacağımız Jquery kodlarımız aşağıdaki gibi olmalı:

<script type="text/javascript">
  var aktif = -1;
  $(document).ready(function(){
    $("#accordion span").click(function(){
      var index = $("#accordion span").index(this);
      if(index != aktif)
      {
        $("#accordion div:eq("+aktif+")").slideUp(300);
        $("#accordion div:eq("+index+")").slideDown(300);
        aktif = index;
      }
      else
      {
        $("#accordion div:eq("+index+")").slideUp(300);aktif=-1;
      }
    });
  });
</script>

Görüldüğü accordion uygulamasını birkaç satır kod ile basitçe yapabiliyoruz. Bana göre herşeyi hazır kullanmak yerine kendimiz yapmalıyız. Tabi yapmak için de çalışmalı ve öğrenmeliyiz. Böylece projelerimize daha hakim oluruz.

Yaptığım uygulamayı buradan görebilir, buradan da indirebilirsiniz. Örnek uygulama içinde yer alan css dosyasındaki özellikleri değiştirerek accordion alanlarını istediğimiz biçime getirebiliriz.

Umarım ilgilenenlere faydası olur.
İyi Çalışmalar!
Mehmet Duran 21 Ocak Çarşamba 2009 2 20468 3,3
Javascript Web Tasarım jQuery Jquery Tasarım-Görsellik Site Araçları İndir
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Jquery ile Kayan (Floating) Alan Yapımı Asp.net ileThumbnail Oluşturma C Sharp ile Nesneler Üzerinde JSON Dönüşümleri Jquery ile Tek Tek Kayan Alan Oluşturma ve Ajax ile Rss Okuma Örneği Asp.net'te Jquery ve Ajax ile Server Zamanını Alma
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Farqin _ 09 Ekim Cuma 2009 09:48 #1
üstad sana nasıl teşekkür edilir bilmiyorum. Çözdüğün şeyleri bu kadar samimi bir şekilde paylaşman gerçekten şahane.
İhlas Temizlik Robotu 17 Nisan Pazar 2011 11:54 #2
Çok Kullanışlı ve bir okadarda açıklayıcı olmuş.Teşekkürler
İ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