frameset框架如何使左边页面显示,隐藏?wj-wangjun
1. 框架页面
2. 在Main.aspx 文件做显示隐藏的按钮。(方法一:)
3. 用图片显示。(方法二:)
<frameset rows="95,76%,60" border="0" frameSpacing="0" frameBorder="0">
<frame name="header" src="Top.aspx" scrolling="no" noresize style="BORDER-RIGHT: #0099ff 2px ridge; BORDER-TOP: #0099ff 2px ridge; BORDER-LEFT: #0099ff 2px ridge; BORDER-BOTTOM: #0099ff 2px ridge">
<frameset cols="200,*" id="middle">
<frame name="contents" src="LeftFrame.aspx" style="BORDER-RIGHT: #0099ff 2px ridge; PADDING-RIGHT: 2px; BORDER-TOP: #0099ff 3px; PADDING-LEFT: 2px; MARGIN-LEFT: 2px; BORDER-LEFT: #0099ff 2px ridge; MARGIN-RIGHT: 2px; BORDER-BOTTOM: #0099ff 3px">
<frame name="main" src="Main.aspx" scrolling="auto" style="BORDER-RIGHT: #0099ff 2px ridge; PADDING-RIGHT: 2px; BORDER-TOP: #0099ff 1px; BORDER-LEFT: royalblue 3px; MARGIN-RIGHT: 2px; BORDER-BOTTOM: royalblue 1px">
</frameset>
<frame name="footer" src="Bottom.aspx" scrolling="no" style="BORDER-RIGHT: #0099cc 2px ridge; BORDER-TOP: #0099cc 2px ridge; BORDER-LEFT: #0099cc 2px ridge; BORDER-BOTTOM: #0099cc 2px ridge">
</frameset>
</html>
<frame name="header" src="Top.aspx" scrolling="no" noresize style="BORDER-RIGHT: #0099ff 2px ridge; BORDER-TOP: #0099ff 2px ridge; BORDER-LEFT: #0099ff 2px ridge; BORDER-BOTTOM: #0099ff 2px ridge">
<frameset cols="200,*" id="middle">
<frame name="contents" src="LeftFrame.aspx" style="BORDER-RIGHT: #0099ff 2px ridge; PADDING-RIGHT: 2px; BORDER-TOP: #0099ff 3px; PADDING-LEFT: 2px; MARGIN-LEFT: 2px; BORDER-LEFT: #0099ff 2px ridge; MARGIN-RIGHT: 2px; BORDER-BOTTOM: #0099ff 3px">
<frame name="main" src="Main.aspx" scrolling="auto" style="BORDER-RIGHT: #0099ff 2px ridge; PADDING-RIGHT: 2px; BORDER-TOP: #0099ff 1px; BORDER-LEFT: royalblue 3px; MARGIN-RIGHT: 2px; BORDER-BOTTOM: royalblue 1px">
</frameset>
<frame name="footer" src="Bottom.aspx" scrolling="no" style="BORDER-RIGHT: #0099cc 2px ridge; BORDER-TOP: #0099cc 2px ridge; BORDER-LEFT: #0099cc 2px ridge; BORDER-BOTTOM: #0099cc 2px ridge">
</frameset>
</html>
2. 在Main.aspx 文件做显示隐藏的按钮。(方法一:)
<%@ Page language="c#" Codebehind="Main.aspx.cs" AutoEventWireup="True" Inherits="BYD_SPCSystem.DesktopModules.Main" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>Main</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<script type="text/javascript">
<!--
function shleft(){
if (parent.middle.cols=="0,*")
{
parent.middle.cols="200,*"
document.getElementById("p1").innerHTML="隐";
document.getElementById("p2").innerHTML="藏";
}
else
{
parent.middle.cols="0,*"
document.getElementById("p1").innerHTML="显";
document.getElementById("p2").innerHTML="示";
}
}
function TABLE1_onclick() {
}
//-->
</script>
</head>
<body >
<form id="Form1" method="post" runat="server">
<table border="0" cellpadding="0" cellspacing="0" style="width: 1%; height: 1%;position:absolute; left: 0px; top: 75px;" id="TABLE2" onclick="return TABLE1_onclick()">
<tr>
<td bgcolor="#99ccff" valign="middle" onclick="shleft()" style="FONT-SIZE: 8pt; CURSOR: hand; COLOR: white; width: 1px; height: 126px;">
<p id="p1">隐</p>
<p id="p2">藏</p>
<p>左</p>
<p>部</p>
</td>
</tr>
</table>
我是主
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>Main</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<script type="text/javascript">
<!--
function shleft(){
if (parent.middle.cols=="0,*")
{
parent.middle.cols="200,*"
document.getElementById("p1").innerHTML="隐";
document.getElementById("p2").innerHTML="藏";
}
else
{
parent.middle.cols="0,*"
document.getElementById("p1").innerHTML="显";
document.getElementById("p2").innerHTML="示";
}
}
function TABLE1_onclick() {
}
//-->
</script>
</head>
<body >
<form id="Form1" method="post" runat="server">
<table border="0" cellpadding="0" cellspacing="0" style="width: 1%; height: 1%;position:absolute; left: 0px; top: 75px;" id="TABLE2" onclick="return TABLE1_onclick()">
<tr>
<td bgcolor="#99ccff" valign="middle" onclick="shleft()" style="FONT-SIZE: 8pt; CURSOR: hand; COLOR: white; width: 1px; height: 126px;">
<p id="p1">隐</p>
<p id="p2">藏</p>
<p>左</p>
<p>部</p>
</td>
</tr>
</table>
我是主
3. 用图片显示。(方法二:)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="candotop.aspx.cs" Inherits="BYD_SPCSystem.Test.candotop" %>
<!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>
<script type="text/javascript">
var disptool = true;
function coro(){
if(disptool){
parent.main.cols='0,*';
document.all.tool.src="../Img/open.gif";
disptool = false;
}
else{
parent.main.cols='200,*';
document.all.tool.src="../pictures/button_PIC/save.bmp";
disptool = true;
}
}
</script>
</head>
<body>
<table>
<tr>
<td align="right">
<img src="../pictures/button_PIC/save.bmp" alt="关闭工具栏" style="cursor:hand;" onclick="coro()" id="tool"/>
</td>
</tr>
</table>
</body>
</html>
<!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>
<script type="text/javascript">
var disptool = true;
function coro(){
if(disptool){
parent.main.cols='0,*';
document.all.tool.src="../Img/open.gif";
disptool = false;
}
else{
parent.main.cols='200,*';
document.all.tool.src="../pictures/button_PIC/save.bmp";
disptool = true;
}
}
</script>
</head>
<body>
<table>
<tr>
<td align="right">
<img src="../pictures/button_PIC/save.bmp" alt="关闭工具栏" style="cursor:hand;" onclick="coro()" id="tool"/>
</td>
</tr>
</table>
</body>
</html>