最近几天来回折腾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
});
}
}