用Iframe实现左边TreeView导航,右边显示相应内容的布局

建立3个web页面,MainWeb.aspx, LeftTree.aspx, RightMain.aspx.

其中,MainWeb是容器,里面放置了2个Iframe,分别用来存放TreeView的导航页(LeftTree.aspx) 和右边的内容页(RightMain.aspx)。

MainWeb.aspx的前台代码:

ContractedBlock.gif ExpandedBlockStart.gif Code
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    
<title>首页</title>
</head>
<body>
    
<form id="form1" runat="server">
    
<div>
    
<center>
    
<h1>电话簿</h1>
    
    
</center>
    
<table border="0" width="100%" cellpadding="0" class="main-table">
        
<tr>
            
<td align="Left"  style="width:23%">   
                
<iframe id="LeftTree" name="LeftTree" src="LeftTree.aspx" class="inset-table" width="300" height="600"></iframe>                                                                                                                                                                                        
            
</td> 
            
            
<td align="left" style="width:75%">
               
<iframe id="RightMain" name="RightMain" src="RightMain.aspx" class="outset-table" width="100%" height="600"   align="middle"></iframe>
            
</td>                                                                                                                                                                                     
        
</tr>                                                                                                                                                                                           
    
</table>    
    
</div>
    
</form>
</body>
</html>

TreeView导航页面LeftTree.aspx的前台代码:

注意设置节点的Target为要显示到的Iframe,NavigateUrl为要显示的页面地址。

ContractedBlock.gif ExpandedBlockStart.gif Code
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    
<title>目录</title>
</head>
<body>
    
<form id="form1" runat="server">
    
<div>
        
<table>
            
<tr>
                
<td>功能列表</td>
            
</tr>
            
<tr>
                
<td>
                    
<asp:TreeView ID="TreeView1" runat="server" Target="RightMain">
                            
<Nodes>
                               
<asp:TreeNode Text="功能" Value="功能" Expanded="True" SelectAction="SelectExpand">
                                
<asp:TreeNode Text="联系人管理" Value="联系人管理" Expanded="False" SelectAction="Expand" Target="RightMain">
                                
<asp:TreeNode Text="添加联系人" Value="添加联系人" NavigateUrl="~/Web/AddPerson.aspx" Target="RightMain"></asp:TreeNode>
                                 
<asp:TreeNode Text="查找编辑联系人" Value="查找编辑联系人" NavigateUrl="~/Web/FindPerson.aspx" Target="RightMain"></asp:TreeNode>
                                
</asp:TreeNode>
                                
<asp:TreeNode Text="分组管理" Value="分组管理" Expanded="False" SelectAction="Expand" Target="RightMain">
                                    
<asp:TreeNode Text="添加分组" Value="添加分组" NavigateUrl="~/Web/Default.aspx" Target="RightMain"></asp:TreeNode>
                                    
<asp:TreeNode Text="修改分组" Value="修改分组" NavigateUrl="~/Web/Default.aspx" Target="RightMain"></asp:TreeNode>
                                
</asp:TreeNode>
                                
</asp:TreeNode>
                         
</Nodes>
                    
</asp:TreeView>
                
</td>
            
</tr>           
        
</table>
    
</div>
    
</form>
</body>
</html>

 

转载于:https://www.cnblogs.com/niuniu1985/archive/2009/10/30/1592940.html

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值