使用框架的基本结构
代码
<body>
<form id="form1" runat="server">
<div>
<iframe id="frmTop" name="frmTop" style="z-index: 1; visibility: inherit; 100%;
height: 120px" frameborder="0" src="CenterTop.aspx" scrolling="no"></iframe>
<table border="1" cellspacing="0" cellpadding="0" width="100%" height="438px" id="tblTotal">
<tr>
<td style="background-repeat: repeat-y" height="100%"
width="160px">
<iframe id="frmLeft" name="frmLeft" style="z-index: 2; visibility: inherit;
170px; height: 100%" frameborder="0" src="CenterLeft.aspx" scrolling="auto">
</iframe>
</td>
<td height="100%">
<iframe id="mainFrame" name="mainFrame" style="z-index: 1; visibility: inherit; 100%;
height: 100%" frameborder="0" src="CenterMaster.aspx"></iframe>
</td>
</tr>
<tr>
<td colspan="2">
<iframe id="frmBottom" frameborder="0" name="frmBottom" scrolling="no" src="CenterBottom.aspx"
style="z-index: 1; visibility: inherit; 100%; height: 220px"></iframe>
</td>
</tr>
</table>
</div>
</form>
</body>
<form id="form1" runat="server">
<div>
<iframe id="frmTop" name="frmTop" style="z-index: 1; visibility: inherit; 100%;
height: 120px" frameborder="0" src="CenterTop.aspx" scrolling="no"></iframe>
<table border="1" cellspacing="0" cellpadding="0" width="100%" height="438px" id="tblTotal">
<tr>
<td style="background-repeat: repeat-y" height="100%"
width="160px">
<iframe id="frmLeft" name="frmLeft" style="z-index: 2; visibility: inherit;
170px; height: 100%" frameborder="0" src="CenterLeft.aspx" scrolling="auto">
</iframe>
</td>
<td height="100%">
<iframe id="mainFrame" name="mainFrame" style="z-index: 1; visibility: inherit; 100%;
height: 100%" frameborder="0" src="CenterMaster.aspx"></iframe>
</td>
</tr>
<tr>
<td colspan="2">
<iframe id="frmBottom" frameborder="0" name="frmBottom" scrolling="no" src="CenterBottom.aspx"
style="z-index: 1; visibility: inherit; 100%; height: 220px"></iframe>
</td>
</tr>
</table>
</div>
</form>
</body>
由于本程序美工设计时并未考虑框架结构，所以不是很规整。
代码
<body>
<iframe id="frmTop" name="frmTop" style="z-index: 1; visibility: inherit; 100%;
height: 80px" frameborder="0" src="Top.aspx" scrolling="no"></iframe>
<div class="middlepic">
<div class="contitle">
<span class="title_1"></span></div>
<div class="FAQcontent">
<div class="FAQcontentleft">
<img src="images/left.gif" /></div>
<!--sidebar-->
<div class="FAQmain">
<div class="mainleftFAQ" style="height: 600px; 215px">
<iframe id="frmLeft" name="frmLeft" style="z-index: 2; visibility: inherit; 215px;
height: 100%" frameborder="0" src="Left.aspx" scrolling="auto"></iframe>
</div>
<!--middle-->
<div class="conFR">
<div class="top">
</div>
<iframe id="mainFrame" name="mainFrame" style="z-index: 1; visibility: inherit; 100%;
height: 100%; height :480px" frameborder="0" src="All.aspx?type=All&status=E" scrolling="no">
</iframe>
<div class="yuan">
</div>
</div>
</div>
<div class="FAQconright">
<img src="images/right.gif" /></div>
</div>
<iframe id="frmBottom" frameborder="0" name="frmBottom" scrolling="no" src="Bottom.htm"
style="z-index: 1; visibility: inherit; 100%; height: 103px"></iframe>
</div>
</body>
<iframe id="frmTop" name="frmTop" style="z-index: 1; visibility: inherit; 100%;
height: 80px" frameborder="0" src="Top.aspx" scrolling="no"></iframe>
<div class="middlepic">
<div class="contitle">
<span class="title_1"></span></div>
<div class="FAQcontent">
<div class="FAQcontentleft">
<img src="images/left.gif" /></div>
<!--sidebar-->
<div class="FAQmain">
<div class="mainleftFAQ" style="height: 600px; 215px">
<iframe id="frmLeft" name="frmLeft" style="z-index: 2; visibility: inherit; 215px;
height: 100%" frameborder="0" src="Left.aspx" scrolling="auto"></iframe>
</div>
<!--middle-->
<div class="conFR">
<div class="top">
</div>
<iframe id="mainFrame" name="mainFrame" style="z-index: 1; visibility: inherit; 100%;
height: 100%; height :480px" frameborder="0" src="All.aspx?type=All&status=E" scrolling="no">
</iframe>
<div class="yuan">
</div>
</div>
</div>
<div class="FAQconright">
<img src="images/right.gif" /></div>
</div>
<iframe id="frmBottom" frameborder="0" name="frmBottom" scrolling="no" src="Bottom.htm"
style="z-index: 1; visibility: inherit; 100%; height: 103px"></iframe>
</div>
</body>
页面除了顶部和底部外，主要包括左侧项目列表和右侧的实际内容。其中内容页面又有上方的菜单栏。页面所在位置是由左侧和上方共同决定的。为了点击上方按钮时同时自动刷新左侧列表链接目的地址。所以使用了JQuery代码。
代码
<script src ="js/jquery-1.4.2.js" type ="text/javascript" ></script>
<script language ="javascript" type ="text/javascript" >
//点击上方按钮时刷新左侧列表的链接
$(document).ready(
function () {
var status = $("#hidStatus").val();
var type = $("#hidType").val();
$("#frmLeft", parent.document.body).attr("src", "Left.aspx?status=" + status + "&type=" + type); ;
}
)
</script>
<script language ="javascript" type ="text/javascript" >
//点击上方按钮时刷新左侧列表的链接
$(document).ready(
function () {
var status = $("#hidStatus").val();
var type = $("#hidType").val();
$("#frmLeft", parent.document.body).attr("src", "Left.aspx?status=" + status + "&type=" + type); ;
}
)
</script>