asp.net frameset 框架頁面伸縮功能實現

暖楓無敵發表於2012-07-05
ASP.NET框架

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();


 



相關文章