这2天我看了网络上很多关于这方面的资料，很多都是抄人家的，要不就是没图说个jiba，要不就是没有说到重点，浪费大家的时间，今天我把我的心得给大家分享下，希望对大家有所帮助。
一、首先，你需要简历一个框架集（frame set），这就包括了几个部分，包括：index_frame、frame_top、frame_left、mainFrame、以及一个折叠的特效；
我的文件目录如下：
各部分代码如下：
frame_center.html:
3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title></title> 6 <script type="text/javascript"> 7 function hiddeFrame() 8 { 9 parent.document.getElementById("mainContentFrame").cols="0,7,*"; 10 document.getElementById("hiddeFrame").style.display="none"; 11 document.getElementById("OpenFrame").style.display=""; 12 } 13 14 function OpenFrame() 15 { 16 parent.document.getElementById("mainContentFrame").cols="209,7,*"; 17 document.getElementById("hiddeFrame").style.display=""; 18 document.getElementById("OpenFrame").style.display="none"; 19 } 20 </script> 21 </head> 22 23 <body style="background:#c8d6f0; margin:0px"> 24 <table cellpadding="0" cellspacing="0" border="0"> 25 <tr> 26 <td height="400px" valign="middle"> 27 <img src="Images/MP-frame_menu/Displayonmouse_none.gif" alt="关闭左侧菜单" id="hiddeFrame" onclick="hiddeFrame();"
onmouseover="this.src='Images/MP-frame_menu/Display_none.gif'"
onmouseout="this.src='Images/MP-frame_menu/Displayonmouse_none.gif'"
style="cursor:pointer;" /> 28 <img src="Images/MP-frame_menu/Displayonmouse.gif" alt="打开左侧菜单" id="OpenFrame" onclick="OpenFrame();"
onmouseover="this.src='Images/MP-frame_menu/Display.gif'"
onmouseout="this.src='Images/MP-frame_menu/Displayonmouse.gif'"
style="cursor:pointer;" /> 29 </td> 30 </tr> 31 </table> 32 </body> 33 </html>
frame_index_pager:
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="frame_index_pager.aspx.cs" Inherits="Maticsoft.Web.MainPager" %> 2 <%@ Import Namespace="Config" %> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <html xmlns="http://www.w3.org/1999/xhtml" > 6 <head runat="server"> 7 <title><%=AppConfig.g_strProjectName%><%=AppConfig.g_strProjectVersion%></title> 8 </head> 9 10 <frameset rows="80,*" frameborder="no" border="0" framespacing="0"> 11 <frameset cols="*" frameborder="no" border="0" framespacing="0"> 12 <frame src="frame_top_pager.aspx" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" /> 13 </frameset> 14 15 <frameset cols="*" frameborder="no" border="0" framespacing="0"> 16 <frameset cols="209,7,*" frameborder="no" border="0" id="mainContentFrame" framespacing="0"> 17 <frame src="frame_left_pager.aspx" name="leftFrame" scrolling="no" noresize="noresize" id="leftFrame" /> 18 <frame src="frame_center.html" name="CenterFrame" scrolling="no" noresize="noresize" id="CenterFrame" /> 19 <frame src="<%if(Request["mfsrc"]!=null&&Request["mfsrc"]!=""){Response.Write(Request["mfsrc"].ToString().Replace("-","&"));}else{Response.Write("frame_main.aspx");}%>" name="mainFrame" id="mainFrame" scrolling="yes" frameborder="0" noresize="noresize" /> 20 </frameset> 21 </frameset> 22 23 </frameset> 24 25 <body> 26 <p> 27 28 </p> 29 <form id="form1" runat="server"> 30 <div> 31 </div> 32 </form> 33 </body> 34 </html>
frame_left_pager:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="frame_left_pager.aspx.cs" Inherits="Maticsoft.Web.frame_left_pager" %> <!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>Untitled Page</title> <link type="text/css" rel="stylesheet" href="css/main.css" /> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"/> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"/> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> </head > <body style="margin:5px 0px 0px 3px;"> <form id="form1" runat="server"> <table width="235" border="0" cellspacing="0" cellpadding="0" style="background:#ffffff"> <tr> <td> <table class="menu_top" width="235" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div class="menu_title" id="menu_title" >主菜单</div> </td> </tr> </table> <asp:TreeView ID="TreeView1" runat="server"> <Nodes> <asp:TreeNode ImageUrl="~/Images/MP-frame_menu/close.gif" SelectAction="None" Text="用户新装管理" Value="用户新装管理"> <asp:TreeNode ImageUrl="~/Images/MP-frame_menu/close.gif" SelectAction="None" Text="民用、小商户用" Value="民用、小商户用"> <asp:TreeNode ImageUrl="~/Images/All_comment/txt.gif" NavigateUrl="~/YYXZGL/MY$XXHY/XZ_YHSQ.aspx" SelectAction="SelectExpand" Text="新装_用户申请" Value="新装_用户申请" Target="mainFrame"></asp:TreeNode> </asp:TreeNode> <asp:TreeNode ImageUrl="~/Images/MP-frame_menu/close.gif" SelectAction="None" Text="大型商业及楼盘" Value="大型商业及楼盘"></asp:TreeNode> </asp:TreeNode> <asp:TreeNode ImageUrl="~/Images/MP-frame_menu/close.gif" SelectAction="None" Text="燃气安装管理" Value="燃气安装管理"> <asp:TreeNode ImageUrl="~/Images/MP-frame_menu/close.gif" SelectAction="SelectExpand" Text="安装申请" Value="新建节点"></asp:TreeNode> <asp:TreeNode ImageUrl="~/Images/MP-frame_menu/close.gif" SelectAction="SelectExpand" Text="安装施工" Value="安装施工"></asp:TreeNode> <asp:TreeNode ImageUrl="~/Images/MP-frame_menu/close.gif" SelectAction="SelectExpand" Text="业务监控" Value="业务监控"></asp:TreeNode> <asp:TreeNode ImageUrl="~/Images/MP-frame_menu/close.gif" SelectAction="SelectExpand" Text="完成列表" Value="完成列表"></asp:TreeNode> </asp:TreeNode> <asp:TreeNode ImageUrl="~/Images/MP-frame_menu/close.gif" SelectAction="None" Text="业务优惠管理" Value="业务优惠管理"> <asp:TreeNode ImageUrl="~/Images/MP-frame_menu/close.gif" SelectAction="SelectExpand" Text="业务优惠" Value="业务优惠"></asp:TreeNode> </asp:TreeNode> <asp:TreeNode ImageUrl="~/Images/MP-frame_menu/close.gif" SelectAction="None" Text="用户变更管理" Value="用户变更管理"> <asp:TreeNode ImageUrl="~/Images/MP-frame_menu/close.gif" SelectAction="SelectExpand" Text="搬迁管理" Value="搬迁管理"></asp:TreeNode> <asp:TreeNode ImageUrl="~/Images/MP-frame_menu/close.gif" SelectAction="SelectExpand" Text="过户管理" Value="过户管理"></asp:TreeNode> <asp:TreeNode ImageUrl="~/Images/MP-frame_menu/close.gif" SelectAction="SelectExpand" Text="报停管理" Value="报停管理"></asp:TreeNode> <asp:TreeNode ImageUrl="~/Images/MP-frame_menu/close.gif" SelectAction="SelectExpand" Text="变更用气性质" Value="变更用气性质"></asp:TreeNode> <asp:TreeNode ImageUrl="~/Images/MP-frame_menu/close.gif" SelectAction="SelectExpand" Text="燃气改管" Value="燃气改管"></asp:TreeNode> <asp:TreeNode ImageUrl="~/Images/MP-frame_menu/close.gif" Text="其他" Value="其他"> </asp:TreeNode> </asp:TreeNode> </Nodes> </asp:TreeView> </td> </tr> </table> </form> </body> </html>
我觉得其他的代码都不在重要了。这个 frame_left_pager中的一行代码才是最关键的：
<asp:TreeNode......NavigateUrl="~/YYXZGL/MY$XXHY/XZ_YHSQ.aspx" SelectAction="SelectExpand"
Text="新装_用户申请" Value="新装_用户申请" Target="mainFrame">
</asp:TreeNode>
我是用原生的控件TREEvIEW来写的，treeView的属性NavigateUrl定义要链接的页面，SelectAction属性让你可以拓展链接。最重要的是这个Target标签，定义到那个框架，不明白的同学可以去查找这方面的资料。这里的mainFame就是我们的主界面的name标签，在我们的frame_index_pager页面的 frame set中是这样定义的：
<frame src="....." name="mainFrame" id="mainFrame" scrolling="yes" frameborder="0" noresize="noresize" />
这样我们就可以点击菜单把想要的页面直接连接到右边的框架中显示了。结果如下图：
当然，这个tree你可以使用其他的东西，比如easyui啊啥的都可以用的哈！