<script language="javascript">
<!--/*类名:CascadeMenu
属性:
collapse 此菜单是否折起
level 菜单级别
Child 子菜单对象数组
name 对应层的ID
title 标题
url 链接
width 宽度
height 高度
方法:Draw() 绘制菜单
AddChild(title,url)构造子项
Expand(id)展开/折叠菜单
全局变量:
CollapseImage 全局变量,定义一级菜单收起时的图标
ExpandImage 全局变量,定义一级菜单展开时的图标
作者:heroman
版权:免费使用,可以任意修改,但请勿移除本段文字
*/var CollapseImage="http://img.163.com/club/uh/line_01.gif";//全局变量,定义一级菜单收起时的图标
var ExpandImage="http://img.163.com/club/uh/line_02.gif";//全局变量,定义一级菜单展开时的图标
function Expand()
{ this.collapse=!this.collapse
var i;
var ChildObj;
if (this.Child.length>0)
{
for (i in this.Child)
{
ChildObj=this.Child[i];
if (document.all(ChildObj.name).style.display=="none")
document.all(ChildObj.name).style.display="block";
else
ChildObj.Collapse();
}
if (!this.collapse)
document.all(this.name+"_Image").src=ExpandImage;
else
document.all(this.name+"_Image").src=CollapseImage;
}
}function Collapse()
{
var i;
this.Hide();
for(i in this.Child)
{
this.Child[i].Collapse();
}
}function AddChild(ChildObject)
{
this.Child[this.Child.length]=ChildObject;
}function Draw()
{ var space="";
var i=1;
while (i<=(this.level-1)*2)
{
space=space+" ";
i=i+1;
}
document.write ("<div id='"+this.name+"' style='display:block;padding-bottom:5px;width="+this.width+"px;height="+this.height+"px'>"+space+"<img id='"+this.name+"_Image' src='"+CollapseImage+"' border=0 align=absmiddle alt='click it to Expand/Collapse This Tree' onclick=try{"+this.name+".Expand()}catch(e){alert(e.toString())}> <a href='"+this.url+"'>"+this.title+"</a></div>");
if (this.Child.length>0)
{
var ChildObj;
for (i in this.Child)
{
ChildObj=this.Child[i];
ChildObj.Draw();
//ChildObj.HideLevel();
}
this.HideLevel();
}
}function Hide()
{
document.all(this.name).style.display="none";
}function HideLevel()
{
var i;
var ChildObj;
if (this.Child.length>0)
{
for (i in this.Child)
{ChildObj=this.Child[i];
ChildObj.Hide();
}
}
}function CascadeMenu(level,name,width,height,title,url)
{
this.collapse=true;
this.level=level;
this.Child=new Array();
this.name=name;
this.width=width;
this.height=height;
this.title=title;
this.url=url;
this.Draw=Draw;
this.AddChild=AddChild;
this.Expand=Expand;
this.HideLevel=HideLevel;
this.Hide=Hide;
this.Collapse=Collapse;
}
var o = new CascadeMenu(1,"menu",100,200,"hello","www.csdn.net");
o.collapse=true;
o.Draw();
o.AddChild("-----","#");
o.AddChild("-----","#");
o.AddChild("-----","#");
o.AddChild("-----","#");
o.AddChild("-----","#");
o.Expand();//-->
</script>
到此为止 :(
<!--/*类名:CascadeMenu
属性:
collapse 此菜单是否折起
level 菜单级别
Child 子菜单对象数组
name 对应层的ID
title 标题
url 链接
width 宽度
height 高度
方法:Draw() 绘制菜单
AddChild(title,url)构造子项
Expand(id)展开/折叠菜单
全局变量:
CollapseImage 全局变量,定义一级菜单收起时的图标
ExpandImage 全局变量,定义一级菜单展开时的图标
作者:heroman
版权:免费使用,可以任意修改,但请勿移除本段文字
*/var CollapseImage="http://img.163.com/club/uh/line_01.gif";//全局变量,定义一级菜单收起时的图标
var ExpandImage="http://img.163.com/club/uh/line_02.gif";//全局变量,定义一级菜单展开时的图标
function Expand()
{ this.collapse=!this.collapse
var i;
var ChildObj;
if (this.Child.length>0)
{
for (i in this.Child)
{
ChildObj=this.Child[i];
if (document.all(ChildObj.name).style.display=="none")
document.all(ChildObj.name).style.display="block";
else
ChildObj.Collapse();
}
if (!this.collapse)
document.all(this.name+"_Image").src=ExpandImage;
else
document.all(this.name+"_Image").src=CollapseImage;
}
}function Collapse()
{
var i;
this.Hide();
for(i in this.Child)
{
this.Child[i].Collapse();
}
}function AddChild(ChildObject)
{
this.Child[this.Child.length]=ChildObject;
}function Draw()
{ var space="";
var i=1;
while (i<=(this.level-1)*2)
{
space=space+" ";
i=i+1;
}
document.write ("<div id='"+this.name+"' style='display:block;padding-bottom:5px;width="+this.width+"px;height="+this.height+"px'>"+space+"<img id='"+this.name+"_Image' src='"+CollapseImage+"' border=0 align=absmiddle alt='click it to Expand/Collapse This Tree' onclick=try{"+this.name+".Expand()}catch(e){alert(e.toString())}> <a href='"+this.url+"'>"+this.title+"</a></div>");
if (this.Child.length>0)
{
var ChildObj;
for (i in this.Child)
{
ChildObj=this.Child[i];
ChildObj.Draw();
//ChildObj.HideLevel();
}
this.HideLevel();
}
}function Hide()
{
document.all(this.name).style.display="none";
}function HideLevel()
{
var i;
var ChildObj;
if (this.Child.length>0)
{
for (i in this.Child)
{ChildObj=this.Child[i];
ChildObj.Hide();
}
}
}function CascadeMenu(level,name,width,height,title,url)
{
this.collapse=true;
this.level=level;
this.Child=new Array();
this.name=name;
this.width=width;
this.height=height;
this.title=title;
this.url=url;
this.Draw=Draw;
this.AddChild=AddChild;
this.Expand=Expand;
this.HideLevel=HideLevel;
this.Hide=Hide;
this.Collapse=Collapse;
}
var o = new CascadeMenu(1,"menu",100,200,"hello","www.csdn.net");
o.collapse=true;
o.Draw();
o.AddChild("-----","#");
o.AddChild("-----","#");
o.AddChild("-----","#");
o.AddChild("-----","#");
o.AddChild("-----","#");
o.Expand();//-->
</script>
到此为止 :(
解决方案 »
- 请问使用jquery+ajax如何能实现类似iframe的导航栏?
- javascript 下拉框关联时的数组问题
- 如何去掉get方式的URL中空的参数?
- 谁能帮我看下 我写的这些语句是否有错误
- javascript & vbScript 同时存在的问题
- 网页多出了个滚动条的框框
- JavaScript + VML 生成柱图,折线图,饼图源代码---awawsrain(绝对零度)修改
- 请问,如何取得一个输入框中被选中的文本啊?
- javascript 中如何vs.net的后台函数或vs.net的button_click事件
- 如何用js代码禁止浏览器弹出打印预览页面直接使用系统对话框打印
- 看看这个!比较急!
- 真的没人会????http://expert.csdn.net/Expert/topic/2594/2594654.xml?temp=6.234378E-02
var o = new CascadeMenu(1,"menu",100,200,"hello","www.csdn.net");
o.collapse=true;
o.Draw();
o.AddChild("-----","#");
o.AddChild("-----","#");
o.AddChild("-----","#");
o.AddChild("-----","#");
o.AddChild("-----","#");
o.Expand();
放进一个函数比如make_menu(),然后把文件保存为menu.js在自己的页面中页头引入
<script src="menu.js的路径"></script>
在body中要使用menu的地方比如一个table的td内
<td><script>make_menu()</script></td>自己试试吧,我没试过,不负责任:)
bar1 = new CascadeMenu(2,"bar1",40,22,"111","#");
menu.AddChild(bar1)
bar2 = new CascadeMenu(2,"bar2",40,22,"222","#");
menu.AddChild(bar2)
bar3 = new CascadeMenu(2,"bar3",40,22,"333","#");
menu.AddChild(bar3)
bar4 = new CascadeMenu(3,"bar4",60,22,"333-1","#");
bar3.AddChild(bar4)menu.Draw()