核心代码
Index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% 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 'index.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"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/styles/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/styles/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/styles/manager/init.css"> <script type="text/javascript" src="${pageContext.request.contextPath }/scripts/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/scripts/jquery.easyui.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/scripts/manager/init.js"></script> </head> <body> <div id="box" class="easyui-layout"> <!-- north开始 --> <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> <!-- north结束 --> <%--<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> --%> <!--west开始 --> <div data-options="region:'west',title:'导航菜单',split:true" style="width:200px;"> <div id="nav" class="easyui-accordion" data-options="fit:true,border:false" style="padding-right: 5px; padding-left: 5px;"> <div title="管理员管理" data-options="iconCls:'icon-save'"> <ul> <li><a href="${pageContext.request.contextPath }/backstage/admin/admin_list.jsp">管理员列表</a> </li> </ul> </div> <div title="会员管理"> <ul> <li><a href="#">会员列表</a></li> </ul> </div> <div title="商品类别管理" data-options="iconCls:'icon-reload'" style="padding:10px;"> <ul> <li><a href="${pageContext.request.contextPath }/backstage/goodstype_list.jsp">商品类别列表</a></li> </ul> </div> <div title="商品管理" data-options="iconCls:'icon-reload'" style="padding:10px;"> <ul> <li><a href="#">商品列表</a></li> </ul> </div> </div> </div> <!-- west结束 --> <!-- center开始 --> <div data-options="region:'center'" style=""> <div id="tt" class="easyui-tabs" data-options="fit:true"> <div title="后台操作的界面" style="padding:20px;">后台操作界面的说明</div> </div> </div> <!-- center结束 --> <!-- south开始 --> <div data-options="region:'south',split:true" style="height:25px; padding: 5px; background: #D2E0F2;"> <div align="center">版权归河北软件职业技术学院 @河软CSDN乐知学院所有2013-2020</div> </div> <!-- south结束 --> </div> </body> </html>
Init.js
$(document).ready(function() { //获取所有的a元素 var $as = $("li>a"); //获取id=tabs的元素 var $tt = $("#tt"); //注册点击事件 $as.bind("click", function() { var text = $(this).text(); var url = this.href; //根据标题看这个面板是否存在 if ($tt.tabs("exists", text)) { //如果存在 变成被选中的状态 $tt.tabs("select", text); } else { //如果不存在则添加 $tt.tabs('add', { title : text, closable : true, content : createFrame(url), //创建面板内容 tools : [{ iconCls : 'icon-mini-refresh', handler : function() { alert('refresh'); } }] }); } return false; }); }); //创建面板 function createFrame(url) { var src = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>'; return src; }