/*********************************************************
* TreeView.js
* Auther : DeluxWorld
*
/*******************************************************/
var mMenu = new Array();
var toItemIndex = 0;
var onItemIndex = 0;
var focusId = "";
/*
* tree constructor
* @param
* @return tree object
*/
function Tree() {
this.setHeadHeight = setHeadHeight;
this.setLayerTop = setLayerTop;
this.setLayerLeft = setLayerLeft;
this.setLayerWidth = setLayerWidth;
this.setTitleHeight = setTitleHeight;
this.setContentHeight = setContentHeight;
this.imagePath = "";
this.iconPath = "";
this.setImagePath = setImagePath;
this.getImagePath = getImagePath;
this.setIconPath = setIconPath;
this.getIconPath = getIconPath;
this.build = build;
this.show = show;
return this;
}
/*
*设置标题的高度
*/
function setHeadHeight(headHeight) {
this.headHeight = headHeight;
}
/*
*设置顶边距
*/
function setLayerTop(layerTop) {
this.layerTop = layerTop;
}
/*
*设置左边距
*/
function setLayerLeft(layerLeft) {
this.layerLeft = layerLeft;
}
/*
*设置区域宽度
*/
function setLayerWidth(layerWidth) {
this.layerWidth = layerWidth;
}
/*
*设置标题栏高度
*/
function setTitleHeight(titleHeight) {
this.titleHeight = titleHeight;
}
/*
*设置内容区高度
*/
function setContentHeight(contentHeight) {
this.contentHeight = contentHeight;
}
/*
* 把子节点添加到树
* @param menu 子节点对象
* @return 子节点在树上的id
*/
function regsterMainNode(menu) {
mMenu[mMenu.length] = menu;
return mMenu.length-1;
}
/*
* 构造子节点对象
* @param tree 树对象
* capture 节点对象标题
* img 节点对应背景图片名称
* @return 节点对象
*/
function mainNode(tree, capture, backImg) {
this.items = new Array(); //存放叶子节点
this.tree = tree;
this.backImg = backImg;
if( tree.imagePath != "" ){
this.mainImg = tree.imagePath + this.backImg;
this.img = tree.imagePath + this.prexImg;
//alert("this.mainImg="+this.mainImg);
}else{
alert("img的路径为空!请确认");
return;
}
//子节点内容
if(capture == null || capture == ""){
alert("capture不能为空,请确认!");
}else{
this.mainCapture = capture;
}
this.id = regsterMainNode(this);
}
/*
* 构造叶子节点对象
* @param tree 树对象
* capture 节点对象标题
* link 超连接文件名
* icon 节点图片
* target 连接对象的显示位置
* @return 叶子节点对象
*/
function subNode(tree, capture, link, target, icon) {
this.tree = tree;
this.link = link;
this.icon = icon;
this.target = target;
if(tree.iconPath != ""){
this.subIcon = tree.iconPath + this.icon;
}else{
alert("icon不能为空,请确认");
return false;
}
if(capture == null && capture == ""){
alert("capture不能为空,请确认!");
return false;
}else{
this.subCapture = capture;
}
}
/*
* 向子节点中添加页子节点
* @param item 叶子节点对象
* @return
*/
mainNode.prototype.addSubNode = function(item) {
this.items[this.items.length] = item;
}
/*
* 生成nodeHTML串
* @param array mmenu 全局数组
* @return
*/
function build(mmenu) {
var nodeHTML="";
nodeHTML += "<link href=/"tree.css/" rel=/"stylesheet/" type=/"text/css/">"
nodeHTML += "<span id=itemsLayer style=/"position:absolute;overflow:hidden;border:0px solid #008800;left:'"+this.layerLeft+"';top:'"+this.layerTop+"';width:'"+this.layerWidth+"';/">"
for(var i=0; i<mmenu.length; i++){
var rootid = "root"+i;
nodeHTML += "<div id=node"+i+" style=/"LEFT: 0px; WIDTH: "+this.layerWidth+"; POSITION: relative; itemIndex=/""+i+"/"><TABLE cellSpacing=0 cellPadding=0 width=/"100%/"><TBODY><TR><TD class=titleStyle οnclick='on_click("+i+");return false;' align=middle height=" + this.titleHeight + " background="+ ">"
+"<input class=btn type=button value=" + mmenu[i].mainCapture +" id="+ rootid+ " οnfοcus="+"getFocusId()" +" style=/"background-image: url("+mmenu[i].mainImg+");/">"
+"</TD></TR>"
if(mmenu[i].items.length != 0){
nodeHTML += "<TR><TD class=leafdiv ><div class=leafdiv id=item"+i+" style=/"overflow:auto;display:none;/">"
for(var q=0; q<mmenu[i].items.length; q++){
var link = mmenu[i].items[q].link;
var icon = mmenu[i].items[q].subIcon;
var hrefid = "leaf"+i+"-"+q;
nodeHTML += "<BR><CENTER>"
+ "<img class=picdiv src="+icon+">"+" "+"<a class=leaf id="+hrefid+" href="+link+" οnfοcus="+"getFocusId()"+">"+mmenu[i].items[q].subCapture+"</a>"+"</CENTER>"
}
nodeHTML += "</div></TD></TR>"
}else{
nodeHTML += "<TR><TD class=leafdiv ><div class=leafdiv id=item"+i+" style=/"overflow:auto;display:none;/">"
nodeHTML += "</div></TD></TR>"
}
nodeHTML += "</TBODY></TABLE></DIV> "
}
nodeHTML += "</span>";
return nodeHTML;
}
/*
* 将生成的nodeHTML写入页面
* @param
* @return
*/
function show() {
var htmlStr = this.build(mMenu);
document.write(htmlStr);
}
/*
* 子节点显示或隐藏,在节点被点击后触发
* @param num 节点对应id
* @return
*/
function on_click(num) {
this.whichEl = eval("item"+num);
for(var i=0; i<mMenu.length; i++){
if (i == num)
continue;
var unknown = eval("item"+i);
if(unknown.style.display == "block"){
unknown.style.display = "none";
break;
}
}
if (whichEl.style.display == "none"){
whichEl.style.display = "block";
}else {
whichEl.style.display = "none";
}
}
/*
* 设置节点背景图标存放路径
* @param ip 背景图片路径
* @return
*/
function setImagePath(ip) {
this.imagePath = ip + "/";
}
/*
* 返回子节点背景图片路径
* @param
* @return imagePath
*/
function getImagePath() {
return this.imagePath;
}
/*
* 设置页子节点超连接路径
* @param ip 超连接路径
* @return
*/
function setIconPath (lp) {
this.iconPath = lp + "/";
}
/*
* 返回页子节点图标路径
* @param ip 页子节点图标路径
* @return
*/
function getIconPath() {
return this.iconPath;
}
/*
* 设置显示根节点否
* @param ip boolean
* @return
*/
function setShowRoot(sr) {
this.showRoot = sr;
}
//Enter事件
function treeEnter() {
expandCompressNodeByEnter(focusId);
}
//向上键,焦点指向上一节点
function treeUp() {
preNode(focusId);
}
//向下键,焦点指向下一个节点
function treeDown() {
nextNode(focusId);
}
//向右键,焦点指向下一节点
function treeRight() {
nextNode(focusId);
}
//向左键,焦点指向上一节点
function treeLeft() {
preNode(focusId);
}
/*
* 下一个节点(子节点,叶子节点)
* @param currentNode 当前节点id
* @return
*/
function nextNode(nodeid) {
this.currentNode = nodeid;
this.prex = currentNode.substring(0, 4);
if(prex == "root"){
var rootid = currentNode.substring(4, currentNode.length);
var divItem = "item"+rootid;
//节点有叶子节点并且为展开,焦点移到叶子节点
if(mMenu[rootid].items.length >=1 && document.getElementById(divItem).style.display =="block"){
document.getElementById("leaf"+rootid+"-0").focus();
}
else if(document.getElementById(divItem).style.display == "none" && rootid < mMenu.length-1){
document.getElementById("root"+(parseInt(rootid)+1)).focus();
}else{
document.getElementById("root0").focus();
}
}else{
var index,rootId,leafid;
index = currentNode.indexOf("-");
rootId = currentNode.substring(4,index);
leafid = currentNode.substring(index+1,currentNode.length);
if(leafid < mMenu[rootId].items.length-1){
document.getElementById("leaf"+rootId+"-"+(parseInt(leafid)+1)).focus();
}
else if(leafid == mMenu[rootId].items.length-1){
document.getElementById("root"+(parseInt(rootId)+1)).focus();
}
else{
document.getElementById("root0").focus();
}
}
}
/*
* 上一个节点(子节点,叶子节点)
* @param currentNode 当前节点id
* @return
*/
function preNode(nodeid) {
this.currentNode = nodeid;
this.prex = currentNode.substring(0,4);
if(prex == "root"){
var rootid = currentNode.substring(4,currentNode.length);
var divItem = "item"+(rootid-1);
if(rootid == 0){
return;
}else if(rootid !=0 && document.getElementById(divItem).style.display == "block")
document.getElementById("leaf"+(rootid-1)+"-"+(mMenu[rootid-1].items.length-1)).focus();
else
document.getElementById("root"+(rootid-1)).focus();
}else{
var index,rootid,leafid;
index = currentNode.indexOf("-");
rootid = currentNode.substring(4,index);
leafid = currentNode.substring(index+1,currentNode.length);
if (leafid > 0)
{
document.getElementById("leaf"+rootid+"-"+(parseInt(leafid)-1)).focus();
}else if (leafid == 0)
{
document.getElementById("root"+rootid).focus();
}
}
}
/**
* 响应回车键事件,若焦点在子节点上,enter键响应打开叶子
* 若焦点在叶子上,则打开叶子相应的连接
* @param currentNode 当前节点id
* @return
*/
function expandCompressNodeByEnter(nodeId) {
this.nodeid = nodeId;
this.prex = nodeid.substring(0,4);
this.id = parseInt(nodeid.substring(4,nodeid.length));
if(prex == "node"){
on_click(id);
}else{
//do nothing
}
}
/**
* 返回树中div的数量
* @param
* @return
*/
function divCount() {
return mMenu.length*2;
}
/*
*焦点移到树上,触发该事件
*/
function treeActive() {
var tree_obj = document.getElementById('node0');
if (typeof(tree_obj) != 'undefined')
{
tree_obj.focus();
}
}
/*
* 用组合键||快捷键控制焦点在树上的移动
*/
document.attachEvent('onkeydown', function(e) {
e = e || window.event;
var key_code = e.which || e.keyCode;
if(e.altKey && key_code == 82) {
document.getElementById("root0").focus();
}
switch(key_code){
case (37):
treeUp();
break;
case (38):
treeUp();
break;
case (39):
treeDown();
break;
case (40):
treeDown();
break;
default:
break;
}
});
/*
*根据焦点获得控件的id
*/
function getFocusId() {
focusId = document.activeElement.id;
}