DIV CSS 佈局教程網

最近看到大家都練習寫樹，偶也學習學習寫了一個，大家多多批評，我好進步。

不過我看了一些樹的xml文檔都是在xml中就已經有了樹的結構，所以我寫了一個XML文檔不用分層，來生成樹的，不過要給每個節點定義編號和父編號。

寫得有點糙，大家不要笑話，以後逐漸學習在改進。

演示地址: www.lapuasi.com/Javascript/XMLtree

使用方法:
var tree = new XMLTree('tree'); //生成對象
tree.mode = 1; //設置初始模式，默認全部關閉。0全部關閉，1全部展開
tree.createTree(); //輸出樹

Javascript代碼:

運行代碼框
/* JavaScript Document */ /* xmlTree v1.2 ================================= Infomation ---------------------- Author : Lapuasi E-Mail : lapuasi@gmail.com WebSite : http://www.lapuasi.com/Javascript DateTime : 2005-12-25 Example ---------------------- var tree = new xmlTree('tree'); //生成對象 tree.mode = 1; //設置初始模式，默認全部關閉。0全部關閉，1全部展開 tree.createTree(); //輸出樹 for Internet EXPlorer, Mozilla Firefox */ function xmlTree(name) { this.name = name; //實例名稱 this.xmlFile = 'xmltree.xml'; //默認xml文件 this.iconPath = 'images/' //默認圖標路徑 this.iconFolder = 'tree_icon_folder.gif'; //默認文件夾圖標 this.iconFile = 'tree_icon_file.gif'; //默認文件圖標 this.iconOpen = 'tree_arrow_open.gif'; //默認箭頭展開圖標 this.iconOver = 'tree_arrow_over.gif'; //默認箭頭活動圖標 this.iconClose = 'tree_arrow_close.gif'; //默認箭頭關閉圖標 this.mode = 0; //初始模式，默認全部關閉。0全部關閉，1全部展開 this.html = ''; //最終輸出html代碼 this.prevTip = null; //上一次被顯示的tip的時間編號 (內部使用) this.prevSelected = null; //上一次被選中的節點的自動編號 (內部使用) } xmlTree.prototype.createXMLDOM = function() { //生成XMLDOM對象 var xmldom; if (window.ActiveXObject){ var xmldom = new ActiveXObject("Microsoft.XMLDOM"); } else { if (document.implementation && document.implementation.createDocument) { var xmldom = document.implementation.createDocument("","doc",null); } } xmldom.async = false; xmldom.resolveExternals = false; xmldom.validateOnParse = false; xmldom.preserveWhiteSpace = true; return xmldom; } xmlTree.prototype.createTree = function() { //生成並打印 var xmldom = this.createXMLDOM(); document.write('<div id="tree"><\/div>'); // 樹所用層 document.write('<div id="treeTip"><\/div>'); //提示所用層 document.getElementById('treeTip').style.visibility = 'visible'; document.getElementById('treeTip').style.display = 'none'; if (xmldom.load(this.xmlFile)) { this.createNodes(xmldom); } else { this.html = 'Load XML Error'; } document.getElementById('tree').innerHTML = this.html; return; } xmlTree.prototype.getFirstChildData = function(obj, name) { //取得指定名稱節點的第一個子節點的數據 var result = ''; if (typeof(obj) == 'object' && name != null && name != '') { var node = obj.getElementsByTagName(name); if (node != null && node.length > 0) { result = node[0].firstChild.data; } } return result; } xmlTree.prototype.checkChildNodes = function(obj, id) { //檢測是否有分支 var result = false; var nodes = obj.getElementsByTagName('node'); if (nodes != null && nodes.length > 0) { //var pid; for (var i = 0; i < nodes.length; i++) { //pid = nodes[i].getAttribute('parentid'); if (nodes[i].getAttribute('parentid') == id) { result = true; break; } } } return result; } XMLTree.prototype.createNodes = function(obj, id) { //生成指定編號節點的樹 if (typeof(id) == 'undefined') id = null; //如果沒有id傳入則為根節點 var nodes = obj.getElementsByTagName('node'); if (nodes != null && nodes.length > 0) { var modeClass, modeSrc, iconClass, iconSrc; var nid, npid, nname, nicon, nlink, ntarget, nexplain, hasChildNodes; //判斷模式類型，並應用樣式 modeClass = 'close'; modeSrc = this.iconPath + this.iconClose; if (this.mode == 1) { modeSrc = this.iconPath + this.iconOpen; modeClass = 'open'; } if (id == null) modeClass = 'open'; //若為根節點則顯示 this.html += '<ul id="tree_' + id + '_c" class="' + modeClass + '">'; for (var i = 0; i < nodes.length; i++) { npid = nodes[i].getAttribute('parentid'); if (npid == id) { //初始化 modeClass = 'close'; iconClass = 'icon-file'; iconSrc = this.iconPath + this.iconFile; //取得節點編號並檢測 nid = nodes[i].getAttribute('id'); this.html += '<li id="tree_' + nid + '"><span onclick="' + this.name + '.action(this,event);" onmouseover="' + this.name + '.action(this,event);" onmouSEOut="' + this.name + '.action(this,event);">'; //取得節點自定義圖標 //判斷是否含有子節點，並確定箭頭和圖標的圖片及樣式 nicon = this.getFirstChildData(nodes[i], 'icon'); hasChildNodes = this.checkChildNodes(obj, nid); if (hasChildNodes) { iconClass = ''; iconSrc = this.iconPath + this.iconFolder; this.html += '<img id="tree_' + nid + '_a" src="' + modeSrc + '" class="arrow" \/>'; //箭頭 } if (nicon != '') iconSrc = nicon; this.Html += '<img id="tree_' + nid + '_i" src="' + iconSrc + '" class="' + iconClass + '" \/>'; //圖標 //取得節點連接 nlink = this.getFirstChildData(nodes[i], 'link'); if (nlink != '') { nlink = ' href="' + nlink + '"'; } else { nlink = ' href="Javascript:;"'; } //取得節點目標 ntarget = this.getFirstChildData(nodes[i], 'target'); if (ntarget != '') { ntarget = ' target="' + ntarget + '"'; } //取得節點說明 nexplain = this.getFirstChildData(nodes[i], 'explain'); if (nexplain != '') { nexplain = ' onmouseover="' + this.name + '.treeTips(\'' + nexplain + '\');" onmouseout="' + this.name + '.treeTips();"' } //取得節點名稱 nname = this.getFirstChildData(nodes[i], 'name'); this.html += '<a id="tree_' + nid + '_l" onclick="' + this.name + '.action(this,event);"' + nlink + ntarget + nexplain + '>' + nname + '<\/a><\/span>'; //obj.documentElement.removeChild(nodes[i]); if (hasChildNodes) this.createNodes(obj, nid); //迭代子節點 this.html += '<\/li>'; } } this.html += '<\/ul>'; } return; } xmlTree.prototype.action = function(obj, e) { //節點操作 e = e ? e : (window.event ? window.event : null); //獲取操作類型 e = e.type; if (obj.tagName == 'A') { try { this.prevSelected.className = '';} catch(e) {} this.prevSelected = obj; obj.className = 'selected'; } if (obj.tagName == 'SPAN') { var arrow = obj.firstChild; //取得箭頭對象 var borther = obj; while (borther.tagName != 'UL') { //取得分支對象 borther = borther.nextSibling; if (borther == null) break; } if (borther != null) { switch (e) { //檢測操作類型並執行相應代碼 case 'click': if (borther.className == 'open') { borther.className = 'close'; arrow.src = this.iconPath + this.iconClose; } else { borther.className = 'open'; arrow.src = this.iconPath + this.iconOpen; } break; case 'mouseover': if (arrow.tagName == 'IMG' && borther.className == 'close') { arrow.src = this.iconPath + this.iconOver; } break; case 'mouSEOut': if (arrow.tagName == 'IMG' && borther.className == 'close') { arrow.src = this.iconPath + this.iconClose; } break; } } } return; } XMLTree.prototype.treeTips = function(msg) { //提示欄 if (this.prevTip != null) clearTimeout(this.prevTip); var obj = document.getElementById('treeTip'); if (obj != null) { if (this.treeTips.arguments.length < 1) { // hide obj.style.display = 'none'; } else { // show obj.innerHtml = msg; this.prevTip = setTimeout('document.getElementById("treeTip").style.display = "block"',300); document.onmousemove = this.moveToMouseLoc; } } return; } XMLTree.prototype.moveToMouseLoc = function(e) { //移動到鼠標所在位置 var obj = document.getElementById('treeTip'); if (obj != null) { var offsetX = -10, offsetY = 20; var x = 0, y = 0; if (window.event) { x = event.x + document.body.scrollLeft; y = event.y + document.body.scrollTop; } else { x = e.pageX; y = e.pageY; } obj.style.left = x + offsetX + 'px'; obj.style.top = y + offsetY + 'px'; } return; }
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

XML 數據:

運行代碼框
<?XML version="1.0" encoding="utf-8"?> <!-- CODE BY Lapuasi.com [2005-12-14] Explain: =================================================== node 為樹的一個節點，具有以下屬性和內容 屬性 id: 編號，如果不唯一，只取第一個，其余被忽略 (必須, 可以是任意字符組合) parentid: 父編號，沒有則為父節點 (可選, 可以是任意字符組合) 內容 name: 名稱 (必須) link: 連接 (可選) target: 目標 (可選) icon: 圖標 (可選) explain: 說明 (可選) --> <root> <node id="n1"> <name>我的電腦</name> <icon>images/tree_icon_computer.gif</icon> <explain>顯示連接到此計算機的驅動器和硬件</explain> </node> <node id="2" parentid="n1"> <name>硬盤驅動器 (C:)</name> <icon>images/tree_icon_driver.gif</icon> </node> <node id="3"> <name>網上鄰居</name> <icon>images/tree_icon_net.gif</icon> <explain>顯示到網站，網絡計算機和FTP站點的快捷方式</explain> </node> <node id="4" parentid="n1"> <name>硬盤驅動器 (D:)</name> <icon>images/tree_icon_driver.gif</icon> </node> <node id="5" parentid="2"> <name>Windows</name> </node> <node id="6" parentid="3"> <name>menu6</name> </node> <node id="7" parentid="3"> <name>menu7</name> </node> <node id="8" parentid="3"> <name>menu8</name> </node> <node id="9" parentid="7"> <name>menu9</name> </node> <node id="10"> <name>回收站</name> <icon>images/tree_icon_recycler.gif</icon> <explain>包含您已經刪除的文件和文件夾</explain> </node> <node id="11" parentid="5"> <name>system32</name> </node> <node id="12" parentid="11"> <name>system.dll</name> <link>http://www.lapuasi.com</link> <target>_blank</target> </node> <node id="13" parentid="7"> <name>menu13</name> </node> <node id="14" parentid="n1"> <name>DVD 驅動器</name> <icon>images/tree_icon_cdrom.gif</icon> </node> </root>