最好的教程是官方的文档和手册

最近几天来回折腾EASY UI ，虽然界面难看了些，但功能还算全备。

布局：

  1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2 <%@include file="/taglibs.jsp" %>
  3 <html>
  4 <head>
  5 
  6 <title>羚锐信息综合管理平台 </title>
  7     <style type="text/css">  
  8         #menu {  
  9             width:200px;
 10      
 11             /*border:1px solid red;*/  
 12         }  
 13         #menu ul {  
 14             list-style: none;  
 15             padding: 0px;  
 16             margin: 0px;  
 17         
 18         }  
 19         #menu ul li {  
 20             border-bottom: 1px solid #fff;
 21             text-align: center;  
 22   
 23         }  
 24         #menu ul li a {  
 25             /*先将a标签转换为块级元素，才能设置宽和内间距*/  
 26             display: block;  
 27             background-color: #458fce;  
 28             color: #fff;  
 29             padding: 5px;  
 30 
 31             text-decoration: none;  
 32         }  
 33         #menu ul li a:hover {  
 34             background-color: #008792;  
 35         }  
 36           
 37     </style> 
 38 </head>
 39 <script type="text/javascript">  
 40         function addTab(title, url){
 41             if ($('#tt').tabs('exists', title)){
 42                 $('#tt').tabs('select', title);
 43             } else {
 44                 var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="100%;height:100%;"></iframe>';
 45                 $('#tt').tabs('add',{
 46                     title:title,
 47                     content:content,
 48                     closable:true
 49                 });
 50             }
 51         }
 52 </script>
 53 <body class="easyui-layout">
 54     <div region="north" style="height: 65px; background: #458fce; border="false">  
 55             <div style="float:left" ><img src="${basePath }/img/logo.png"/></div>
 56             <div style="float:right;" ><h1 style="color:white;" >当前用户:${username} <a href="${basePath}/logout">退出</a></h1></div>
 57     
 58     </div>
 59     <div region="west" style=" 200px" title="快速导航" split="true">  
 60             <div data-options="border:false" class="easyui-accordion" style="200px;">   
 61                 <div id="menu" title="用户管理" data-options="iconCls:'icon-save',selected:true" >   
 62                     <ul>
 63                         <li><a href="#"  onclick="addTab('用户管理','${basePath }/items/list')">用户添加</a>
 64                         <li><a href="#"  onclick="addTab('lingrui','http://www.lingrui.com')">lingrui</a>
 65                     </ul>
 66                 </div>   
 67                 <div title="权限管理" data-options="iconCls:'icon-reload'" style="padding:10px;">   
 68                     content2    
 69                 </div>   
 70                 <div title="客户管理" data-options="iconCls:'icon-reload'" style="padding:10px;">   
 71                     content2    
 72                 </div>   
 73                 <div title="物料管理" data-options="iconCls:'icon-reload'" style="padding:10px;">   
 74                     content2    
 75                 </div>   
 76                 
 77                 <div title="菜单管理">   
 78                     <div style="margin-bottom:10px">
 79                         <a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>
 80                         <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
 81                         <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>
 82                     </div>
 83                 </div>   
 84             </div>  
 85     </div>
 86     <div data-options="region:'center'" style="background:#eee;">  
 87     
 88         <div id="tt" class="easyui-tabs" fit="true" ">  
 89             <div title="首页" data-options="iconCls:'icon-home'">
 90                 <div align="center" style="padding-top: 100px"><font color="red" size="10">欢迎使用<br>羚锐综合管理平台</font></div>  
 91             </div>  
 92         </div>
 93         
 94     </div>
 95     <div region="south" style="height: 25px;padding: 5px" align="center"> 
 96      Copyright © 2018-2020 河南羚锐制药股份有限公司 版权所有 
 97     </div>
 98 </body>
 99 
100 
101 </html>

其中，为了在tabs框中打开指定地址，来回折腾多次，最后，还是通过在线文档，用简单的方法测试通过。

http://www.jeasyui.net/tutorial/17.html

<div style="margin-bottom:10px">
	<a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>
	<a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
	<a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>
</div>
<div id="tt" class="easyui-tabs" style="400px;height:250px;">
	<div title="Home">
	</div>
</div>

　　addTab函数，最简单的示例，打通了多日的痛点

function addTab(title, url){
	if ($('#tt').tabs('exists', title)){
		$('#tt').tabs('select', title);
	} else {
		var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="100%;height:100%;"></iframe>';
		$('#tt').tabs('add',{
			title:title,
			content:content,
			closable:true
		});
	}
}