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 26206 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 Asp.net ile Dinamik Menü Hazırlama Jquery ve Ajax ile Dataları Sayfalama İşlemi Jcrop ve Asp.net ile Resimleri Kesme (Örnek Dahil) Wamp Server (Apache, Php, MySql on Windows) Visual Studio 2008'de Copy Source as HTML Kullanma
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.
Hizmet amaçlı işler başarıya, kar amaçlı olanlar ise başarısızlığa yöneliktir.
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