easyui layout+tab+tree实现网站基本布局

代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.3.5/easyloader.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/default/easyui.css" >
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/icon.css">
  </head>
  
  <body class="easyui-layout">
<script type="text/javascript">
		var index = 0;
		function addPanel(url,title){
			if(!$('#tt').tabs('exists', title)){
				$('#tt').tabs('add',{
					title: title,
					content: '<iframe src="'+url+'" frameBorder="0" border="0"  style="width: 100%; height: 100%;"/>',
					closable: true
				});
			}else{
				$('#tabs').tabs('select', title);
			}
		}
		function removePanel(){
			var tab = $('#tt').tabs('getSelected');
			if (tab){
				var index = $('#tt').tabs('getTabIndex', tab);
				$('#tt').tabs('close', index);
			}
		}
	</script>
	
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:150px;">
    <ul id="tt1" class="easyui-tree">
    <li>
        <span>Folder</span>
        <ul>
            <li>
                <span>Sub Folder 1</span>
                <ul>
                    <li><span><a href="javascript:void(0)" οnclick="addPanel('tab1.jsp','tab1')">File 11</a></span></li>
                    <li><span><a href="javascript:void(0)" οnclick="addPanel('tab1.jsp','tab2')">File 11</a></span></li>
                    <li><span><a href="javascript:void(0)" οnclick="addPanel('tab1.jsp','tab3')">File 11</a></span></li>
                </ul>
            </li>
            <li><span><a href="javascript:void(0)" οnclick="addPanel('tab1.jsp','tab4')">File 11</a></span></li>
            <li><span><a href="javascript:void(0)" οnclick="addPanel('tab1.jsp','tab5')">File 11</a></span></li>
        </ul>
    </li>
    <li><span><a href="javascript:void(0)" οnclick="addPanel('tab1.jsp','tab6')">File 11</a></span></li>
</ul>
    	
    </div>
    <div id="tt" data-options="region:'center',title:'center title'"  class="easyui-tabs" style="padding:5px;background:#eee;">

    <div title="Tab1" style="padding:20px;display:none;">
        tab1
    </div>
    </div>
    
  </body>
</html>

效果


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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值