三栏式折叠框架

来源：互联网发布：门窗绘图软件编辑：程序博客网时间：2024/05/02 22:22

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网站后台管理系统</title>
<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
height: 100%; /* Required */
}
body,td,th {
font-size: 12px;
}
body {
overflow: hidden;
}
</style>
</head>
<frameset id="frameset1" cols="182,7,*" frameborder="no" border="0" framespacing="0">
<frame src="leftmenu.php" name="leftFrame" frameborder="no" scrolling="No" id="leftFrame" title="leftFrame" />
<frame src="barfrm.php" name="leftFrame1" frameborder="no" scrolling="No" noresize="noresize" id="leftFrame1" title="leftFrame1" />
<frame src="main.php" name="mainFrame" frameborder="no" id="mainFrame" title="mainFrame" />
</frameset>
<noframes><body><h1>你的浏览器不支持框架，或设置了不显示框架。</h1>
</body></noframes>
</html>
=====================================================================
barfrm.php
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网站后台管理系统</title>
<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
height: 100%; /* Required */
}
body,td,th {
font-size: 12px;
}
body {
overflow: hidden;
}
.navPoint{
font-family:Webdings;
font-size:12px;
color:white;
cursor:pointer;
text-align: center;
background-color:#B2BDC8;
margin: 0px;
padding: 0px;
}
.navPoint a{
font-family:Webdings;
font-size:12px;
color:white;
cursor:pointer;
text-align: center;
background-color:#B2BDC8;
text-decoration:none;
margin: 0px;
padding: 0px;
}
.navPoint a:hover{
font-family:Webdings;
font-size:12px;
color:#B2BDC8;
cursor:pointer;
text-align: center;
background-color:white;
text-decoration:none;
margin: 0px;
padding: 0px;
}
#switchPoint {font-size:8px;background-image:url(img/leftbarbtn.png); background-position:center; background-repeat:no-repeat; height:50px; width:7px; display:block;
}
</style>
<script language="JavaScript" type="text/javascript">
function Frame() {
    if (FrameStat == "Show") {
        FrameSize = "182,7,*";
        FrameStat = "Hide";
  document.getElementById("switchPoint").style.backgroundImage="url(img/leftbarbtn.png)"
    }
    else {
        FrameSize = "0,7,*";
        FrameStat = "Show";
  document.getElementById("switchPoint").style.backgroundImage="url(img/leftbarbtnr.png)"
    }
parent.document.getElementById('frameset1').cols = FrameSize;
}
onLoad=FrameStat="Hide";
</script>
</head>
<body>
<table style="width:100%; height:100%;border:0px" cellpadding="0" cellspacing="0">
<tr>
  <td style="background-color:#7894AE;background-image:url(img/leftbar.png); background-repeat:repeat-y;width:7px"><table cellspacing="0" cellpadding="0" style="border:0px; height:50px; width:7px" class="navPoint">
    <tr>
     <td style="height:100%;" onclick="javascript:Frame();"><div id="switchPoint" title="关闭/打开左栏"></div></td>
    </tr>
   </table></td>
</tr>
</table>
</body>
</html>