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

最新推荐文章于 2023-12-28 23:26:48 发布

暖枫无敌

最新推荐文章于 2023-12-28 23:26:48 发布

阅读量7.9k

点赞数

分类专栏： C#.NET编程 asp.net 应用开发文章标签：框架 asp.net xhtml border server html

本文链接：https://blog.csdn.net/zdw_wym/article/details/7719434

版权

C#.NET编程同时被 2 个专栏收录

219 篇文章 2 订阅

订阅专栏

asp.net 应用开发

79 篇文章 29 订阅

订阅专栏

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" οnclick="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();