道非道非常道

勤思、謹言、慎行、厚積、薄發

公告

在非洲,
瞪羚每天早上醒來時，
他知道自己必須跑的比最快的獅子還快，
否則就會被吃掉。
獅子每天早上醒來時，
他知道自己必須追上跑的最慢的瞪羚，
否則就會被餓死。
不管你是獅子還是瞪羚，
當太陽升起時,你最好開始奔跑。
－－－－摘自＜世界是平的＞－托馬斯．弗里德曼

隨筆分類(92)

文章分類(58)

收藏夾(11)

隨筆檔案(106)

文章檔案(66)

統計

隨筆 - 117
文章 - 67
評論 - 14
引用 - 0

鍵康

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 星期五閱讀(1218) 評論(0) 編輯收藏所屬分類: WEB FX

新用戶注冊刷新評論列表


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




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

道非道 非常道

導航

公告