?? tree.js
字號:
XMLTree.prototype.parseTree = function () {
var state = this.xmlDoc.readyState;
if (state == 4)
{
var err = this.xmlDoc.parseError;
if (err.errorCode != 0) {
alert("菜單樹加載失敗");
return false;
}
else {
this.xmlDoc = this.xmlDoc.childNodes[1];
this.initTree();
this.attachTree();
if (this.parent == null) { //如果這是根的話，則附加事件
if ( this.doc.getAttribute("attchEvented") == null ) {
var f = new Function("event",this.id+".doClick()");
//this.doc.attachEvent("onmouseup",f);
this.doc.attachEvent("onclick",f);
f = new Function("event",this.id+".doDblClick()");
this.doc.attachEvent("ondblclick",f);
f = new Function("event",this.id+".doMouseOver()");
this.doc.attachEvent("onmouseover",f);
f = new Function("event",this.id+".doMouseOut()");
this.doc.attachEvent("onmouseout",f);
this.doc.attchEvented = "1";
}
}
}
}
}
//初始化xml樹
XMLTree.prototype.initTree = function () {
if (this.xmlDoc == null) return;
if (this.parent == null) { //如果這是樹根
this.dblClick = (this.xmlDoc.getAttribute("dbl-click") == "true") ? true : false;
this.openAction = (this.xmlDoc.getAttribute("open-action") == "true") ? true : false;
//指定節點是否已經打開（此節點為根，這是取默認值）
this.isOpened = false;
//節點的樣式和內容賦值（此節點為根，這是取默認值）
this.autoRefresh = (this.xmlDoc.getAttribute("auto-refresh") == "true") ? true : false;
this.textColor = (this.xmlDoc.getAttribute("text-color") == null) ? this.textColor : this.xmlDoc.getAttribute("text-color");
this.overTextColor = (this.xmlDoc.getAttribute("over-text-color") == null) ? this.overTextColor : this.xmlDoc.getAttribute("over-text-color");
this.selectedTextColor = (this.xmlDoc.getAttribute("selected-text-color") == null) ? this.selectedTextColor : this.xmlDoc.getAttribute("selected-text-color");
this.backgroundColor = (this.xmlDoc.getAttribute("background-color") == null) ? this.backgroundColor : this.xmlDoc.getAttribute("background-color");
this.overBackgroundColor = (this.xmlDoc.getAttribute("over-background-color") == null) ? this.overBackgroundColor : this.xmlDoc.getAttribute("over-background-color");
this.selectedBackgroundColor = (this.xmlDoc.getAttribute("selected-background-color") == null) ? this.selectedBackgroundColor : this.xmlDoc.getAttribute("selected-background-color");
this.underLine = (this.xmlDoc.getAttribute("under-line") == "true") ? true : false;
this.overUnderLine = (this.xmlDoc.getAttribute("over-under-line") == "false") ? false : true;
this.selectedUnderLine = (this.xmlDoc.getAttribute("selected-under-line") == "true") ? true : false;
this.fontSize = (this.xmlDoc.getAttribute("font-size") == null) ? this.fontSize : this.xmlDoc.getAttribute("font-size");
this.cursor = (this.xmlDoc.getAttribute("cursor") == null) ? this.cursor : this.xmlDoc.getAttribute("cursor");
this.paddingLeft = (this.xmlDoc.getAttribute("padding-left") == null) ? this.paddingLeft : this.xmlDoc.getAttribute("padding-left");
this.paddingTop = (this.xmlDoc.getAttribute("padding-top") == null) ? this.paddingTop : this.xmlDoc.getAttribute("padding-top");
this.spaceWidth = (this.xmlDoc.getAttribute("space-width") == null) ? this.spaceWidth : this.xmlDoc.getAttribute("space-width");
this.leafPaddingLeft = (this.xmlDoc.getAttribute("leaf-padding-left") == null) ? this.leafPaddingLeft : this.xmlDoc.getAttribute("leaf-padding-left");
this.openFlag = (this.xmlDoc.getAttribute("open-flag") == null) ? this.openFlag : this.xmlDoc.getAttribute("open-flag");
this.closeFlag = (this.xmlDoc.getAttribute("close-flag") == null) ? this.closeFlag : this.xmlDoc.getAttribute("close-flag");
this.openFolder = (this.xmlDoc.getAttribute("open-folder") == null) ? this.openFolder : this.xmlDoc.getAttribute("open-folder");
this.closeFolder = (this.xmlDoc.getAttribute("close-folder") == null) ? this.closeFolder : this.xmlDoc.getAttribute("close-folder");
this.leafImage = (this.xmlDoc.getAttribute("leaf-image") == null) ? this.leafImage : this.xmlDoc.getAttribute("leaf-image");
}
//下面是循環調用，生成此節點節點的每一個子節點
for (var i=0;i<this.xmlDoc.childNodes.length;i++) {
var child = this.xmlDoc.childNodes[i];
var node = new XMLTree(child.getAttribute("id")); //生成一個新節點
node.parent = this; //指定節點的父親
node.root = this.root; //指定節點的根
//指定節點是否已經打開
node.isOpened = (child.getAttribute("opened") == "true") ? true : false;
//節點的樣式和內容賦值
node.ref = (child.getAttribute("ref") == null) ? "" : child.getAttribute("ref");
node.autoRefresh = (child.getAttribute("auto-refresh") == "true") ? true : false;
node.text = (child.getAttribute("text") == null) ? "" : child.getAttribute("text");
node.title = (child.getAttribute("title") == null) ? node.text : child.getAttribute("title");
node.textColor = (child.getAttribute("text-color") == null) ? this.textColor : child.getAttribute("text-color");
node.overTextColor = (child.getAttribute("over-text-color") == null) ? this.overTextColor : child.getAttribute("over-text-color");
node.selectedTextColor = (child.getAttribute("selected-text-color") == null) ? this.selectedTextColor : child.getAttribute("selected-text-color");
node.backgroundColor = (child.getAttribute("background-color") == null) ? this.backgroundColor : child.getAttribute("background-color");
node.overBackgroundColor = (child.getAttribute("over-background-color") == null) ? this.overBackgroundColor : child.getAttribute("over-background-color");
node.selectedBackgroundColor = (child.getAttribute("selected-background-color") == null) ? this.selectedBackgroundColor : child.getAttribute("selected-background-color");
node.underLine = (child.getAttribute("under-line") == "true") ? true : false;
node.overUnderLine = (child.getAttribute("over-under-line") == "false") ? false : true;
node.selectedUnderLine = (child.getAttribute("selected-under-line") == "true") ? true : false;
node.fontSize = (child.getAttribute("font-size") == null) ? this.fontSize : child.getAttribute("font-size");
node.cursor = (child.getAttribute("cursor") == null) ? this.cursor : child.getAttribute("cursor");
node.paddingLeft = (child.getAttribute("padding-left") == null) ? this.paddingLeft : child.getAttribute("padding-left");
node.paddingTop = (child.getAttribute("padding-top") == null) ? this.paddingTop : child.getAttribute("padding-top");
node.spaceWidth = (child.getAttribute("space-width") == null) ? this.spaceWidth : child.getAttribute("space-width");
node.leafPaddingLeft = (child.getAttribute("leaf-padding-left") == null) ? this.leafPaddingLeft : child.getAttribute("leaf-padding-left");
node.openFlag = (child.getAttribute("open-flag") == null) ? this.openFlag : child.getAttribute("open-flag");
node.closeFlag = (child.getAttribute("close-flag") == null) ? this.closeFlag : child.getAttribute("close-flag");
node.openFolder = (child.getAttribute("open-folder") == null) ? this.openFolder : child.getAttribute("open-folder");
node.closeFolder = (child.getAttribute("close-folder") == null) ? this.closeFolder : child.getAttribute("close-folder");
node.leafImage = (child.getAttribute("leaf-image") == null) ? this.leafImage : child.getAttribute("leaf-image");
node.href = (child.getAttribute("href") == null) ? "" : child.getAttribute("href");
this.menuNode[this.menuNode.length] = node; //加入一個新節點
node.xmlDoc = child;
node.initTree(); //遞歸調用，加載此節點的子節點
}
}
//附加文檔對象
XMLTree.prototype.attachTree = function () {
if (this.menuNode.length == 0) return; //如果是沒有加載的引用節點或者是葉子節點，則返回
var container = null;
if (this.parent == null) {
container = this.doc;
}
else {
container = document.createElement("DIV");
container.style.paddingLeft = this.paddingLeft; //設置縮進
container.style.paddingTop = this.paddingTop; //設置上邊距
container.style.width = "100%";
if (this.getType() == "ref") { //如果是引用節點，則標識打開和已經加載
this.isOpened = true;
this.isLoaded = true;
}
if (this.isOpened) {
container.style.display = "block";
}
else {
container.style.display = "none";
}
}
this.doc.appendChild(container);
for (var i=0;i<this.menuNode.length;i++) {
var node = this.menuNode[i];
var oDiv = document.createElement("DIV");
oDiv.id = this.root.id + node.id;
//oDiv.style.width = "100%"; // by janage 去掉這個寬度限制，以允許出現滾動條。
var html = "";
html += '<table title="' + node.title + '"><tr><td style="width:1px;vertical-align:middle;">';
html += (node.getType() == "leaf") ? "" : ('<img src="' + (node.isOpened ? node.openFlag : node.closeFlag) + '">');
html += '</td><td style="width:1px;padding-left:' + ((node.getType() == "leaf") ? node.leafPaddingLeft : node.spaceWidth) + ';vertical-align:middle;"><img src="';
html += (node.getType() == "leaf") ? node.leafImage : (node.isOpened ? node.openFolder : node.closeFolder);
html += '"></td><td style="vertical-align:middle;' + ((node.getType() == "leaf") ? "padding-top:" + node.paddingTop + ";" : "") + 'padding-left:' + node.spaceWidth + ';" nowrap><span style="cursor:' + node.cursor + ';font-size:' + node.fontSize + ';color:' + node.textColor + ';background-color:' + node.backgroundColor + ';text-decoration:' + (node.underLine ? "underline" : "none")+ ';">' + node.text + '</span></td></tr></table>';
oDiv.innerHTML = html;
container.appendChild(oDiv);
node.doc = oDiv; //設置文檔對象
node.attachTree(); //遞歸樹
}
}
//根據傳入的對象找到相應的節點
XMLTree.prototype.getNode = function (oE) {
while (oE.tagName != "DIV" && oE.tagName != "BODY") {
oE = oE.parentElement;
}
if (oE.tagName == "BODY") return;
return this.root.getMenuItem(oE.id.substr(this.root.id.length));
}
//處理onmouseover事件
XMLTree.prototype.doMouseOver = function () {
var oE = window.event.srcElement;
if (oE.tagName != "SPAN") return; //如果不是移出到文字上，直接返回
var node = this.getNode(oE); //得到此節點的對象
if (node == null) return; //如果此節點對象為null，則返回
if (node.isSelected) return; //如果此節點對象已經被選中，則返回
with (oE.style) {
color = node.overTextColor;
backgroundColor = node.overBackgroundColor;
textDecoration = node.overUnderLine ? "underline" : "none";
}
}
//處理onmouseout事件
XMLTree.prototype.doMouseOut = function () {
var oE = window.event.srcElement;
if (oE.tagName != "SPAN") return; //如果不是移動到文字上，直接返回
var node = this.getNode(oE); //得到此節點的對象
if (node == null) return; //如果此節點對象為null，則返回
if (node.isSelected) return; //如果此節點對象已經被選中，則返回
with (oE.style) {
color = node.textColor;
backgroundColor = node.backgroundColor;
textDecoration = node.underLine ? "underline" : "none";
}
}
//處理onclick事件
XMLTree.prototype.doClick = function () {
var oE = window.event.srcElement;
if (oE.tagName != "SPAN" && oE.tagName != "IMG") return; //如果不是單擊到文字或者圖片上，直接返回
var node = this.getNode(oE); //得到此節點的對象
if (node == null) return; //如果此節點對象為null，則返回
var doOpen = false; //標識是否有展開動作
//如果是點擊在文字上
if (oE.tagName == "SPAN") {
if (node.root.selectedNode != node) {
if (node.root.selectedNode != null) node.root.selectedNode.unSelected(); //取消選中上一個被選中的節點
if (!node.isSelected) { //如果當前節點沒有被選中
node.selected(); //選中當前的節點
node.root.selectedNode = node; //記住當前被選中的節點
}
}
if (node.href != "") {
window.location.href = node.href; //定向文字上的鏈接
}
if (!node.root.dblClick) { //如果不是雙擊節點才打開/關閉節點，也就是單擊就打開/關閉節點
if (node.isOpened) {
node.close();
}
else {
node.open();
doOpen = true;
}
}
}
else { //如果是點擊到圖片上，則直接打開/關閉節點
if (node.isOpened) {
node.close();
}
else {
node.open();
doOpen = true;
}
}
if (doOpen) { //如果有展開動作，需要判斷展開動作的行為
if (node.root.openAction) { //說明需要關閉其它節點
node.closeAllNode();
}
}
}
//處理ondblclick事件
XMLTree.prototype.doDblClick = function () {
if (!this.root.dblClick) return; //如果不是必須通過雙擊才展開/關閉節點，則直接返回
var oE = window.event.srcElement;
if (oE.tagName != "SPAN") return; //如果不是雙擊到文字上，直接返回
var node = this.getNode(oE); //得到此節點的對象
if (node == null) return; //如果此節點對象為null，則返回
if (node.root.selectedNode != null) node.root.selectedNode.unSelected(); //取消選中上一個被選中的節點
node.selected(); //選中當前的節點
node.root.selectedNode = node; //記住當前被選中的節點
if (node.href != "") {
window.location.href = node.href; //定向文字上的鏈接
}
if (node.isOpened) {
node.close();
}
else {
node.open();
if (node.root.openAction) { //說明需要關閉其它節點
node.closeAllNode();
}
}
}
//關閉除自身節點之外的所有節點
XMLTree.prototype.closeAllNode = function () {
if (this.parent == null) return; //已經到了根
var parentNode = this.parent;
for (var i=0;i<parentNode.menuNode.length;i++) { //循環關閉每一個子節點
var childnode = parentNode.menuNode[i];
if (childnode.isOpened) { //如果子節點已經打開
if (childnode != this) { //如果子節點不是當前節點
childnode.close();
}
}
}
parentNode.closeAllNode(); //繼續關閉父節點之外的所有節點（遞歸調用）
}
//2.0：將自身節點或者指定的id的節點的父節點展開(2.1修正bug)
XMLTree.prototype.openParent = function (nodeId) {
var node = this.getMenuItem(nodeId);
if (node == null) node = this;
if (node.parent == null) {
return;
}
node.parent.openParent();
node.open();
if (node.root.selectedNode != node) {
if (node.root.selectedNode != null) node.root.selectedNode.unSelected(); //取消選中上一個被選中的節點
if (!node.isSelected) { //如果當前節點沒有被選中
node.selected(); //選中當前的節點
node.root.selectedNode = node; //記住當前被選中的節點
}
}
}
//2.01：將自身節點或者指定href節點的父節點展開
XMLTree.prototype.openParentByHref = function (href) {
var node = this.getMenuItemByHref(href);
if (node == null) return;
node.openParent();
}
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -