<%@ 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>layout</title> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css"></link> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css"></link> <script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> $(function() { $("#aa1").click(function() { var til = $(this).text(); if($("#tt").tabs("exists",til)) { $("#tt").tabs("select",til) } else { $('#tt').tabs('add',{ padding:"20px", title:til, content:'Tab Body', href:"EasyUI_test", closable:true, tools:[{ iconCls:'icon-mini-refresh', handler:function(){ alert('refresh'); } }] }); } }); $("#bb1").click(function() { var tit = $("#bb1").text(); if($("#tt").tabs('exists',tit)) { $("#tt").tabs("select",tit); } else { $("#tt").tabs("add",{ title:tit, content:"这里是这个页面的内容", iconCls:"icon-edit", closable:true }) } }) $("#cc1").click(function() { var ti = $(this).text(); if($("#tt").tabs("exists",ti)) { $("#tt").tabs("select",ti) } else { $("#tt").tabs('add',{ title:ti, content:"个人信息的内容", closable:true, iconCls:"icon-back", padding:"20px" }) } }) }); </script> </head> <body class="easyui-layout"> <div data-options="border:false,region:'north',title:'顶部的标题栏',href:'EasyUI_test',split:true" style="padding:5px;height:150px;">这里是一段内容</div> <div data-options="border:false,region:'west',title:'左边的标题栏',split:true" style="padding:5px;200px;"> <div id="aa" class="easyui-accordion" data-options="fit:true" style="300px;height:200px;"> <div title="Title1" data-options="iconCls:'icon-save',selected:true" style="overflow:auto;padding:10px;"> <h3 style="color:#0099FF;">你好,我是标题</h3> <p>你好, 我是这里的内容, 这里可以写很多</p> <a class="easyui-linkbutton" href="http://www.baidu.com">百度链接</a><br> <a id="aa1" href="#" class="easyui-linkbutton">用户注册</a><br> <a id="bb1" href="#" class="easyui-linkbutton">用户编辑</a><br> <a id="cc1" href="#" class="easyui-linkbutton">个人信息</a><br> </div> <div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px;"> content2 </div> <div title="Title3" data-options="iconCls:'icon-back'"> content3 </div> </div> </div> <div id="tt" class="easyui-tabs" data-options="border:false,region:'center',title:'右边的标题栏, 也是中间的'" style="padding:5px;background:#eee;"> <div title="Tab1" data-options="closable:true,iconCls:'icon-man'" style="padding:20px"> tab1<br> <a href="http://www.sina.com.cn">sina链接</a> </div> <div title="Tab2" data-options="iconCls:'icon-add',closable:true" style="overflow:auto;padding:20px"> tab2 </div> <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px"> tab3 </div> </div> </body> </html>