lightTreeview

  1 /**
  2 
  3  * lightTreeview for jQuery 1.2.x
  4 
  5  *
  6 
  7  * author: feiyu
  8 
  9  * e-mail: feiyu@asgard.cn
 10 
 11  * website: http://feiyu.asgard.cn
 12 
 13  *
 14 
 15  * Version: 1.0.0
 16 
 17  */
 18 
 19 
 20 
 21 (function($) {
 22 
 23 
 24 
 25     $.lightTreeview={
 26 
 27         toggle: function(o,speed) {
 28 
 29             exec(o,speed,'toggle');
 30 
 31         },
 32 
 33         close: function(o,speed) {
 34 
 35             exec(o,speed,'hide');
 36 
 37         },
 38 
 39         open: function(o,speed) {
 40 
 41             exec(o,speed,'show');
 42 
 43         }
 44 
 45     };
 46 
 47 
 48 
 49     function exec(o,s,act) {
 50 
 51         var f=$(o).parent();
 52 
 53         var ico=f.find('>.flex-ico');
 54 
 55         flex(ico,f,{animate:isNaN(s)?100:s},act);
 56 
 57     }
 58 
 59 
 60 
 61     $.fn.lightTreeview=function(s1) {
 62 
 63         if(typeof(s1)=='undefined') s1 = {};
 64 
 65         var settings=defaultSettings();
 66 
 67         $.extend(settings,s1);
 68 
 69 
 70 
 71         this.addClass('lightTreeview');
 72 
 73 
 74 
 75         //是否启用连节线
 76 
 77         if(!settings.line) this.addClass('treeview-noline');
 78 
 79 
 80 
 81         //是否设置了风格
 82 
 83         if(settings.style) this.addClass('treeview-'+settings.style);
 84 
 85 
 86 
 87         //取节点
 88 
 89         var node=$('li:has(ul,ol)',this);
 90 
 91 
 92 
 93         //设置结尾的分枝
 94 
 95         $('li:last-child',this).addClass('branch-last');
 96 
 97 
 98 
 99         if(settings.collapse) {    //允许伸缩
100 
101 
102 
103             //设置带图标的li的连节线
104 
105             node.addClass('node-normal').filter(':last-child').attr('class','node-last');
106 
107 
108 
109             //默认文件图标支持
110 
111             if(settings.fileico) $('li:not(:has(ul,ol))>:first-child',this).addClass('treeview-file');
112 
113 
114 
115             //默认文件夹图标支持
116 
117             if(settings.folderico) $('>:first-child',node).addClass('treeview-folder');
118 
119 
120 
121             //在节点中加入默认加减
122 
123             node.css('cursor','pointer').prepend('<span class="flex-ico"></span>').find('>ul,>ol').filter(':hidden').parent().find('>.flex-ico').addClass('flex-close');
124 
125             $('>.flex-ico',node.filter(':last-child')).addClass('flex-none');
126 
127             $('>ul,>ol',node.filter(':last-child')).filter(':hidden').parent().addClass('node-last-close');
128 
129             node.find('>ul,>ol').filter(':hidden').parent().find('>.treeview-folder').addClass('treeview-folder-close');
130 
131 
132 
133             //绑定标题行的点击事件
134 
135             if(settings.nodeEvent)
136 
137                 node.find('>:nth-child(2)').click(function() {
138 
139                     $(this).parent().find('>.flex-ico').trigger('click');
140 
141                 });
142 
143 
144 
145             //绑定默认事件
146 
147             $('>.flex-ico',node).click(function() {
148 
149                 var f=$(this).parent();    //当前节点
150 
151                 if(settings.unique && $('>ul,>ol',f).is(':hidden')) {    //同级互斥
152 
153                     var ff=$('>li:has(ul,ol)',f.parent()).not(f);    //排除当前节点的同级节点集合
154 
155                     flex($('>:first-child',ff),ff,settings,'hide');
156 
157                 }
158 
159                 flex($(this),f,settings);
160 
161             });
162 
163         }
164 
165     };
166 
167 
168 
169     //缩放操作
170 
171     function flex(ico,father,settings,type) {
172 
173         var list=$('>ul,>ol',father);
174 
175         var ln=ico.filter('.flex-none').parent();
176 
177         var ic=ico.not('.flex-none');
178 
179         var fl=$('>.treeview-folder',father);
180 
181         if(type=='hide') {
182 
183             ln.addClass('node-last-close');
184 
185             ic.addClass('flex-close');
186 
187             fl.addClass('treeview-folder-close');
188 
189             list.hide(settings.animate);
190 
191         }
192 
193         else if(type=='show') {
194 
195             ln.removeClass('node-last-close');
196 
197             ic.removeClass('flex-close');
198 
199             fl.removeClass('treeview-folder-close');
200 
201             list.show(settings.animate);
202 
203         }
204 
205         else {
206 
207             ln.toggleClass('node-last-close');
208 
209             ic.toggleClass('flex-close');
210 
211             fl.toggleClass('treeview-folder-close');
212 
213             list.toggle(settings.animate);
214 
215         }
216 
217     }
218 
219 
220 
221     //默认参数设置
222 
223     var defaultSettings=function() {
224 
225         return {
226 
227             collapse: true,        //允许折叠
228 
229             line: true,            //有连接线
230 
231             animate: 200,        //动画速度
232 
233             nodeEvent: true,    //响应分枝整行的事件
234 
235             unique: false,        //同级节点下是否互斥
236 
237             style: '',            //默认风格
238 
239             fileico: false,        //文件图标支持
240 
241             folderico: false    //文件夹图标支持
242 
243         }
244 
245     };
246 
247 })(jQuery);