mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Treeview Uygulamam
Bu yazımda Jquery ile hazırlamış olduğum sınırsız treeview uygulamasının son halini sizlerle paylaşacağım. Bundan önce hazırladığım treeview uygulamasının css ve jquery kodları bakımından eksiklikleri ve hataları vardı. Bu hataları ve eksiklikleri giderdiğimi düşünüyorum. Ayrıca uygulamanın html yapısında da değişiklikler yaptım. Geldiğim aşamada uygulamanın projelerde çok rahat kullanılacağını düşünüyorum. Tasarım bakımından eksiklikleri yine olabilir. Ancak son hali ile oldukça güzel ve faydalı bir çalışma olduğunu düşünüyorum. Şimdi bu uygulamayı ve nasıl yapacağımıza bakalım.

Her uygulamada olduğu gibi bu uygulamımızın da belli bir html yapısı var. Bu yapı şu şekilde olmalı.

  <div class="tree">
    <div>
      Tree 1
    </div>
    <span>
      <div><a href="#">Deneme</a></div>
      <div><a href="#">Deneme</a></div>
      <div><a href="#">Deneme</a></div>
    </span>
 
    <div>
      Tree 2
    </div>
    <span>
      //Burada da istediğimiz sayıda
      //iç içe veya alt alta ağaç oluşturabiliriz.
 
      //<div class="tree">
      //  Node Başlığı  
      //</div>
      //<span>
      //  <div><a>Link Başlığı</a></div>
      //</span>
 
    </span>
  </div>

Bu yapıya uygun ve ağaç yapısı oluşturacak jquery kodlarım ise aşağıdaki gibi olmalı.

<script type="text/javascript">
  $(document).ready(function(){
    $("#ac").toggle(function(){
      $(".tree > div").css("background-image","url('acik.png')").css("background-color","#147").css("color","#fff");
      $(this).html("Hepsini Kapat");
      $(".tree > span").show();
      $(".tree > span").css("display","block");
    },function(){
      $(".tree > div").css("background-image","url('kapali.png')").css("background-color","#eee").css("color","#800");
      $(this).html("Hepsini Göster");
      $(".tree > span").hide();
      $(".tree > span").css("display","none");
    });
    $(".tree > div").click(function(){
      var index = $(".tree > div").index(this);
      if($(".tree > span:eq("+index+")").is(":hidden"))
      {
        ac(index);
      }
      else
      {
        kapat(index);
      }
    });
  });
  function kapat(index)
  {
    $(".tree > div:eq("+index+")").css("background-image","url('kapali.png')").css("background-color","#eee").css("color","#800");
    $(".tree > span:eq("+index+")").slideUp(300);
  }
  function ac(index)
  {
    $(".tree > div:eq("+index+")").css("background-image","url('acik.png')").css("background-color","#147").css("color","#fff");
    $(".tree > span:eq("+index+")").slideDown(300);
  }
</script>

Tüm bu kodlamaları yaptıktan sonra ağaç yapımızı kullanabiliriz. Html yapıda belirtmiş olduğum gibi sınırsız iç içe veya alt alta ağaç oluşturabiliriz. Bu bakımdan oldukça esnek bir uygulama olduğunu düşünüyorum. Ancak tasarım bakımında daha iyi olabilirdi. Bunu da daha bilgili arkadaşlarımıza bırakalım.

Ayrıca bu türlü uygulamalarda html yapı içerisinde seçeceğimiz elementleri nasıl seçeceğimizin oldukça önemli olduğunu gördüm. Bu seçim hem Jquery kodlarımızda hem de css kodlarımızda oldukça kolaylık sağlıyor. Bu konuda da bir yazı hazırlamayı düşünüyorum.

Hazırlamış olduğum uygulamayı buradan görebilir, buradan da indirebilirsiniz.

Örnek uygulama dosyası içerisinde yer alan css dosyasında belirttiğimiz özellikleri ve Jquery ile belirttiğimiz özellikleri değiştirerek daha farklı görünüşte bir uygulama elde edebiliriz.

İyi Çalışmalar!
Mehmet Duran 08 Şubat Pazar 2009 1 22415 4,0
Javascript Web Tasarım jQuery Jquery Tree Treeview Tanıtım Css İndir
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar The Ultimate Css (E-Book) Son Yaptıklarım Bölümü Asp.net 2.0 - Selçuk Özdemir 'İlgili Yazılar Bölümü' Kullanımda Jcrop ve Asp.net ile Resimleri Kesme (Örnek Dahil)
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Hasan Kömürcü 26 Mayıs Salı 2009 04:12 #1
Asp ile birleştirmeye çalışıyorum, recursive bir yapı. Bakalım sonuca varabilecekmiyim.
İ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