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. <script></script> HTML Kodları Şimdi HTML kodlarımızı ekleyerek devam edelim. Yönetici 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; Üst Düzey Yönetici Tüm Çalışanlar Yönetici 1 Yönetici 2 Tüm Çalışanlar Çalışan 1 Tüm Çalışanlar Alt Çalışan 1 Alt Çalışan 2 Çalışan 2 Yönetici 3 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. . awTreeview, . awTreeview li . awTreeview ul 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. $(function { / Her menünün başındaki tüm çalışanlar sekmesini işlevsel hale getirelim. / $ . change(function ); / Altında içerik bulunan listeleri tıklandığında açılıp/kapanır kılalım. / $ . click(function ); / Altında içerik bulunan listeleri kullanıcıya hissettirmek için üzerine gelince fare imlecini değiştirelim. / $ . mouseover(function { $ . css ; if ($ . siblings . length>0) }); / Bir yönetici seçildiğinde altındaki tüm listenin de seçilmesini sağlayalım. / $ . change(function ); }); 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/hiyerarsik-treeview-nasil-yapilir