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!
Mehmet Duran 04 Ocak Pazar 2009 3 26706 5,0
Javascript Web Tasarım jQuery Jquery Tasarım-Görsellik İndir İnternet
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Jquery ve Ajax ile Kullanıcı Kontrollerini Kullanma - 2 Building XNA 2.0 Games (E-Book) Asp.net Uygulamalarında Namespace ve Class Kullanımı Sitenizi Her Konuda Test Edin Asp.net ileThumbnail Oluşturma
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.
Ne edersen kendine, edersin kendi kendine.
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