我的组件发布：菜单树1.0

我的组件发布：菜单树1.0

要在INTERNET EXPLORER5。0以上才能正常。
请到lostinet.oso.com.cn/public/查看效果
这个组件的使用者不需任何的JS知识。
只要按照规定的格式写就行。
第一，在内容的前面加
<script src="menutree.js">
<style>
span.menutree_option,span.menutree_content {position:absolute;visibility:hidden}
</style>
第二，内容的写法为

这里填标题内容
direction=right

这里填弹出的内容，不过如果层叠了一定要先定义好宽度



这个结构是可以层叠的。其中要注意menutree_title,menutree_option,menutree_content有没有写正确，不要求分大小写
span的层叠就是“菜单”的层叠了。
menutree_option下的选项为
direction 弹出的方向，值可以是 left,right,up,down
clickpopup true表示按了才弹出，其他情况自动弹出。

文件如下


/********************************************************************************************************************************\++++++++
作者:迷失网络[email protected]
版本:1.01修正了链接不能正常使用的BUG
版权:归[email protected]所有。
说明:
如果一个Tile下有多个Content，只显示最后一个Content
如果一个Tile下有多个Option，只使用最后一个Option
如果一个Option下有多个同名设定，只使用最后一个设定
选项String
direction :down,up,left,right
clickpopup :true,false
\********************************************************************************************************************************/

var MenuTree_StringSplitOption=";";
var MenuTree_StringSplitSet="=";
var MenuTree_StringStyle="<style>"

+ " Span.MenuTree_Title {cursor:default} "
+ " Span.MenuTree_Option {position:absolute;visibility:hidden;left:0;top:0} "
+ " Span.MenuTree_Content {cursor:auto;padding:4;position:absolute;visibility:hidden;left:0;top:0;border-width:1;border-style:outset;background-color:burlywood} "

+"</style>";
var MenuTree_ArrayItem=new Array();
var MenuTree_ArrayTitleMapIndex=new Array();
var MenuTree_ArrayPopup=new Array();
var MenuTree_CurrentPopup=null;

document.write(MenuTree_StringStyle);

window.attachEvent("onload",MenuTree_ContructAll);
document.attachEvent("onclick",MenuTree_Document_OnClick);

/****************************************************************\++++
Class
\****************************************************************/
function MenuTree_MenuItem()
{
this.Title=null;
this.Content=null;
this.IsPopup=false;
this.Option=new MenuTree_MenuOption();
}
function MenuTree_MenuOption()
{
this.Text="";
this.Direction="down";
this.ClickPopup=false;

this.SetOptionByText=MenuTree_MenuOption_SetOptionByText;
function MenuTree_MenuOption_SetOptionByText()
{
var ArrayOption=this.Text.toLowerCase().replace(" ","").replace("\t","").split(MenuTree_StringSplitOption);
for(var i=0;i<ArrayOption.length;i++)
{
var ArrayEntry=ArrayOption[i].split(MenuTree_StringSplitSet);
if(ArrayEntry.length!=2)continue;
switch(ArrayEntry[0])
{
case "direction":
switch(ArrayEntry[1])
{
case "left":
case "right":
case "up":
case "down":
this.Direction=ArrayEntry[1];
break;
default:
this.Direction="down";
}
break;
case "clickpopup":
switch(ArrayEntry[1])
{
case "true":
this.ClickPopup=true;
break;
default:
this.ClickPopup=false;
}
break;
}
}
}
}
/****************************************************************\----
Class
\****************************************************************/

/****************************************************************\++++
Function
\****************************************************************/

function MenuTree_PopupList_Add(Item)
{
Item.IsPopup=true;
MenuTree_ArrayPopup[Item.Title.uniqueID]=Item.Title.uniqueID;
}
function MenuTree_PopupList_Del(Item)
{
Item.IsPopup=false;
delete MenuTree_ArrayPopup[Item.Title.uniqueID];
}
function MenuTree_IsParentContainer(Parent,Object)
{
if(!Object)return false;
try
{
var o=Object;
while(o=o.parentElement)
{
if(o==Parent)return true;
}
}catch(x){return false;}
return false;
}
function MenuTree_GetContainer(Object,ClassName)
{
if(!Object)return false;
var o=Object;
while(o=o.parentElement)
{
if(
MenuTree_ObjectIsClass(o,ClassName)
)return o;
}
return false;
}
function MenuTree_GetSourceElement(Object,ClassName)
{
if(!Object)return false;
var o=Object;
do
{
if(
MenuTree_ObjectIsClass(o,ClassName)
)return o;
}while(o=o.parentElement);
return false;
}
function MenuTree_ObjectIsClass(Object,ClassName)
{
try
{
if(Object.tagName.toLowerCase()=="span"&&Object.className.toLowerCase()==ClassName.toLowerCase())
return true;
}catch(x){return false;}
return false;
}
/********************************\++++
Function-Popup
\********************************/
function MenuTree_PopupContent(oTitle)
{
if(!oTitle)return false;
var oParentTitle=MenuTree_GetContainer(oTitle,"MenuTree_Title");
var oParentContent=MenuTree_GetContainer(oTitle,"MenuTree_Content");
if(oParentTitle)
{
if(MenuTree_ArrayPopup[oParentTitle.uniqueID])
{
MenuTree_CloseChildContent(oParentTitle);
return MenuTree_PopupThisContent(oTitle);
}
MenuTree_PopupContent(oParentTitle);
MenuTree_CloseChildContent(oParentTitle);
}
else
{
MenuTree_CloseAllContent();
}
MenuTree_PopupThisContent(oTitle);
}

function MenuTree_PopupThisContent(oTitle,x,y)
{
try
{
var Item=MenuTree_ArrayItem[MenuTree_ArrayTitleMapIndex[oTitle.uniqueID]];
var o=Item.Title;
var l=0;
var t=0;
do
{
if(o.currentStyle.position.toLowerCase()=="absolute")
break;
l+=o.offsetLeft;
t+=o.offsetTop;
}while(o=o.offsetParent);
if(x)l=x;
if(y)t=y;
switch(Item.Option.Direction)
{
case "left":
Item.Content.style.pixelLeft=l-Item.Content.offsetWidth;
Item.Content.style.pixelTop=t;
break;
case "right":
Item.Content.style.pixelLeft=l+Item.Title.offsetWidth-7;//I don't know why there have 7 between.....
Item.Content.style.pixelTop=t;
break;
case "up":
Item.Content.style.pixelLeft=l;
Item.Content.style.pixelTop=t-Item.Content.offsetHeight;
break;
case "down":
Item.Content.style.pixelLeft=l;
Item.Content.style.pixelTop=t+Item.Title.offsetHeight;
default:
}
var oParentContent=MenuTree_GetContainer(o);
if(oParentContent)
Item.Content.style.zIndex=oParentContent.currentStyle.zIndex+1;
Item.Content.style.visibility="visible";
MenuTree_PopupList_Add(Item);
MenuTree_CurrentPopup=oTitle;
return true;
}catch(x){return false;}
return false;
}
/********************************\----
Function-Popup
\********************************/
/********************************\+++++
Function-Close
\********************************/
function MenuTree_CloseAllContent()
{
for(var i in MenuTree_ArrayPopup)
{
Item=MenuTree_ArrayItem[MenuTree_ArrayTitleMapIndex[MenuTree_ArrayPopup[i]]];
MenuTree_CloseThisContent(Item.Title);
}
MenuTree_CurrentPopup=false;
}
/*
function MenuTree_CloseContent(oTitle)
{
if(!oTitle)return false;

}
*/

function MenuTree_CloseThisContent(oTitle)//Private Function-For MenuTree_CurrentPopup Not Set...
{
if(!oTitle)return false;
try
{
MenuTree_ArrayItem[MenuTree_ArrayTitleMapIndex[oTitle.uniqueID]].Content.style.visibility="hidden";
MenuTree_ArrayItem[MenuTree_ArrayTitleMapIndex[oTitle.uniqueID]].Content.style.pixelLeft=0;
MenuTree_ArrayItem[MenuTree_ArrayTitleMapIndex[oTitle.uniqueID]].Content.style.pixelTop=0;
MenuTree_PopupList_Del(MenuTree_ArrayItem[MenuTree_ArrayTitleMapIndex[oTitle.uniqueID]]);

}catch(x){return false;}
return true;
}
function MenuTree_CloseChildContent(oTitle)
{
if(!oTitle)return false;
for(var i in MenuTree_ArrayPopup)
{
Item=MenuTree_ArrayItem[MenuTree_ArrayTitleMapIndex[MenuTree_ArrayPopup[i]]];
if(MenuTree_IsParentContainer(oTitle,Item.Title))
MenuTree_CloseThisContent(Item.Title);
}
MenuTree_CurrentPopup=false;
}
/********************************\----
Function-Close
\********************************/
function MenuTree_ConstructMenu(oTitle)
{
if(!MenuTree_ObjectIsClass(oTitle,"MenuTree_Title"))return false;
if(typeof(MenuTree_ArrayTitleMapIndex[oTitle.uniqueID])!="undefined")return false;
var index=MenuTree_ArrayItem.length;
MenuTree_ArrayItem[index]=new MenuTree_MenuItem();
MenuTree_ArrayItem[index].Title=oTitle;
MenuTree_ArrayTitleMapIndex[oTitle.uniqueID]=index;

for(var j=0;j<oTitle.childNodes.length;j++)
{
var oChild=oTitle.childNodes.item(j);
if(MenuTree_ObjectIsClass(oChild,"MenuTree_Content"))
{
MenuTree_ArrayItem[MenuTree_ArrayTitleMapIndex[oTitle.uniqueID]].Content=oChild;
oChild.attachEvent("onclick",MenuTree_Content_OnMouseClick);
}
if(MenuTree_ObjectIsClass(oChild,"MenuTree_Option"))
{
MenuTree_ArrayItem[MenuTree_ArrayTitleMapIndex[oTitle.uniqueID]].Option.Text=oChild.innerText.replace(" ","").replace("\t","");
MenuTree_ArrayItem[MenuTree_ArrayTitleMapIndex[oTitle.uniqueID]].Option.SetOptionByText();
}
}

oTitle.attachEvent("onmouseover",MenuTree_Title_OnMouseOver);
oTitle.attachEvent("onclick",MenuTree_Title_OnMouseClick);

return true;
}
/****************************************************************\----
Function
\****************************************************************/

function MenuTree_Document_OnClick()
{
if(MenuTree_CurrentPopup)MenuTree_CloseAllContent();
}
function MenuTree_ContructAll()
{
var allSpan=document.all.tags("SPAN");
var length=allSpan.length;
var oSpan=null;
for(var i=0;i<length;i++)
{
oSpan=allSpan.item(i);
if(!MenuTree_ObjectIsClass(oSpan,"MenuTree_Title"))continue;
MenuTree_ConstructMenu(oSpan);
}
}
function MenuTree_Title_OnMouseOver()
{
var oTitle,Item,oContent;
if(!(oTitle=MenuTree_GetSourceElement(event.srcElement,"MenuTree_Title")))return false;
if(oContent=MenuTree_GetSourceElement(event.srcElement,"MenuTree_Content"))
{
if(MenuTree_IsParentContainer(oTitle,oContent))
{
event.cancelBubble=true;
return event.returnValue=false;
}
}
if(!(Item=MenuTree_ArrayItem[MenuTree_ArrayTitleMapIndex[oTitle.uniqueID]]))return false;
if(!Item.Option.ClickPopup)
{
MenuTree_PopupContent(oTitle);
}
}
function MenuTree_Title_OnMouseClick()
{
var oTitle,Item;
if(!(oTitle=MenuTree_GetSourceElement(event.srcElement,"MenuTree_Title")))return false;
if(!(Item=MenuTree_ArrayItem[MenuTree_ArrayTitleMapIndex[oTitle.uniqueID]]))return false;
if(Item.Option.ClickPopup)
{
MenuTree_PopupContent(oTitle);
}
// event.returnValue=false;
event.cancelBubble=true;
}
function MenuTree_Content_OnMouseClick()
{
event.cancelBubble=true;
/*
var oTitle,Item;
if(!(oTitle=MenuTree_GetSourceElement(event.srcElement,"MenuTree_Title")))return false;
if(!(Item=MenuTree_ArrayItem[MenuTree_ArrayTitleMapIndex[oTitle.uniqueID]]))return false;
MenuTree_PopupContent(oTitle);
*/
}
/********************************************************************************************************************************\--------
End-Script
\********************************************************************************************************************************/



<head>
<style>
span.menutree_content { position: absolute; visibility: hidden }
span.menutree_option { position: absolute; visibility: hidden }
body {background-color:ghostwhite;color:midnightblue}
a {text-decoration:none;color:mediumblue}
a:hover {text-decoration:underline;color:snow}
a.anchor:hover {color:lime}
.anchor {color:mediumblue}
</style>
<script src=menutree.js>

</script>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
</head>

<body>
<a class=anchor href=http://yeahboy.oso.com.cn>http://yeahboy.oso.com.cn</a> 
<a class=anchor href=http://lostinet.oso.com.cn>http://lostinet.oso.com.cn</a>

友情链接 clickpopup=false 同学的
>> direction=right 
<a href="http://">同学1的主页</a> 
<a href="http://">同学2的主页</a> 
<a href="http://">同学3的主页</a> 
<a href="http://">同学4的主页</a> 
友情链接 clickpopup=false 同学的
>> direction=right 
<a href="http://">同学1的主页</a> 
<a href="http://">同学2的主页</a> 
<a href="http://">同学3的主页</a> 
<a href="http://">同学4的主页</a> 
 
网友的 >> direction=right 
<a href="http://">网友1的主页</a> 
<a href="http://">网友2的主页</a> 
<a href="http://">网友3的主页</a> 
<a href="http://">网友4的主页</a> 
 
相关的 >> direction=right 
<a href="http://">公司1的主页</a> 
<a href="http://">公司2的主页</a> 
<a href="http://">公司3的主页</a> 
<a href="http://">公司4的主页</a> 

 
网友的 >> direction=right 
<a href="http://">网友1的主页</a> 
<a href="http://">网友2的主页</a> 
<a href="http://">网友3的主页</a> 
<a href="http://">网友4的主页</a> 
 
相关的 >> direction=right 
<a href="http://">公司1的主页</a> 
<a href="http://">公司2的主页</a> 
<a href="http://">公司3的主页</a> 
<a href="http://">公司4的主页</a> 

友情链接 clickpopup=false 同学的
>> direction=right 
<a href="http://">同学1的主页</a> 
<a href="http://">同学2的主页</a> 
<a href="http://">同学3的主页</a> 
<a href="http://">同学4的主页</a> 
 
网友的 >> direction=right 
<a href="http://">网友1的主页</a> 
<a href="http://">网友2的主页</a> 
<a href="http://">网友3的主页</a> 
<a href="http://">网友4的主页</a> 
 
相关的 >> direction=right 
<a href="http://">公司1的主页</a> 
<a href="http://">公司2的主页</a> 
<a href="http://">公司3的主页</a> 
<a href="http://">公司4的主页</a> 
友情链接 clickpopup=false 同学的
>> direction=right 
<a href="http://">同学1的主页</a> 
<a href="http://">同学2的主页</a> 
<a href="http://">同学3的主页</a> 
<a href="http://">同学4的主页</a> 
 
网友的 >> direction=right 
<a href="http://">网友1的主页</a> 
<a href="http://">网友2的主页</a> 
<a href="http://">网友3的主页</a> 
<a href="http://">网友4的主页</a> 
 
相关的 >> direction=right 
<a href="http://">公司1的主页</a> 
<a href="http://">公司2的主页</a> 
<a href="http://">公司3的主页</a> 
<a href="http://">公司4的主页</a> 




同学的
>> direction=right 
<a href="http://">同学1的主页</a> 
<a href="http://">同学2的主页</a> 
<a href="http://">同学3的主页</a> 
<a href="http://">同学4的主页</a> 
 
网友的 >> direction=right 
<a href="http://">网友1的主页</a> 
<a href="http://">网友2的主页</a> 
<a href="http://">网友3的主页</a> 
<a href="http://">网友4的主页</a> 
 
相关的 >> direction=right 
<a href="http://">公司1的主页</a> 
<a href="http://">公司2的主页</a> 
<a href="http://">公司3的主页</a> 
<a href="http://">公司4的主页</a> 




m
e
n
u
t
r
e
e


标题。。。
direction=right;clickpopup=true


这里放什么都可以啊。。。不过要注意宽度。。和高度


 标题。。。
 direction=down;clickpopup=false
 
 span的重叠就是菜单的重叠了。要注意menutree_option的不同。
 和样式的继承
 
 


 标题。。。 
 direction=down;clickpopup=false
 
 span的重叠就是菜单的重叠了。要注意menutree_option的不同。
 和样式的继承
 






</body>
<script>
function document.oncontextmenu()
{
MenuTree_CloseAllContent();
MenuTree_PopupThisContent(titleCM,document.body.scrollLeft+event.clientX,document.body.scrollTop+event.clientY);
event.cancelBubble=true;
return event.returnValue=false;
}
function document.onkeypress()
{
MenuTree_PopupContent(lastmenu);
}
ts=document.all.tags("SPAN");
for(i=0;i<ts.length;i++)
{
if(ts.item(i).className.toLowerCase()=="highlight")
{
ts.item(i).attachEvent("onmouseover",otmover);
ts.item(i).attachEvent("onmouseout",otmout);
}
}
function otmover()
{
event.srcElement.style.backgroundColor="lightsteelblue";
}
function otmout()
{
event.srcElement.style.backgroundColor="";
}
</script>