单击“隐藏菜单”按钮就能隐藏左侧菜单
<script language="javascript">
var isShowToolBar=1;
function showFrame()
{
a=top.document.getElementById("DIVIDE");
var b=document.all["img1"];
if(isShowToolBar==1)
{
a.cols="0,18,*";
b.src="img/toRight.gif";
b.title="关闭";
isShowToolBar=0;
}
else
{
a.cols="130,18,*"
b.src="img/toLeft.gif";
b.title="打开";
isShowToolBar=1;
}
}
<script language="javascript">
var isShowToolBar=1;
function showFrame()
{
a=top.document.getElementById("DIVIDE");
var b=document.all["img1"];
if(isShowToolBar==1)
{
a.cols="0,18,*";
b.src="img/toRight.gif";
b.title="关闭";
isShowToolBar=0;
}
else
{
a.cols="130,18,*"
b.src="img/toLeft.gif";
b.title="打开";
isShowToolBar=1;
}
}
style属性为none就可。
简单的说,就是页面层的控制。这完全是用JScript结合DHTML对象模型实现的,跟ASP.NET是没有关系的。“点击"文档编辑"或"高级管理",此时菜单会上下移动”不难,它把每个菜单作为一个层,然后叠起来,你点击的时候,它调用changeItem并传给相应的层编号,然后程序就根据这个层以及当前显示的层的编号来移动层的位置就OK了
<html>
<head>
<title>button_title_l</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script>
function oa_tool(){
if(window.parent.oa_frame.cols=="0,13,*"){
frameshow.src="images/p_1.gif";
oa_tree.title="隐藏工具栏"
window.parent.oa_frame.cols="118,13,*";
}
else{
frameshow.src="images/p_2.gif";
oa_tree.title="显示工具栏"
window.parent.oa_frame.cols="0,13,*";}
}
</script>
</head>
<body text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#CCCCCC">
<table width="13" border="0" height="100%" cellpadding="0" cellspacing="0" align="left">
<tr align="center">
<td background="images/bg_1.gif">
<div id="oa_tree" onclick="oa_tool();" title="隐藏工具栏"><img id="frameshow" src="images/p_1.gif" width="9" height="50"></div>
</td>
</tr>
</table>
</body>
</html>
先把源码贴上,有什么问题改日再解答var number=3; //菜单的数量
var titleheight=20; //菜单标题栏的高度
var temp=window.document.body.clientHeight-number*titleheight;
var contentheight=temp>50?temp:50;//内容区的高度(最小为50px)
document.all.itemsLayer.style.height=number*titleheight+contentheight;
for(i=0;i<number;i++)
{
eval('document.all.Item'+i+'.style.height=contentheight+20;');
eval('document.all.childItem'+i+'.style.height=contentheight;');
}
var totalheight =parseInt(document.all.itemsLayer.style.height); //总菜单的高度
var stepNo = 10; //移动的步数
//现在开始编写点击标题时移动相应的层:
//初始化变量"toItemIndex"和"onItemIndex",
//它们分别用于记录"应该显示的层"和"现在显示的层":
var toItemIndex=number-1;
var onItemIndex=number-1;
var runtimes=0;
//"runtimes"用于记录层移动次数
//菜单标题被点击时调用这个函数:
function changeItem(clickItemIndex)
{
//判断相应的层应上移还是下移:
toItemIndex=clickItemIndex;
if(toItemIndex-onItemIndex>0) moveUp(); else moveDown();
//一定的时间间隔后继续移动,直到移了设定的步数stepNo:
runtimes++;
if(runtimes>=stepNo)
{
onItemIndex=toItemIndex;
ScrollIcon(toItemIndex);
runtimes=0;
}
else
setTimeout("changeItem(toItemIndex)",20);
}
//相应菜单上移:
function moveUp(){
//判断应一起上移的菜单,并让它(们)每次移动contentHeight/stepNo的距离:
for(i=onItemIndex+1;i<=toItemIndex;i++)
{
if(runtimes<stepNo-1)
{
eval('document.all.Item'+i+'.style.top=parseInt(document.all.Item'+i+'.style.top)-contentheight/stepNo;');
}
else //最后一次全部到位
{
eval('document.all.Item'+i+'.style.top=i*titleheight;');
}
}
}
//相应菜单下移:
function moveDown()
{
for(i=onItemIndex;i>toItemIndex;i--)
{
if(runtimes<stepNo-1)
{
eval('document.all.Item'+i+'.style.top=parseInt(document.all.Item'+i+'.style.top)+contentheight/stepNo;');
}
else
{
eval('document.all.Item'+i+'.style.top=parseInt(document.all.itemsLayer.style.height)-(number-i)*titleheight;');
}
}
}
function winresize() //当窗口改变大小时调用
{
temp =parseInt(window.document.body.clientHeight-number*titleheight)
contentheight= temp>50?temp:50; //重新获取内容区的高度
document.all.itemsLayer.style.height = number*titleheight+contentheight;
ScrollIcon(onItemIndex);
var totalheight2 =parseInt(document.all.itemsLayer.style.height);//改变后的总高度
for(i=onItemIndex+1;i<number;i++)
{
eval('document.all.Item'+i+'.style.top=parseInt(document.all.Item'+i+'.style.top)-totalheight+totalheight2;');//减去改变前后的落差就得到移动后的位置
}
for(i=0;i<number;i++)
{
eval('document.all.childItem'+i+'.style.height=contentheight;');
eval('document.all.Item'+i+'.style.height=contentheight+20;');
}
totalheight=totalheight2;//重新定位totalheight
}
var beyond= 0; //内容区溢出显示区多少
var srcollnumber = 0; //移动的次数
var srcollsize =10; //每次移动的大小
var time1; //一定时间内重复的动作
var scrolldivtop;//所要移动的层的顶部
function ScrollIcon(j) //判断按钮的显示
{
var sh =eval("document.all.Item"+j+".style.top");
beyond=contentheight-parseInt(eval("document.all.Content"+j+".style.height"));
var t = parseInt(eval("document.all.Content"+onItemIndex+".style.top"));
if(beyond<0)//有溢出
{
if(t<0)//显示up按钮
{
document.all.up.style.top = parseInt(eval("document.all.Item"+onItemIndex+".style.top"))+40;
}
else
{
document.all.up.style.top = -100;
}
if(t>=beyond)//显示down按钮
{
document.all.down.style.top = parseInt(eval("document.all.Item"+onItemIndex+".style.top"))+contentheight-20;
}
else
{
document.all.down.style.top = -100;
}
}
else //没有溢出
{
document.all.down.style.top = -100; //不显示
if(t<0)//显示up按钮
{
document.all.up.style.top = parseInt(eval("document.all.Item"+onItemIndex+".style.top"))+40;
}
else
{
document.all.up.style.top = -100;
}
}
}
function Scrollup()
{
time1= window.setInterval('up()',50);
}
function up()//返回到层的顶部
{
scrolldivtop= parseInt(eval("document.all.Content"+onItemIndex+".style.top"));
if(scrolldivtop>=0)//层的顶部已经露出
{
Scrollstop();
}
else
{
srcollnumber++;
eval("document.all.Content"+onItemIndex+".style.top =scrolldivtop+srcollsize");
}
ScrollIcon(onItemIndex);
}
function Scrolldown()
{
time1= window.setInterval('down()',50);//在50毫秒内重复调用'down()'
}
function down()//显示层的尾部
{
scrolldivtop= parseInt(eval("document.all.Content"+onItemIndex+".style.top"));
if(scrolldivtop<=beyond)//层的顶部已超出所溢出大小的位置
{
Scrollstop();
}
else
{
srcollnumber++;
eval("document.all.Content"+onItemIndex+".style.top =scrolldivtop- srcollsize");
}
ScrollIcon(onItemIndex);
}
function Scrollstop()
{
srcollnumber=1;
window.clearInterval(time1);//取消Scrollup()与Scrolldown()的重复调用函数动作
}
changeItem(1); //默认显示第一层菜单