1, 主页HTML
引包
<link rel="stylesheet" type="text/css" href="../js_lib/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js_lib/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../res/css/mlh.css">
<script type="text/javascript" src="../js_lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../js_lib/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js_lib/easyui/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../js/admin.js"></script>
DIV设置north（上，标题）south（下）west（左，菜单）east（右）center（居中，主工作区，Tab选项卡）
<div id="cc" class="easyui-layout">
<div id="c_north" data-options="region:'north'">
<div id="c_west" data-options="region:'west',split:true" title="导航菜单" style="width: 200px;"></div>
<div id="c_center" data-options="region:'center', border: false">
<div id="c_tabs" class="easyui-tabs" data-options="fit:true, border: false">
<div id="tab_index" title="首页">首页</div>
</div>
</div>
</div>
2, 主页JS
菜单项
var menuData = [
{id: "2",text: "系统配置",linkUrl:},
{id: "3",text: "业务管理",linkUrl: }
];
菜单节点（）
$(function() {
$('#cc').layout({fit: true});
// 菜单树节点点击事件
$('#c_west').tree({
onClick: function(node) {
var href = node.linkUrl;
if (!href) return;
var tab = $('#c_tabs').tabs('getTab', 1);
if (tab) {// 存在则先关闭
$('#c_tabs').tabs('close', 1);
}
$('#c_tabs').tabs('add', {
closable: true,
cache: false,
title: node.text,
border: false,
index: 1
});
tab = $('#c_tabs').tabs('getTab', 1);
tab.panel('refresh', href);
}
});
// 加载菜单树数据，菜单默认是全部展开的
$('#c_west').tree('loadData', menuData);
// 皮肤
$('#cb-theme').combobox({
data: [
{value:'default',text:'Default'},
{value:'gray',text:'Gray'},
{value:'metro',text:'Metro'},
{value:'bootstrap',text:'Bootstrap'}
],
editable: false,
panelHeight: 'auto',
onChange: function(theme) {
var link = $(document).find('link:first');
link.attr('href', '../js_lib/easyui/themes/'+theme+'/easyui.css');
},
onLoadSuccess: function() {
$(this).combobox('setValue', 'default');
}
});
});
3，tab选项卡页面
<div class="easyui-layout" style="width: 100%; height: 100%;" data-options="region:'center'" >
<div id="tab_index" title="Tab1">hello</div>
</div>
4，controller层
@RequestMapping("/controller")
public class Controller {
@RequestMapping("/admin")
public String index(HttpServletRequest request) {
return "ui/Tab1";
}
转载请注明原文地址: https://ju.6miu.com/read-900256.html
