Frame的简单布局和应用
Frame的简单布局和应用
(1)做一个简单的Frame的应用,我们的布局暂定为上、左、右三个部分,如图1-1草图
图1-1草图
(2)首先把Top.aspx搭建,代码如下:
<body> <form id="form1" runat="server"> <div> <table width="100%" border="1"> <tr> <td align="right"> <asp:Button ID="btn_close" runat="server" Text=" 关 闭 " onclick="btn_close_Click" /> </td> </tr> </table> </div> </form> </body> |
(3)其次把Left.aspx搭建,代码如下:
<body> <form id="form1" runat="server">
<div style="width: 220px; height: 600px; overflow:auto; border-top-width: 1px; border-left-width: 1px; border-left-color: silver; border-bottom-width: 1px; border-bottom-color: silver; border-top-color: silver; border-right-width: 1px; border-right-color:Green"> <asp:TreeView ID="TreeView1" runat="server"></asp:TreeView> </div> </form> </body> |
(4)再者把Right.aspx搭建,代码如下:
<body> <form id="form1" runat="server"> <table border="0" cellpadding="0" cellspacing="0" style="width: 368px"> <tr> <td style="height: 27px; text-align: right"> 词典代码:</td> <td style="height: 27px; width: 265px;"> <asp:Label ID="labEntryCode" runat="server"></asp:Label></td> </tr> <tr> <td style="text-align: right; height: 27px;"> 词典名称:</td> <td style="height: 27px; width: 265px;"> <asp:Label ID="labEntryName" runat="server"></asp:Label></td> </tr> <tr> <td style="height: 27px; text-align: right"> 内容代码:</td> <td style="height: 27px; width: 265px;"> <asp:TextBox ID="txtContentCode" runat="server"></asp:TextBox></td> </tr> <tr> <td style="text-align: right; height: 27px;"> 内容名称:</td> <td style="height: 27px; width: 265px;"> <asp:TextBox ID="txtContentName" runat="server"></asp:TextBox></td> </tr> </table> </form> </body> |
(5)最后把Default.aspx搭建,这个是Frame的核心,代码如下:
<frameset rows="50,*" framespacing="0" frameborder="no" border="0"> <frame src="Top.aspx" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" /> <frameset rows="*" cols="230,*" framespacing="0" frameborder="no" border="0"> <frame src="Left.aspx" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" target="mainFrame" /> <frame src="Right.aspx" name="mainFrame" id="mainFrame" title="mainFrame" target="_self" /> </frameset> </frameset> |
(6)上述步骤都完成之后,基本上框架都完成了。这次我们在左边放一个简单的树形结构的数据,右边放显示点击树形结构后显示的数据。
(7)需要的数据库的表结构如下:图1-2,1-3所示
图1-2表um_entry
图1-3表um_entrycontent
(8)上述就是一个简单的Frame的布局,我做的实例地址(包含了上面两个表的结构):http://download.csdn.net/source/2450111