框架集的折叠

来源:互联网 发布:频域滤波 python 编辑:程序博客网 时间:2024/05/01 20:51
 主框架mainFrame分成三个子框架,分别为leftFrame,rightFrame,topFrame,框架集代码如下:
<frameset rows="40,*" cols="*" frameborder="no" border="1" framespacing="0">
  
<frame src="top.aspx" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
  
<frameset cols="160px,*" frameborder="no" border="1" framespacing="0" id="leftFrame">
    
<frame src="left.aspx" scrolling="No" noresize="noresize" />
    
<frame src="right.aspx" noresize=noresize/>
  
</frameset>
</frameset>

在topFrame中添加一个图标用来显示和隐藏leftFrame或是rightFrame,隐藏rightFrame代码如下:

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="top.aspx.cs" Inherits="top" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    
<title></title>
</head>
<script language="javascript">
function Show_Hide_Menu(){
if(window.parent.leftFrame.cols=="160,*,0,0,0"){
document.getElementById(
"menuICON").src="../image/Image00010.jpg";
document.getElementById(
"menuICON").alt="隐藏菜单"
window.parent.leftFrame.cols
="*,0,0,0,0";
}

else{
document.getElementById(
"menuICON").src="../image/Image00009.jpg";
document.getElementById(
"menuICON").alt="显示菜单"
window.parent.leftFrame.cols
="160,*,0,0,0";
}

}

</script>
<body link="#66ff00" style="background-color: green">
    
<form id="form1" runat="server">
    
<div style="background-color: black">
    
<img style="cursor:hand; width: 81px; height: 46px;" src="../image/Image00009.jpg" alt="隐藏菜单" onclick="javascript:Show_Hide_Menu();" id="menuICON" />
    
</div>
    
</form>
</body>
</html>
隐藏leftFrame代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="right.aspx.cs" Inherits="right" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">

    
<title></title>
</head>
<script language="javascript">
function Show_Hide_Menu(){
if(window.parent.leftFrame.cols=="160,*,0,0,0"){
document.getElementById(
"menuICON").src="../image/Image00010.jpg";
document.getElementById(
"menuICON").alt="隐藏菜单"
window.parent.leftFrame.cols
="0,*,0,0,0";
}

else{
document.getElementById(
"menuICON").src="../image/Image00009.jpg";
document.getElementById(
"menuICON").alt="显示菜单"
window.parent.leftFrame.cols
="160,*,0,0,0";
}

}


</script>
<body  style="background-color: fuchsia">
    
<form id="form1" runat="server">
    
<img style="cursor:hand; width: 81px; height: 46px;" src="../image/Image00009.jpg" alt="隐藏菜单" onclick="javascript:Show_Hide_Menu();" id="menuICON" />
    
</form>
</body>
</html>
要注意的关键点:在主框架中设置标签frameset的id=leftFrame,在script脚本中改变的是主框架id为leftFrame的cols属性,而不是frame标签下的子框架名.
原创粉丝点击