asp.net frameset 框架页面伸缩功能实现

来源：互联网发布：mac os xshell 编辑：程序博客网时间：2024/04/29 17:21

1、新建Left.aspx、Right.aspx和Top.aspx页面

2、新建一个index.html页面，使用框架页包含以上3个aspx页面

3、各个页面代码如下

Top.aspx页面

<%@ 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><body>    <form id="form1" runat="server">    <div>        <img id="pic" height="12" alt="显示/隐藏" hspace="4" src="img/hide_menu.gif" width="15"            border="0" onclick="changeVisible();" /><span id="dir">隐藏快捷栏</span> 头部标题页面    </div>    </form></body></html><script language="javascript" type="text/javascript">    function changeVisible() {        if (parent.bottom.cols != '190,*') {            parent.bottom.cols = '190,*';            document.all.pic.src = "img/hide_menu.gif";            document.all.dir.innerHTML = "隐藏快捷栏"        }        else {            parent.bottom.cols = '0,*';            document.all.pic.src = "img/show_menu.gif";            document.all.dir.innerHTML = "显示快捷栏"        }    }</script>

Left.aspx页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Left.aspx.cs" Inherits="Left" %><!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><body>    <form id="form1" runat="server">    <div>        左侧导航菜单栏    </div>    </form></body></html>

Right.aspx页面

<%@ 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><body>    <form id="form1" runat="server">    <div>        中间区域显示内容    </div>    </form></body></html>

index.htm页面

<!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>    <title>框架页面</title></head><frameset id="fsTop" border="0" framespacing="0" rows="122,*" topmargin="0" leftmargin="0"    marginheight="0" marginwidth="0" cols="*"><frame border="1" name="top" marginwidth="0" marginheight="0" src="Top.aspx" frameborder="no"noResize scrolling="no" topmargin="0" leftmargin="0" bordercolor="#e4e4e4"><frameset border="1" name="bottom" framespacing="0" frameborder="1" cols="190,*" topmargin="0"leftmargin="0" rightmargin="0" marginheight="0" marginwidth="0"><frame border="1" name="menu" marginwidth="0" marginheight="0" frameborder="0" topmargin="0"leftmargin="0" target="main" scrolling="no" noresize="true" bordercolor="#e4e4e4" src="Left.aspx"style="BORDER-TOP: #000000 1px solid"/><frame style="BORDER-TOP: #000000 1px solid; BORDER-LEFT: #ffffff 2px groove" border="2"name="main" id="main" bordercolor="#e4e4e4" src="Right.aspx" frameborder="no" scrolling="auto"marginwidth="0" marginheight="0"/></frameset></frameset><noframes></noframes></html>

效果图如下：

PS补充说明：

如果想在top页面控制main区域的页面地址，使用：

parent.window.frames['main'].location.href = "sysSecurity/ChangePassword.aspx";

如果想重新加载页面的话

parent.window.frames['main'].location.reload();