亚洲乱码一区二区三区国产精品,亚洲欧洲一区二区,亚洲国产精品日韩在线观看

xtree.js

  1
  2 /*----------------------------------------------------------------------------\
  3 |                       Cross Browser Tree Widget 1.17                        |
  4 |-----------------------------------------------------------------------------|
  5 |                          Created by Emil A Eklund                           |
  6 |                  (http://webfx.eae.net/contact.html#emil)                   |
  7 |                      For WebFX (http://webfx.eae.net/)                      |
  8 |-----------------------------------------------------------------------------|
  9 | An object based tree widget,  emulating the one found in microsoft windows, |
10 | with persistence using cookies. Works in IE 5+, Mozilla and konqueror 3.    |
11 |-----------------------------------------------------------------------------|
12 |          Copyright (c) 2000, 2001, 2002, 2003, 2006 Emil A Eklund           |
13 |-----------------------------------------------------------------------------|
14 | Licensed under the Apache License, Version 2.0 (the "License"); you may not |
15 | use this file except in compliance with the License.  You may obtain a copy |
16 | of the License at http://www.apache.org/licenses/LICENSE-2.0                |
17 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
18 | Unless  required  by  applicable law or  agreed  to  in  writing,  software |
19 | distributed under the License is distributed on an  "AS IS" BASIS,  WITHOUT |
20 | WARRANTIES OR  CONDITIONS OF ANY KIND,  either express or implied.  See the |
21 | License  for the  specific language  governing permissions  and limitations |
22 | under the License.                                                          |
23 |-----------------------------------------------------------------------------|
24 | Dependencies: xtree.css (To set up the CSS of the tree classes)             |
25 |-----------------------------------------------------------------------------|
26 | 2001-01-10 | Original Version Posted.                                       |
27 | 2001-03-18 | Added getSelected and get/setBehavior  that can make it behave |
28 |            | more like windows explorer, check usage for more information.  |
29 | 2001-09-23 | Version 1.1 - New features included  keyboard  navigation (ie) |
30 |            | and the ability  to add and  remove nodes dynamically and some |
31 |            | other small tweaks and fixes.                                  |
32 | 2002-01-27 | Version 1.11 - Bug fixes and improved mozilla support.         |
33 | 2002-06-11 | Version 1.12 - Fixed a bug that prevented the indentation line |
34 |            | from  updating correctly  under some  circumstances.  This bug |
35 |            | happened when removing the last item in a subtree and items in |
36 |            | siblings to the remove subtree where not correctly updated.    |
37 | 2002-06-13 | Fixed a few minor bugs cased by the 1.12 bug-fix.              |
38 | 2002-08-20 | Added usePersistence flag to allow disable of cookies.         |
39 | 2002-10-23 | (1.14) Fixed a plus icon issue                                 |
40 | 2002-10-29 | (1.15) Last changes broke more than they fixed. This version   |
41 |            | is based on 1.13 and fixes the bugs 1.14 fixed withou breaking |
42 |            | lots of other things.                                          |
43 | 2003-02-15 | The  selected node can now be made visible even when  the tree |
44 |            | control  loses focus.  It uses a new class  declaration in the |
45 |            | css file '.webfx-tree-item a.selected-inactive', by default it |
46 |            | puts a light-gray rectangle around the selected node.          |
47 | 2003-03-16 | Adding target support after lots of lobbying

                |
48 | 2006-05-26 | Changed license to Apache Software License 2.0.                |
49 |-----------------------------------------------------------------------------|
50 | Created 2000-12-11 | All changes are in the log above. | Updated 2006-05-26 |
51 \----------------------------------------------------------------------------*/
52
53 // tree config 對象，設定框架的基本信息。
54 var webFXTreeConfig = {
55     rootIcon        : 'images/foldericon.png',
56     openRootIcon    : 'images/openfoldericon.png',
57     folderIcon      : 'images/foldericon.png',
58     openFolderIcon  : 'images/openfoldericon.png',
59     fileIcon        : 'images/file.png',
60     iIcon           : 'images/I.png',
61     lIcon           : 'images/L.png',
62     lMinusIcon      : 'images/Lminus.png',
63     lPlusIcon       : 'images/Lplus.png',
64     tIcon           : 'images/T.png',
65     tMinusIcon      : 'images/Tminus.png',
66     tPlusIcon       : 'images/Tplus.png',
67     blankIcon       : 'images/blank.png',
68     defaultText     : 'Tree Item',
69     defaultAction   : 'javascript:void(0);',
70     defaultBehavior : 'classic',
71     //默認是否打開樹的根節點。
72     usePersistence    : true
73 };
74
75 // tree handler 對象，設定常用的值和方法。
76 var webFXTreeHandler = {
77     idCounter : 0,
78     idPrefix  : "webfx-tree-object-",
79     all       : {},
80     behavior  : null,
81     selected  : null,
82     onSelect  : null, /* should be part of tree, not handler */
83     getId     : function() { return this.idPrefix + this.idCounter++; },
84     toggle    : function (oItem) { this.all[oItem.id.replace('-plus','')].toggle(); },
85     select    : function (oItem) { this.all[oItem.id.replace('-icon','')].select(); },
86     // 當節點得到焦點時，使id的元素執行  focus()，節點方法。
87     focus     : function (oItem) { this.all[oItem.id.replace('-anchor','')].focus(); },
88     blur      : function (oItem) { this.all[oItem.id.replace('-anchor','')].blur(); },
89     keydown   : function (oItem, e) { return this.all[oItem.id].keydown(e.keyCode); },
90     cookies   : new WebFXCookie(),
91     insertHTMLBeforeEnd    :    function (oElement, sHTML) {
92         // 當可以用 insertAdjacentHTML 方法時
93         if (oElement.insertAdjacentHTML != null) {
94             //sHTML插件 oElement 結束標簽前
95             oElement.insertAdjacentHTML("BeforeEnd", sHTML)
96             return;
97         }
98         //當不可以用 insertAdjacentHTML 方法時
99         var df;    // DocumentFragment
100         var r = oElement.ownerDocument.createRange();
101         r.selectNodeContents(oElement);
102         r.collapse(false);
103         df = r.createContextualFragment(sHTML);
104         oElement.appendChild(df);
105     }
106 };
107
108
109 /*
110  * WebFXCookie class
111  * cookie 操作類
112  */
113 function WebFXCookie() {
114     if (document.cookie.length) { this.cookies = ' ' + document.cookie; }
115 }
116
117 //給 cookie 賦值，方法
118 WebFXCookie.prototype.setCookie = function (key, value) {
119     // 給 cookie 賦值方式,后面沒有指定失效日期，
120     // 則瀏覽器默認是在關閉瀏覽器（也就是關閉所有窗口）之后過期。
121     //escape()  方法是把字符串按 URL 編碼方法來編碼的
122     document.cookie = key + "=" + escape(value);
123 }
124 /**
125  * @function 返回 cookie  中存儲著 key的值。
126  * 1.找到關鍵字在 cookies 中存儲的位置
127  * 2.判斷存儲位署 start 是否為-1，如果為-1表示不存在返回null
128  * 3.檢索start位置到';'的第一個位置，并賦予變量 end
129  * 4.如果 end =-1 ，表示不存在，則把 cookies 的長度賦予它
130  * 5.end -= start ,計算出關鍵字key 的長度.
131  * 6.使用 substr 方法從起始索引號提取字符串中指定數目的字符。
132  * 7.提取'='后至字符串長度減去  '=' 的位置。
133  */
134 WebFXCookie.prototype.getCookie = function (key) {
135     if (this.cookies) {
136         var start = this.cookies.indexOf(' ' + key + '=');
137         if (start == -1) { return null; }
138         var end = this.cookies.indexOf(";", start);
139         if (end == -1) { end = this.cookies.length; }
140         end -= start;
141         var cookie = this.cookies.substr(start,end);
142       // unescqpe 方法，處理從cookie 接收過來的值，并按 URL編碼格式轉換成字符串。
143         return unescape(cookie.substr(cookie.indexOf('=') + 1, cookie.length - cookie.indexOf('=') + 1));
144     }
145     else { return null; }
146 }
147
148
149
150 /*
151  * WebFXTreeAbstractNode class
152  * tree 抽象節點類
153  */
154 function WebFXTreeAbstractNode(sText, sAction) {
155     this.childNodes  = [];
156     this.id     = webFXTreeHandler.getId();
157     this.text   = sText || webFXTreeConfig.defaultText;
158     this.action = sAction || webFXTreeConfig.defaultAction;
159     this._last  = false;
160     webFXTreeHandler.all[this.id] = this;
161 }
162
163 /*
164  * To speed thing up if you're adding multiple nodes at once (after load)
165  * use the bNoIdent parameter to prevent automatic re-indentation and call
166  * the obj.ident() method manually once all nodes has been added.
167  */
168 /**
169  * @function WebFXTreeAbstractNode 類的 add 方法 .
170  * @param node 節點， bNoIdent
171  */
172 WebFXTreeAbstractNode.prototype.add = function (node, bNoIdent) {
173     //將this 對象賦予  node 節點的父節點。
174     node.parentNode = this;
175     //this 節點的添加一個節點是 node 節點。
176     this.childNodes[this.childNodes.length] = node;
177     // 變量 root  節點，由 this 賦予
178     var root = this;
179     //為什么是2呢？因為  節點下標從 0開始數，并且要去掉它本身這個節點。
180     if (this.childNodes.length >= 2) {
181         this.childNodes[this.childNodes.length - 2]._last = false;
182     }
183     // root 變量成為根節點
184     while (root.parentNode) {
185         root = root.parentNode;
186     }
187     //如果樹已經顯示
188     if (root.rendered) {
189         if (this.childNodes.length >= 2) {
190             //document.getElementById(this.childNodes[this.childNodes.length - 2].id + '-plus').src = ((this.childNodes[this.childNodes.length -2].folder)?((this.childNodes[this.childNodes.length -2].open)?webFXTreeConfig.tMinusIcon:webFXTreeConfig.tPlusIcon):webFXTreeConfig.tIcon);
191             //判斷應該顯示的圖片。
192             if(this.childNodes[this.childNodes.length -2].folder){
193                 var _icon ;
194                 if(this.childNodes[this.childNodes.length -2].open){
195                   _icon = webFXTreeConfig.tMinusIcon;
196                 }else{
197                   _icon = webFXTreeConfig.tPlusIcon;
198                 }
199                 document.getElementById(this.childNodes[this.childNodes.length - 2].id + '-plus').src = _icon;
200             }else{
201               document.getElementById(this.childNodes[this.childNodes.length - 2].id + '-plus').src = webFXTreeConfig.tIcon;
202             }
203
204             this.childNodes[this.childNodes.length - 2].plusIcon = webFXTreeConfig.tPlusIcon;
205             this.childNodes[this.childNodes.length - 2].minusIcon = webFXTreeConfig.tMinusIcon;
206             this.childNodes[this.childNodes.length - 2]._last = false;
207         }
208         this._last = true;
209         // 本節點賦予 foo對象
210         var foo = this;
211         while (foo.parentNode) {
212             for (var i = 0; i < foo.parentNode.childNodes.length; i++) {
213                 if (foo.id == foo.parentNode.childNodes[i].id) {
214                     break;
215               }
216             }
217             if (i == foo.parentNode.childNodes.length - 1) {
218                 foo.parentNode._last = true;
219             }
220             else {
221                 foo.parentNode._last = false;
222             }
223             foo = foo.parentNode;
224         }
225         webFXTreeHandler.insertHTMLBeforeEnd(document.getElementById(this.id + '-cont'), node.toString());
226
227         if ((!this.folder) && (!this.openIcon)) {
228             this.icon = webFXTreeConfig.folderIcon;
229             this.openIcon = webFXTreeConfig.openFolderIcon;
230         }
231         if (!this.folder) {
232             this.folder = true;
233             this.collapse(true);
234         }
235         if (!bNoIdent) {
236             this.indent();
237         }
238     }
239     return node;
240 }
241 /**
242  *@function 擴展/折疊方法
243  *1.判斷文件是否折疊
244  *2.如果狀態是打開，執行 collapse ()方法，將其折疊
245  *3.如果狀態是關閉，執行 expand()  方法,將其打開
246  */
247 WebFXTreeAbstractNode.prototype.toggle = function() {
248     if (this.folder) {
249         if (this.open) {
250              this.collapse();
251       }
252         else {
253              this.expand();
254         }
255     }
256 }
257 /**
258  *@function 節點選擇方法
259  *當選擇時此對象得到焦點
260  */
261 WebFXTreeAbstractNode.prototype.select = function() {
262     document.getElementById(this.id + '-anchor').focus();
263 }
264 /**
265  *@function 取消選擇方法
266  *1.節點的className  為空
267  *2.管理表示此節點未選擇
268  */
269 WebFXTreeAbstractNode.prototype.deSelect = function() {
270     document.getElementById(this.id + '-anchor').className = '';
271     webFXTreeHandler.selected = null;
272 }
273 /**
274  *@function 當節點被選中時，執行此得到焦點方法
275  */
276 WebFXTreeAbstractNode.prototype.focus = function() {
277     // 如果選中為空，或者選中的不是本節點，則執行取消選擇方法。
278     if ((webFXTreeHandler.selected) && (webFXTreeHandler.selected != this)) {
279          webFXTreeHandler.selected.deSelect();
280     }
281     //選擇值賦予本節點。
282     webFXTreeHandler.selected = this;
283     //改變圖標
284     if ((this.openIcon) && (webFXTreeHandler.behavior != 'classic')) {
285         document.getElementById(this.id + '-icon').src = this.openIcon;
286     }
287     document.getElementById(this.id + '-anchor').className = 'selected';
288     document.getElementById(this.id + '-anchor').focus();
289     // 如果 onSelect 存在，則執行本節點的  onSelect 方法。猜想：一種擴展方法嗎？？？
290     if (webFXTreeHandler.onSelect) {
291         webFXTreeHandler.onSelect(this);
292     }
293 }
294
295 WebFXTreeAbstractNode.prototype.blur = function() {
296     if ((this.openIcon) && (webFXTreeHandler.behavior != 'classic')) { document.getElementById(this.id + '-icon').src = this.icon; }
297     document.getElementById(this.id + '-anchor').className = 'selected-inactive';
298 }
299
300 /**
301  * @function 節點擴張方法的據體實體。
302  */
303 WebFXTreeAbstractNode.prototype.doExpand = function() {
304     //改變節點的顯示圖標。
305     if (webFXTreeHandler.behavior == 'classic') {
306           document.getElementById(this.id + '-icon').src = this.openIcon;
307     }
308     // 節點下的 div  層狀態為顯示
309     if (this.childNodes.length) {
310           document.getElementById(this.id + '-cont').style.display = 'block';
311   }
312   // 改變節點的狀態為：打開
313     this.open = true;
314     //設定存儲在 cookie 上id為 '1'
315     if (webFXTreeConfig.usePersistence) {
316         webFXTreeHandler.cookies.setCookie(this.id.substr(18,this.id.length - 18), '1');
317      }
318 }
319
320 /**
321  *@function 節點收縮的據體操作
322  */
323 WebFXTreeAbstractNode.prototype.doCollapse = function() {
324     //改變節點的圖標
325     if (webFXTreeHandler.behavior == 'classic') {
326          document.getElementById(this.id + '-icon').src = this.icon;
327     }
328     //改變 div 狀態為隱藏
329     if (this.childNodes.length) {
330          document.getElementById(this.id + '-cont').style.display = 'none';
331     }
332     //改變節點當前狀態是:關閉
333     this.open = false;
334     //設定存儲在  cookie 上的id為‘0’
335     if (webFXTreeConfig.usePersistence) {
336         webFXTreeHandler.cookies.setCookie(this.id.substr(18,this.id.length - 18), '0');
337     }
338 }
339 /**
340  *@function 打開所有的子節點
341  */
342 WebFXTreeAbstractNode.prototype.expandAll = function() {
343     this.expandChildren();
344     if ((this.folder) && (!this.open)) {
345          this.expand();
346     }
347 }
348 /**
349  *@function 打開本節點的子節點。跟 expandAll() 方法合用
350  */
351 WebFXTreeAbstractNode.prototype.expandChildren = function() {
352     for (var i = 0; i < this.childNodes.length; i++) {
353         this.childNodes[i].expandAll();
354     }
355 }
356 /**
357  *@function 關閉所有的節點。
358  */
359 WebFXTreeAbstractNode.prototype.collapseAll = function() {
360     this.collapseChildren();
361     if ((this.folder) && (this.open)) {
362          //有值，表示關閉時，不獲得焦點
363          this.collapse(true);
364     }
365 }
366 /**
367  *@function 關閉本節點的子節點，跟 collapseAll()  方法合用。
368  */
369 WebFXTreeAbstractNode.prototype.collapseChildren = function() {
370     for (var i = 0; i < this.childNodes.length; i++) {
371         this.childNodes[i].collapseAll();
372     }
373 }
374
375
376 WebFXTreeAbstractNode.prototype.indent = function(lvl, del, last, level, nodesLeft) {
377     /*
378      * Since we only want to modify items one level below ourself,
379      * and since the rightmost indentation position is occupied by
380      * the plus icon we set this to -2
381      */
382     if (lvl == null) {
383         lvl = -2;
384     }
385     var state = 0;
386     for (var i = this.childNodes.length - 1; i >= 0 ; i--) {
387         state = this.childNodes[i].indent(lvl + 1, del, last, level);
388         if (state) {
389             return;
390         }
391     }
392     if (del) {
393         if ((level >= this._level) && (document.getElementById(this.id + '-plus'))) {
394             if (this.folder) {
395                 document.getElementById(this.id + '-plus').src = (this.open)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.lPlusIcon;
396                 this.plusIcon = webFXTreeConfig.lPlusIcon;
397                 this.minusIcon = webFXTreeConfig.lMinusIcon;
398             }else if (nodesLeft) {
399                 document.getElementById(this.id + '-plus').src = webFXTreeConfig.lIcon;
400             }
401             return 1;
402       }
403     }
404     var foo = document.getElementById(this.id + '-indent-' + lvl);
405     if (foo) {
406         if ((foo._last) || ((del) && (last))) {
407             foo.src =  webFXTreeConfig.blankIcon;
408         } else {
409             foo.src =  webFXTreeConfig.iIcon;
410         }
411     }
412     return 0;
413 }
414
415
416 /*
417  * WebFXTree class
418  */
419
420 function WebFXTree(sText, sAction, sBehavior, sIcon, sOpenIcon) {
421     //抽象節點操作，將 sText ,sAction 添加到樹節點中
422     this.base = WebFXTreeAbstractNode;
423     this.base(sText, sAction);
424
425     //OR 邏輯運算符特性，如果 sIcon 字符串不為空，那么在 Boolean 中表示 true，返回 sIcon，
426     //如果為空，則返回 webFXTreeConfig.rootIcon 字符串。
427     this.icon      = sIcon || webFXTreeConfig.rootIcon;
428     this.openIcon  = sOpenIcon || webFXTreeConfig.openRootIcon;
429
430     /* Defaults to open */
431     if (webFXTreeConfig.usePersistence) {
432         this.open  = (webFXTreeHandler.cookies.getCookie(this.id.substr(18,this.id.length - 18)) == '0')?false:true;
433     } else {
434         this.open  = true;
435     }
436     // 是否折疊
437     this.folder    = true;
438     // 是否已經瀏覽
439     this.rendered  = false;
440     // 是否選擇
441     this.onSelect  = null;
442     if (!webFXTreeHandler.behavior) {
443          webFXTreeHandler.behavior = sBehavior || webFXTreeConfig.defaultBehavior;
444     }
445 }
446 // 繼承： WebFXTree 繼承 WebFXTreeAbstractNode 所有的方法和屬性。
447 WebFXTree.prototype = new WebFXTreeAbstractNode;
448
449 WebFXTree.prototype.setBehavior = function (sBehavior) {
450     webFXTreeHandler.behavior =  sBehavior;
451 };
452
453 WebFXTree.prototype.getBehavior = function (sBehavior) {
454     return webFXTreeHandler.behavior;
455 };
456
457 /**
458  *@function 樹得到焦點時，返回得到焦點的節點信息
459  */
460 WebFXTree.prototype.getSelected = function() {
461     if (webFXTreeHandler.selected) {
462         return webFXTreeHandler.selected;
463     }
464     else {
465         return null;
466     }
467 }
468 /**
469  * @function 根節點 remove 方法為空，不能刪除根節點吧。
470  */
471 WebFXTree.prototype.remove = function() { }
472
473 /**
474  * @function 擴張方法，即打開根節點下的葉節點。
475  */
476 WebFXTree.prototype.expand = function() {
477     this.doExpand();
478 }
479 /**
480  *@function 收縮方法，即關閉根節點下的所有葉節點。
481  *對象得到焦點
482  */
483 WebFXTree.prototype.collapse = function(b) {
484     if (!b) {
485         this.focus();
486     }
487     this.doCollapse();
488 }
489 /*
490 WebFXTree.prototype.getFirst = function() {
491     return null;
492 }
493
494 WebFXTree.prototype.getLast = function() {
495     return null;
496 }
497
498 WebFXTree.prototype.getNextSibling = function() {
499     return null;
500 }
501
502 WebFXTree.prototype.getPreviousSibling = function() {
503     return null;
504 }
505 */
506 WebFXTree.prototype.keydown = function(key) {
507     if (key == 39) {
508         if (!this.open) { this.expand(); }
509         else if (this.childNodes.length) { this.childNodes[0].select(); }
510         return false;
511     }
512     if (key == 37) { this.collapse(); return false; }
513     if ((key == 40) && (this.open) && (this.childNodes.length)) { this.childNodes[0].select(); return false; }
514     return true;
515 }
516
517 WebFXTree.prototype.toString = function() {
518     var str = "<div id=\"" + this.id + "\" ondblclick=\"webFXTreeHandler.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"return webFXTreeHandler.keydown(this, event)\">" +
519         "<img id=\"" + this.id + "-icon\" class=\"webfx-tree-icon\" src=\"" + ((webFXTreeHandler.behavior == 'classic' && this.open)?this.openIcon:this.icon) + "\" onclick=\"webFXTreeHandler.select(this);\">" +
520         "<a href=\"" + this.action + "\" id=\"" + this.id + "-anchor\" onfocus=\"webFXTreeHandler.focus(this);\" onblur=\"webFXTreeHandler.blur(this);\"" +
521         (this.target ? " target=\"" + this.target + "\"" : "") +
522         ">" + this.text + "</a></div>" +
523         "<div id=\"" + this.id + "-cont\" class=\"webfx-tree-container\" style=\"display: " + ((this.open)?'block':'none') + ";\">";
524     var sb = [];
525     for (var i = 0; i < this.childNodes.length; i++) {
526         sb[i] = this.childNodes[i].toString(i, this.childNodes.length);
527     }
528     this.rendered = true;
529     // 返回字符串值，其中包含了連接到一起的數組的所有元素，元素由指定分隔符分隔開來.
530     return str + sb.join("") + "</div>";
531 };
532
533 /*
534  * WebFXTreeItem class
535  */
536
537 function WebFXTreeItem(sText, sAction, eParent, sIcon, sOpenIcon) {
538     this.base = WebFXTreeAbstractNode;
539     this.base(sText, sAction);
540     /* Defaults to close */
541     if (webFXTreeConfig.usePersistence) {
542         this.open = (webFXTreeHandler.cookies.getCookie(this.id.substr(18,this.id.length - 18)) == '1')?true:false;
543     } else {
544         this.open = false;
545     }
546     if (sIcon) {
547         this.icon = sIcon;
548     }
549     if (sOpenIcon) {
550         this.openIcon = sOpenIcon;
551     }
552     if (eParent) {
553          eParent.add(this);
554     }
555 }
556
557 // WebFXTreeItem 類繼承  WebFXTreeAbstractNode 抽象類所有的屬性和方法。
558 WebFXTreeItem.prototype = new WebFXTreeAbstractNode;
559
560 /**
561  *@function WebFXTreeItem 節點刪除方法
562  */
563 WebFXTreeItem.prototype.remove = function() {
564     var iconSrc = document.getElementById(this.id + '-plus').src;
565     // 父節點
566     var parentNode = this.parentNode;
567     // 上一個兄弟節點
568     var prevSibling = this.getPreviousSibling(true);
569     // 下一個兄弟節點
570     var nextSibling = this.getNextSibling(true);
571     // 父節點的折疊屬性
572     var folder = this.parentNode.folder;
573     // 判斷本節點是不是父節點的最后一個子節點。
574     var last = ((nextSibling) && (nextSibling.parentNode) && (nextSibling.parentNode.id == parentNode.id))?false:true;
575     // 本節點的上一個兄弟節點得到焦點。
576     this.getPreviousSibling().focus();
577
578     this._remove();
579
580     if (parentNode.childNodes.length == 0) {
581         document.getElementById(parentNode.id + '-cont').style.display = 'none';
582         parentNode.doCollapse();
583         parentNode.folder = false;
584         parentNode.open = false;
585     }
586     if (!nextSibling || last) { parentNode.indent(null, true, last, this._level, parentNode.childNodes.length); }
587     if ((prevSibling == parentNode) && !(parentNode.childNodes.length)) {
588         prevSibling.folder = false;
589         prevSibling.open = false;
590         iconSrc = document.getElementById(prevSibling.id + '-plus').src;
591         iconSrc = iconSrc.replace('minus', '').replace('plus', '');
592         document.getElementById(prevSibling.id + '-plus').src = iconSrc;
593         document.getElementById(prevSibling.id + '-icon').src = webFXTreeConfig.fileIcon;
594     }
595     if (document.getElementById(prevSibling.id + '-plus')) {
596         if (parentNode == prevSibling.parentNode) {
597             iconSrc = iconSrc.replace('minus', '').replace('plus', '');
598             document.getElementById(prevSibling.id + '-plus').src = iconSrc;
599 }    }    }
600
601 /**
602  *@function 刪除方法的據體操作
603  */
604 WebFXTreeItem.prototype._remove = function() {
605      //遞歸刪除節點下的所有子節點
606     for (var i = this.childNodes.length - 1; i >= 0; i--) {
607         this.childNodes[i]._remove();
608      }
609      /*
610      * 循環查詢所有的子節點,找到本節點在子節點的位置，將本節點后的節點分別向前占位，并使父節點的節點總量減一。
611      * 如果節點的位置 +1 等于父節點的子節點總數，那么設置父節點的_last 為 true,即最后一個節點。
612      */
613     for (var i = 0; i < this.parentNode.childNodes.length; i++) {
614         if (this == this.parentNode.childNodes[i]) {
615             for (var j = i; j < this.parentNode.childNodes.length; j++) {
616                 this.parentNode.childNodes[j] = this.parentNode.childNodes[j+1];
617             }
618             this.parentNode.childNodes.length -= 1;
619             if (i + 1 == this.parentNode.childNodes.length) {
620                  this.parentNode._last = true;
621             }
622             break;
623       }
624     }
625     //本ID節點為NULL
626     webFXTreeHandler.all[this.id] = null;
627     //得到本節點元素，如果存在讓父元素刪除，
628     var tmp = document.getElementById(this.id);
629     if (tmp) {
630         tmp.parentNode.removeChild(tmp);
631     }
632     //得到本節點元素的子空間，如果存在，刪除。
633     tmp = document.getElementById(this.id + '-cont');
634     if (tmp) {
635         tmp.parentNode.removeChild(tmp);
636     }
637 }
638
639 /**
640  *@function  擴張方法
641  */
642 WebFXTreeItem.prototype.expand = function() {
643     this.doExpand();
644     document.getElementById(this.id + '-plus').src = this.minusIcon;
645 }
646 /**
647  *@function   收縮方法
648  */
649 WebFXTreeItem.prototype.collapse = function(b) {
650     if (!b) { this.focus(); }
651     this.doCollapse();
652     document.getElementById(this.id + '-plus').src = this.plusIcon;
653 }
654 /**
655  *@function 返回第一個節點
656  */
657 WebFXTreeItem.prototype.getFirst = function() {
658     return this.childNodes[0];
659 }
660
661 /**
662  *@function 返回上一個最后的子節點
663  */
664 WebFXTreeItem.prototype.getLast = function() {
665     //如果節點是打開，那么遞歸得到最后一個節點；否則返回這個節點。
666     if (this.childNodes[this.childNodes.length - 1].open) {
667          return this.childNodes[this.childNodes.length - 1].getLast();
668     }else {
669         return this.childNodes[this.childNodes.length - 1];
670     }
671 }
672 /**
673  *@function 獲得本節點的下一個子節點。
674  */
675 WebFXTreeItem.prototype.getNextSibling = function() {
676     for (var i = 0; i < this.parentNode.childNodes.length; i++) {
677         if (this == this.parentNode.childNodes[i]) { break; }
678     }
679     if (++i == this.parentNode.childNodes.length) { return this.parentNode.getNextSibling(); }
680     else { return this.parentNode.childNodes[i]; }
681 }
682
683 /**
684  *@function 獲得本節點的前一個兄弟節點
685  */
686 WebFXTreeItem.prototype.getPreviousSibling = function(b) {
687     //判斷兄弟節點中，本節點所占的下標。
688     for (var i = 0; i < this.parentNode.childNodes.length; i++) {
689         if (this == this.parentNode.childNodes[i]) {
690             break;
691         }
692     }
693     //如果下標 i  為零，即父節點只有一個子節點，反回父節點。
694     if (i == 0) {
695         return this.parentNode;
696     } else {
697         if ((this.parentNode.childNodes[--i].open) || (b && this.parentNode.childNodes[i].folder)) {
698              return this.parentNode.childNodes[i].getLast();
699         }    else {
700             return this.parentNode.childNodes[i];
701       }
702     }
703 }
704
705 WebFXTreeItem.prototype.keydown = function(key) {
706     if ((key == 39) && (this.folder)) {
707         if (!this.open) { this.expand(); }
708         else { this.getFirst().select(); }
709         return false;
710     }
711     else if (key == 37) {
712         if (this.open) { this.collapse(); }
713         else { this.parentNode.select(); }
714         return false;
715     }
716     else if (key == 40) {
717         if (this.open) { this.getFirst().select(); }
718         else {
719             var sib = this.getNextSibling();
720             if (sib) { sib.select(); }
721         }
722         return false;
723     }
724     else if (key == 38) { this.getPreviousSibling().select(); return false; }
725     return true;
726 }
727 /**
728  *@function 返回該對象的字符串表達
729  */
730 WebFXTreeItem.prototype.toString = function (nItem, nItemCount) {
731     var foo = this.parentNode;
732     var indent = '';
733     if (nItem + 1 == nItemCount) { this.parentNode._last = true; }
734     var i = 0;
735     while (foo.parentNode) {
736         foo = foo.parentNode;
737         indent = "<img id=\"" + this.id + "-indent-" + i + "\" src=\"" + ((foo._last)?webFXTreeConfig.blankIcon:webFXTreeConfig.iIcon) + "\">" + indent;
738         i++;
739     }
740     this._level = i;
741     if (this.childNodes.length) { this.folder = 1; }
742     else { this.open = false; }
743     if ((this.folder) || (webFXTreeHandler.behavior != 'classic')) {
744         if (!this.icon) { this.icon = webFXTreeConfig.folderIcon; }
745         if (!this.openIcon) { this.openIcon = webFXTreeConfig.openFolderIcon; }
746     }
747     else if (!this.icon) { this.icon = webFXTreeConfig.fileIcon; }
748     var label = this.text.replace(/</g, '<').replace(/>/g, '>');
749     var str = "<div id=\"" + this.id + "\" ondblclick=\"webFXTreeHandler.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"return webFXTreeHandler.keydown(this, event)\">" +
750         indent +
751         "<img id=\"" + this.id + "-plus\" src=\"" + ((this.folder)?((this.open)?((this.parentNode._last)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.tMinusIcon):((this.parentNode._last)?webFXTreeConfig.lPlusIcon:webFXTreeConfig.tPlusIcon)):((this.parentNode._last)?webFXTreeConfig.lIcon:webFXTreeConfig.tIcon)) + "\" onclick=\"webFXTreeHandler.toggle(this);\">" +
752         "<img id=\"" + this.id + "-icon\" class=\"webfx-tree-icon\" src=\"" + ((webFXTreeHandler.behavior == 'classic' && this.open)?this.openIcon:this.icon) + "\" onclick=\"webFXTreeHandler.select(this);\">" +
753         "<a href=\"" + this.action + "\" id=\"" + this.id + "-anchor\" onfocus=\"webFXTreeHandler.focus(this);\" onblur=\"webFXTreeHandler.blur(this);\"" +
754         (this.target ? " target=\"" + this.target + "\"" : "") +
755         ">" + label + "</a></div>" +
756         "<div id=\"" + this.id + "-cont\" class=\"webfx-tree-container\" style=\"display: " + ((this.open)?'block':'none') + ";\">";
757     var sb = [];
758     for (var i = 0; i < this.childNodes.length; i++) {
759         sb[i] = this.childNodes[i].toString(i,this.childNodes.length);
760     }
761     this.plusIcon = ((this.parentNode._last)?webFXTreeConfig.lPlusIcon:webFXTreeConfig.tPlusIcon);
762     this.minusIcon = ((this.parentNode._last)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.tMinusIcon);
763     return str + sb.join("") + "</div>";
764 }
765
766
767         面向對象的思想來編寫 javascript  語言，運用很多讓人容易忽略的js語言知識，有著 DOM 方式，使整個框架看起來讓人驚嘆。
768 框架原來如此簡單!
769
下載框架

posted on 2009-07-09 09:44 星期五閱讀(1214) 評論(0) 編輯收藏所屬分類: WEB FX

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: web fx xload tree bug xloadtree.js xtree.js Web FX 的 XLoadTree 基本應用 WebFX 的 Xml Extras 基本應用 WebFx的 XTree 基本應用 xtree的基本應用---入門級（轉）

道非道非常道

導航

公告

隨筆分類(92)

文章分類(58)

收藏夾(11)

隨筆檔案(106)

文章檔案(66)

統計

web

天圓

經濟政治軍事

鍵康

xtree.js

道非道 非常道

導航

公告

隨筆分類(92)

文章分類(58)

收藏夾(11)

隨筆檔案(106)

文章檔案(66)

統計

web

天圓

經濟 政治 軍事

鍵康

xtree.js

道非道非常道

經濟政治軍事