mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Aç-Kapa Alan Yapımı
Bu yazımda Jquery ile hazırlamış olduğum aç-kapa alan yapımını anlatmaya çalışacağım. Son zamanlarda jquery ile bu türlü uygulamalara bakamıyordum. Bu uygulamayı hazırlayarak bu araya son verdim. Aslında hazırladğım uygulama accordion uygulamasına benzemekte. Ancak accordion uygulamasından farklı bir uygulama. Accordion uygulamasında sadece bir alan aktif olabiliyor. Bu uygulamada ise her alan aynı anda aktif olabilmekte. Bu uygulamanın benzerlerini birçok blogda ve sitede gördüm. Kullanışlı bir uygulama. Şimdi ise kodlarımıza ve nasıl yaptığıma bakalım.

Öncelikle hazırladığım bu uygulamanında belli bir html yapısı var. Bu yapı şu şekilde olmalı:

  <div id="alanim">
    <span>Başlık 1</span>
      <div>İçerik 1</div>
    <span>Başlık 2</span>
      <div>İçerik 2</div>
    <span>Başlık 3</span>
      <div>İçerik 3</div>
    <span>Başlık 4</span>
      <div>İçerik 4</div>
  </div>

Bu yapıya göre hazırlamış olduğum script kodları ise şöyle:

  <script>
    $(document).ready(function(){
      $("#alanim div").hide();
      $("#alanim span").toggle(function(){
        var index = $("#alanim span").index(this);
        $("#alanim div:eq("+index+")").slideDown("slow");
        $(this).css("background-color","#800");}, 
      function(){
        var index = $("#alanim span").index(this);
        $("#alanim div:eq("+index+")").slideUp("slow");
        $(this).css("background-color","#369");
      });
    });
  </script>

Görüldüğü gibi kodlarımız bu şekilde. Aşağıda uygulamayı görebilirsiniz. Sizler de javascript ve css kodları ile oynamalar yaparak bu uygulamayı istediğiniz şekle sokabilirsiniz.
Başlık 1
İçerik 1
Başlık 2
İçerik 2
Başlık 3
İçerik 3
Başlık 4
İçerik 4

Örnek uygulamayı buradan indirebilirsiniz. Umarım güzel bir çalışma olmuştur.

İyi Çalışmalar!
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Jquery ve Ajax ile Kullanıcı Kontrollerini Kullanma - 1 Jquery ile Gridview'da ki Checkbox'ların Tümünü İşaretleme veya Bırakma Asp.net ve Asp.net MVC'de Binary Olarak Dosya (Upload - Download) İşlemleri Oracle E-Book (3 Adet) Bloğumda Kullandığım SiteMap Sınıfı
Yorumlar
Yorum Yaz
RSS Yorum Takibi
c b 22 Haziran Salı 2010 18:20 #1
Ellerinize sağlık Mehmet abi.... Süper olmuş. :)
c b 22 Haziran Salı 2010 18:59 #2
Mehmet abi, maalesef yazı alanında sınırlama var... Bu sorunu nasıl çözeriz? Belli sayıdan sonraki harfleri alıyor ama göstermiyor.Çözüm bulursanız çok iyi olur. :)
Mehmet Duran 23 Haziran Çarşamba 2010 23:53 #3
Merhaba. Nasıl bir sorun yaşadığını anlamadım. Eğer başlık alanına veya içerik alanına girdiğin veriler sığmıyorsa o alanların CSS kodları ile oynamalısın.
İ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.
Başarısızlıklarınız ile soylu bir şekilde yüzleşin, başarıdan farkı kalmayacaktır.
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