astropaykartsatis.net
User Tag List

Yeni Konu Aç Cevap Yaz
7.06.2014, 17:04 1 (permalink)
AdobeWordpress
  • Neredenİstanbul Şubesi
  • Üyelik Tarihi28.05.2013
  • Yaş29
  • Ticaret Sayısı0
  • Mesajlar102
Hiyerarşik Treeview nasıl yapılır? #permalink (permalink)


Açılabilir liste, hiyerarşik listeleme ve treeview diye birçok farklı şekilde isimlendirilen bu yapı dallara ayrılan uzun içerikleri anlaşılır bir şekilde göstermemizi sağlıyor. Ayrıca yanlarına ekleyeceğimiz checkbox inputları sayesinde de bir seçim işlemi yaptırabileceğiz.

Kısa bir aradan sonra jQuery makalelerimize devam ediyoruz. Bugün jQuery desteğiyle hierarchic treeview yapısını nasıl oluşturabileceğinizi anlatacağız. Örneği test ederek başlayabilirsiniz.



Treeview nasıl yapılır?

Daha önceden eklemediyseniz güncel jQuery versiyonunu web sitenize dahil ediniz. Kullanılabilir versiyonlara buradan göz atabilirsiniz. Örnek kod aşağıdaki gibidir.

HTML-Kodu:
<script src="http://code.jquery.com/jquery-xxxxxxx.min.js"></script>
HTML Kodları

Şimdi HTML kodlarımızı ekleyerek devam edelim.

<input type="checkbox"><span class="detailed">Yönetici</span>
Buradaki amaç checkbox ile tanımlamaya farklı işlev vermek. Bildiğiniz gibi normalde ilgili checkbox tanımı tıklandığında da otomatik olarak check işareti gelir. Fakat biz onları ayırarak kullanıcının tıklama ile dip kategorilere, hiyerarşinin içine inmesini sağlayacağız.

Tüm HTML kodlarımız aşağıda;

HTML-Kodu:
<ul class="awTreeview">
    <li>
          <input type="checkbox" checked><span class="detailed">Üst Düzey Yönetici</span>  
        <ul>
            <li>
                <input type="checkbox" class="selectall"><span class="detailed">Tüm Çalışanlar</span>  
            </li>
            <li>
                <input type="checkbox"><span class="detailed">Yönetici 1</span>
            </li>   
            <li><input type="checkbox"><span class="detailed">Yönetici 2</span>
                <ul style="display: none">
                    <li>
                        <input type="checkbox" class="selectall"><span class="detailed">Tüm Çalışanlar</span> 
                    </li>
                    <li>
                        <input type="checkbox"><span class="detailed">Çalışan 1</span> 
                        <ul style="display: none">
                            <li>
                                <input type="checkbox" class="selectall"><span class="detailed">Tüm Çalışanlar</span> 
                            </li>
                            <li>
                                <input type="checkbox"><span class="detailed">Alt Çalışan 1</span> 
                            </li>
                            <li>
                                <input type="checkbox"><span class="detailed">Alt Çalışan 2</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <input type="checkbox"><span class="detailed">Çalışan 2</span>    
                    </li>
                </ul>
            </li>   
            <li>
                <input type="checkbox"><span class="detailed">Yönetici 3</span> 
            </li>   
        </ul>
    </li>
</ul> 
CSS Kodları

Aslına bakarsanız CSS tarafında pek bir işimiz yok. Ancak biraz süsleme işlemi yapmaktan kimseciklere zarar gelmez. Aşağıdaki kodlar ile küçük bir border oluşturalım, beraberinde de varsayılan ul yapısını şekillendirelim.

Kod:
.awTreeview, .awTreeview li{list-style: none;}
.awTreeview ul{margin-left:6px;padding-left:25px; border-left:3px solid #E6E6E6;}
Devam edelim.

jQuery Kodları

Bildiğiniz gibi makalenin başında jQuery dosyasını tanımlamanızı söylemiştik. Şimdi bu tanımlama içerisindeki geniş kütüphaneyi kullanarak hiyerarşik yapımızı tamamlayalım.

Şimdi jQuery kodlarımız ile devam edelim. Kodu birkaç parçaya ayırıp işi daha zor kılmak istemiyoruz. O yüzden ilgili yerlere girdiğimiz yorum satırlarıyla tam olarak ne yaptığımızı anlatmaya çalıştık.

Kod:
$(function() {
    /* Her menünün başındaki tüm çalışanlar sekmesini işlevsel hale getirelim. */
    $('.awTreeview .selectall').change(function() {
        $(this).closest('li').nextAll().find("input[type='checkbox']").prop('checked', this.checked);
    });
     
    /* Altında içerik bulunan listeleri tıklandığında açılıp/kapanır kılalım. */
    $(".awTreeview .detailed").click(function () {
        $(this).siblings('ul').toggle();
    });
 
    /* Altında içerik bulunan listeleri kullanıcıya hissettirmek için üzerine gelince fare imlecini değiştirelim. */
    $(".awTreeview .detailed").mouseover(function() {
        $(this).css( "cursor", "default" );
        if ($(this).siblings('ul').length>0) {$(this).css( "cursor", "crosshair" );}
    });
 
    /* Bir yönetici seçildiğinde altındaki tüm listenin de seçilmesini sağlayalım. */
    $(".awTreeview input[type='checkbox']").change(function () {
        $(this).find("ul").toggle();
        $(this).siblings('ul')
               .find("input[type='checkbox']")
               .prop('checked', this.checked);
    });
});
Hazırız.

Kapanış

Özellikle personel yönetim sistemlerinde sık sık kullanmak durumunda kaldığımız treeview yapısına da böylece örneklendirmiş olduk. Konuyla ilgili soruları yorum alanında bekliyor olacağız.

İyi çalışmalar.

Kaynak : http://www.adobewordpress.com/hiyera...-nasil-yapilir
Hızlı PM Gönder
Gönder
Alıntı ile Cevapla
Yeni Konu Aç Cevap Yaz
Şu an bu konuyu okuyan kişi sayısı: 1 (0 üye ve 1 misafir)
 
Seçenekler
Yetkileriniz
Konu Acma Yetkiniz Yok Cevap Yazma Yetkiniz Yok Eklenti Yükleme Yetkiniz Yok Mesajınızı Değiştirme Yetkiniz Yok
BB code is Açık Smileler Açık [IMG] Kodları Açık HTML-Kodu Kapalı
Trackbacks are Açık
Pingbacks are Açık
Refbacks are Açık
Forum Kuralları
Benzer Konular
Konu Konuyu Başlatan Forum Cevap Son Mesaj
WordPress Kurulum-Tema-Seo İşleriniz Yapılır. rasqah WordPress 13 30.04.2013 19:55
Zoints seo'dan vBSEO'ya geçiş nasıl yapılır? Mf.Rub vB SEO 1 29.09.2012 18:18
Ucretsiz Reklam Alimi - Sitenizi Alan dolmadan ekleyin!!! themaniac Reklam Alım - Satım 7 3.02.2011 16:13
Yeni Başlayanlar İçin Tüm Detayları ile SEO Nasıl Yapılır ? backdoor Google Optimizasyon ve Sandbox 25 7.07.2010 12:43
vBulleti Nedir ? Nasıl Kurulur ? Eklenti Kurulumu ve Tema Kurulumu Nasıl Yapılır ? berkuras Web Ders 3 14.03.2010 23:36

Forum Saati: 17:35. Zaman dilimi GMT +3 olarak ayarlanmıştır.
Powered by vBulletin™ Version 3.8.7
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.