<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script> </head> <body class="easyui-layout"> <!-- data-options如果html元素是easyui组件，可以用data-options设置属性 --> <div region="north" style="height: 100px" title="xxx系统">北部区域</div> <div data-options="region:'west'" style="width: 150px" title="系统菜单"> <!-- 展示折叠面板 --> <div class="easyui-accordion" data-options="fit:true"> <div title="基本功能"> <a id="btn" class="easyui-linkbutton" data-options="iconCls:'icon-save'">点击</a> <script type="text/javascript"> $("#btn").click(function(){ //判断 var r = $("#myTabs").tabs('exists','测试面板'); if(r){ //选中 $("#myTabs").tabs('select','测试面板'); }else{ //调用tabs组件方法。中部区域中tabs选项卡 添加新面板 $("#myTabs").tabs('add',{ title:'测试面板', iconCls:'icon-add', closable:true, content:'<iframe src="../pages/base/area.jsp" frameborder="0" width="100%" height="100%"></iframe>' }); } }) </script> </div> <div title="系统管理"></div> </div> </div> <div data-options="region:'center'"> <!-- 展示选项卡面板 --> <div id="myTabs" class="easyui-tabs" data-options="fit:true"> <div title="基本功能"></div> </div> </div> <!-- <div data-options="region:'east'" style="width: 150px">东部区域</div> --> <div data-options="region:'south'" style="height: 50px">南部区域</div> </body> </html>