mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Sınırsız Treeview Yapımı
Bu yazımda Jquery ile hazırlamış olduğum sınırsız treeview uygulamasını nasıl yaptığımı anlatmaya çalışacağım. (Buradan görebilirsiniz.) Öncelikle uygulamayı tamamen kendi kodlamam ile oluşturdum ve ilk kez böyle bir uygulama yapıyorum. Bu nedenle eksiklikler ve hatalar olabilir. Ancak css ile düzenlemeler dışında hazırladığım uygulamada pek sorun yok gibi. Sonsuz ağaç ve alt ağaç yapısı oluşturabiliyoruz. Ancak belirttiğim gibi css düzeni ilgili birkaç sorun var. Onları da tamamladıktan sonra projelerde kulanılmaya hazır oldukça güzel bir uygulama olduğunu düşünüyorum. Nasıl yapacağımıza bakalım.

Öncelikle her uygulamada olduğu gibi belli bir html yapımız var. Bu yapı aşağıdaki gibi olmalı.

  <div id="tree_frame">
    <div class="tree">
      <span>Tree 1</span>
      <div>
        <a href="#">Deneme</a>
      </div>
      <span>Tree 2</span>
      <div>
        <div class="tree">
          <span>Alt Tree 1</span>
          <div>
            <a href="#">Deneme</a>
            <a href="#">Deneme</a>
          </div>
          <span>Alt Tree 2</span>
          <div>
            <a href="#">Deneme</a>
            <a href="#">Deneme</a>
          </div>
        </div>
        <a href="#">Deneme</a>
        <a href="#">Deneme</a>
      </div>
    </div>
  </div>

Bu yapıya göre hazırlayacağımız Jquery kodlarımız ise şöyle olmalı.

<script type="text/javascript">
  $(document).ready(function(){
    $(".tree > div a").css("width","100%");
    $(".tree > div span").css("width","100%");
    $(".tree div .tree").css("display","block").css("padding","0").css("width","100%");
    $("#ac").toggle(function(){
      $(".tree span").css("background-image","url('acik.png')");
      $(this).html("Hepsini Kapat");
      $(".tree div").show();
      $(".tree div .tree").css("display","block");
    },function(){
      $(".tree span").css("background-image","url('kapali.png')");
      $(this).html("Hepsini Göster");
      $(".tree div").hide();
      $(".tree div .tree").css("display","block");
    });
    $(".tree span").click(function(){
      var index = $(".tree > span").index(this);
      if($(".tree > div:eq("+index+")").is(":hidden"))
      {
        ac(index);
      }
      else
      {
        kapat(index);
      }
    });
  });
  function kapat(index)
  {
    $(".tree > span:eq("+index+")").css("background-image","url('kapali.png')");
    $(".tree > div:eq("+index+")").hide();
  }
  function ac(index)
  {
    $(".tree > span:eq("+index+")").css("background-image","url('acik.png')");
    $(".tree > div:eq("+index+")").show();
  }
</script>

Bu kodlar dışında önemli dir nokta da Css kodlarımız. Css kodlarını örnek sayfada görebilirsiniz. Ancak css ile bazı sıkıntılar var. Link genişlikleri her ağaç düzeyinde aynı olmuyor. Bu sorunu Jquery kodlaması ile halledebileceğimi düşünüyorum. Ancak bu sorun ile fazla ilgilenemedim. Önemli olan sınırsız ağaç uygulamasını yapmaktı. Biraz uğraşsamda sonunda yapabildim. Sorunları da en kısa sürede çözmeyi umut ediyorum.

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

İyi Çalışmalar!
Mehmet Duran 02 Şubat Pazartesi 2009 2 33906 4,2
Javascript Web Tasarım jQuery Jquery Treeview İndir Css Site Araçları Tree
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Jquery ve Ajax ile Kullanıcı Kontrollerini Kullanma - 2 Jquery ile LightBox Slayt Uygulaması Jquery ile Yatay Accordion Uygulaması jQuery Ajax ile UserControl'leri Etkin Kullanma Jquery, Ajax ve FaceBox ile Edit Update Uygulaması
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Hasan Kömürcü 15 Mayıs Cuma 2009 23:33 #1
Ellerinize sağlık gerçekten güzel olmuş. Dinamik dillere aşırı uyumluluğu da cabası. Her seviyedeki kodlayıcı için uygun. Css problemini çözmeye çalışacağım. Size bildiririm. Teşekkürler.
Hasan Kömürcü 15 Mayıs Cuma 2009 23:39 #2
Bide şahsınız yönetiminde bir jquery sevenler ve yaşatanlar derneği kursak fena olmaz sanırım. Ben önceleri Mootools kullanıyordum. Memnundum gerçi ama, orada pluginlere bağlı kalıyorduk. Jquery ise son kullanıcı için bile güzel. Ufak tefek bazı sorunlarımızı da çözebiliyoruz artık. Çok seviyorum kullanmayı.
İ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