框架集的折叠

 主框架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标签下的子框架名.