tree.js

电信的网厅的整站代码

		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%";
		var html = "";
		html += '<table style="width:100%" 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 + ';"><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();
}