一般用eayUI搭建后台管理系统，想呈现如下界面功能。
代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'adminMain.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- 在esayUI官网上下载的jar，需要导入一下一个包-->
<link rel="stylesheet" type="text/css" href="./jquery-easyui-1.5.4.5/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="./jquery-easyui-1.5.4.5/themes/icon.css">
<script type="text/javascript" src="./jquery-easyui-1.5.4.5/jquery.min.js"></script>
<script type="text/javascript" src="./jquery-easyui-1.5.4.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="./jquery-easyui-1.5.4.5/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
tabCloseEven(); //menu菜单功能实现
$('.cs-navi-tab').click(function() {
var $this = $(this);
var href = $this.attr('src');
var title = $this.text();
addTab(title, href); //增加tab
});
});
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'adminMain.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- 在esayUI官网上下载的jar，需要导入一下一个包-->
<link rel="stylesheet" type="text/css" href="./jquery-easyui-1.5.4.5/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="./jquery-easyui-1.5.4.5/themes/icon.css">
<script type="text/javascript" src="./jquery-easyui-1.5.4.5/jquery.min.js"></script>
<script type="text/javascript" src="./jquery-easyui-1.5.4.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="./jquery-easyui-1.5.4.5/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
tabCloseEven(); //menu菜单功能实现
$('.cs-navi-tab').click(function() {
var $this = $(this);
var href = $this.attr('src');
var title = $this.text();
addTab(title, href); //增加tab
});
});
function addTab(title, url){
if ($('#tabs').tabs('exists', title)){
$('#tabs').tabs('select', title);//选中tab并显示
var currTab = $('#tabs').tabs('getSelected');
var url = $(currTab.panel('options').content).attr('src');
if(url != undefined && currTab.panel('options').title != 'Home') {
$('#tabs').tabs('update',{ //刷新这个tab
tab:currTab,
options:{
content:createFrame(url)
}
})
}
} else {
var content = createFrame(url);
$('#tabs').tabs('add',{
title:title,
content:content,
closable:true
});
}
tabClose(); //绑定menu菜单
}
function createFrame(url) {
var s = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
return s;
}
if ($('#tabs').tabs('exists', title)){
$('#tabs').tabs('select', title);//选中tab并显示
var currTab = $('#tabs').tabs('getSelected');
var url = $(currTab.panel('options').content).attr('src');
if(url != undefined && currTab.panel('options').title != 'Home') {
$('#tabs').tabs('update',{ //刷新这个tab
tab:currTab,
options:{
content:createFrame(url)
}
})
}
} else {
var content = createFrame(url);
$('#tabs').tabs('add',{
title:title,
content:content,
closable:true
});
}
tabClose(); //绑定menu菜单
}
function createFrame(url) {
var s = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
return s;
}
function tabClose() {
/*双击关闭TAB选项卡*/
$(".tabs-inner").dblclick(function(){ //jQuery双击方法
var subtitle = $(this).text();
$('#tabs').tabs('close',subtitle);
})
/*为选项卡绑定右键*/
$(".tabs-inner").bind('contextmenu',function(e){ //e这个参数对象封装鼠标坐标值
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
/*双击关闭TAB选项卡*/
$(".tabs-inner").dblclick(function(){ //jQuery双击方法
var subtitle = $(this).text();
$('#tabs').tabs('close',subtitle);
})
/*为选项卡绑定右键*/
$(".tabs-inner").bind('contextmenu',function(e){ //e这个参数对象封装鼠标坐标值
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
var subtitle =$(this).text();
$('#mm').data("currtab",subtitle); //jQuery方法，向被选元素附加数据
$('#tabs').tabs('select',subtitle);
return false;
});
}
$('#tabs').tabs('select',subtitle);
return false;
});
}
function tabCloseEven() {
//刷新
$('#mm-tabupdate').click(function(){
var currTab = $('#tabs').tabs('getSelected');
var url = $(currTab.panel('options').content).attr('src');
if(url != undefined && currTab.panel('options').title != 'Home') {
$('#tabs').tabs('update',{
tab:currTab,
options:{
content:createFrame(url)
}
})
}
})
//关闭当前
$('#mm-tabclose').click(function(){
var currtab_title = $('#mm').data("currtab");
$('#tabs').tabs('close',currtab_title);
})
//全部关闭
$('#mm-tabcloseall').click(function(){
$('.tabs-inner span').each(function(i,n){ //i是循环index位置，n相当于this
var t = $(n).text();
if(t != 'Home') {
$('#tabs').tabs('close',t);
}
});
});
//关闭除当前之外的TAB
$('#mm-tabcloseother').click(function(){
var prevall = $('.tabs-selected').prevAll(); //jQuery遍历方法，prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素
var nextall = $('.tabs-selected').nextAll();
if(prevall.length>0){
prevall.each(function(i,n){ //i是当前循环次数
var t=$(n).text();
if(t != 'Home') {
$('#tabs').tabs('close',t);
}
});
}
if(nextall.length>0) {
nextall.each(function(i,n){
var t=$(n).text();
if(t != 'Home') {
$('#tabs').tabs('close',t);
}
});
}
return false;
});
//关闭当前右侧的TAB
$('#mm-tabcloseright').click(function(){
var nextall = $('.tabs-selected').nextAll();
if(nextall.length==0){
alert('后边没有啦~~');
return false;
}
nextall.each(function(i,n){
var t=$(n).text();
$('#tabs').tabs('close',t);
});
return false;
});
//关闭当前左侧的TAB
$('#mm-tabcloseleft').click(function(){
var prevall = $('.tabs-selected').prevAll();
if(prevall.length==0){
alert('到头了，前边没有啦~~');
return false;
}
prevall.each(function(i,n){
var t=$(n).text();
$('#tabs').tabs('close',t);
});
return false;
});
//刷新
$('#mm-tabupdate').click(function(){
var currTab = $('#tabs').tabs('getSelected');
var url = $(currTab.panel('options').content).attr('src');
if(url != undefined && currTab.panel('options').title != 'Home') {
$('#tabs').tabs('update',{
tab:currTab,
options:{
content:createFrame(url)
}
})
}
})
//关闭当前
$('#mm-tabclose').click(function(){
var currtab_title = $('#mm').data("currtab");
$('#tabs').tabs('close',currtab_title);
})
//全部关闭
$('#mm-tabcloseall').click(function(){
$('.tabs-inner span').each(function(i,n){ //i是循环index位置，n相当于this
var t = $(n).text();
if(t != 'Home') {
$('#tabs').tabs('close',t);
}
});
});
//关闭除当前之外的TAB
$('#mm-tabcloseother').click(function(){
var prevall = $('.tabs-selected').prevAll(); //jQuery遍历方法，prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素
var nextall = $('.tabs-selected').nextAll();
if(prevall.length>0){
prevall.each(function(i,n){ //i是当前循环次数
var t=$(n).text();
if(t != 'Home') {
$('#tabs').tabs('close',t);
}
});
}
if(nextall.length>0) {
nextall.each(function(i,n){
var t=$(n).text();
if(t != 'Home') {
$('#tabs').tabs('close',t);
}
});
}
return false;
});
//关闭当前右侧的TAB
$('#mm-tabcloseright').click(function(){
var nextall = $('.tabs-selected').nextAll();
if(nextall.length==0){
alert('后边没有啦~~');
return false;
}
nextall.each(function(i,n){
var t=$(n).text();
$('#tabs').tabs('close',t);
});
return false;
});
//关闭当前左侧的TAB
$('#mm-tabcloseleft').click(function(){
var prevall = $('.tabs-selected').prevAll();
if(prevall.length==0){
alert('到头了，前边没有啦~~');
return false;
}
prevall.each(function(i,n){
var t=$(n).text();
$('#tabs').tabs('close',t);
});
return false;
});
//退出
$("#mm-exit").click(function(){
$('#mm').menu('hide'); //隐藏menu菜单
})
}
</script>
$("#mm-exit").click(function(){
$('#mm').menu('hide'); //隐藏menu菜单
})
}
</script>
</head>
<body class="easyui-layout">
<!-- menu菜单 -->
<div id="mm" class="easyui-menu cs-tab-menu">
<div id="mm-tabupdate">刷新</div>
<div class="menu-sep"></div>
<div id="mm-tabclose">关闭</div>
<div id="mm-tabcloseother">关闭其他</div>
<div id="mm-tabcloseall">关闭全部</div>
<div class="menu-sep"></div>
<div id="mm-tabcloseright">关闭右侧</div>
</div>
<!-- <div class="easyui-layout" style="width:100%;min-height:630px;"> -->
<!-- 北部分 -->
<div id="north" data-options="region:'north'">
<div id="logo"><h2>后台管理大厅</h2></div>
<div id="functionBox"></div>
<div id="welcome"><span>欢迎：管理员！</span></div>
</div>
<!-- <div id="south" data-options="region:'south',split:true" style="height:50px;">
<p style="float:center;">版权所有 © 2014-2017</p>
</div> -->
<!-- <div data-options="region:'east',split:true" title="East" style="width:180px;">
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,dnd:true"></ul>
</div> -->
<!-- 左部分 -->
<div id="west" data-options="region:'west',split:true,collapsible:false" title="导航菜单" ">
<div class="easyui-accordion" >
<div id="firstMenu" title="公告管理">
<p><a href="javascript:void(0);" src="${pageContext.request.contextPath}/index.jsp" class="cs-navi-tab">窗口一</a></p>
<p><a href="javascript:void(0);" src="${pageContext.request.contextPath}/index.jsp" class="cs-navi-tab">窗口二</a></p>
</div>
<div id="firstMenu" title="企业管理" data-options="selected:true" style="padding:10px;">
<p><a href="javascript:void(0);" src="${pageContext.request.contextPath}/index.jsp" class="cs-navi-tab">窗口一</a></p>
<p><a href="javascript:void(0);" src="${pageContext.request.contextPath}/index.jsp" class="cs-navi-tab">窗口二</a></p>
</div>
<body class="easyui-layout">
<!-- menu菜单 -->
<div id="mm" class="easyui-menu cs-tab-menu">
<div id="mm-tabupdate">刷新</div>
<div class="menu-sep"></div>
<div id="mm-tabclose">关闭</div>
<div id="mm-tabcloseother">关闭其他</div>
<div id="mm-tabcloseall">关闭全部</div>
<div class="menu-sep"></div>
<div id="mm-tabcloseright">关闭右侧</div>
</div>
<!-- <div class="easyui-layout" style="width:100%;min-height:630px;"> -->
<!-- 北部分 -->
<div id="north" data-options="region:'north'">
<div id="logo"><h2>后台管理大厅</h2></div>
<div id="functionBox"></div>
<div id="welcome"><span>欢迎：管理员！</span></div>
</div>
<!-- <div id="south" data-options="region:'south',split:true" style="height:50px;">
<p style="float:center;">版权所有 © 2014-2017</p>
</div> -->
<!-- <div data-options="region:'east',split:true" title="East" style="width:180px;">
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,dnd:true"></ul>
</div> -->
<!-- 左部分 -->
<div id="west" data-options="region:'west',split:true,collapsible:false" title="导航菜单" ">
<div class="easyui-accordion" >
<div id="firstMenu" title="公告管理">
<p><a href="javascript:void(0);" src="${pageContext.request.contextPath}/index.jsp" class="cs-navi-tab">窗口一</a></p>
<p><a href="javascript:void(0);" src="${pageContext.request.contextPath}/index.jsp" class="cs-navi-tab">窗口二</a></p>
</div>
<div id="firstMenu" title="企业管理" data-options="selected:true" style="padding:10px;">
<p><a href="javascript:void(0);" src="${pageContext.request.contextPath}/index.jsp" class="cs-navi-tab">窗口一</a></p>
<p><a href="javascript:void(0);" src="${pageContext.request.contextPath}/index.jsp" class="cs-navi-tab">窗口二</a></p>
</div>
</div>
</div>
<div data-options="region:'center'">
<!-- tab区 -->
<div id="tabs" class="easyui-tabs" data-options="fit:true,border:false,plain:true">
<div title="Home" >
welcome
</div>
</div>
</div>
<!-- </div> -->
</body>
</html>