效果：
Layout.xml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
"http://tiles.apache.org/dtds/tiles-config_2_1.dtd">
<tiles-definitions>
<definition name="admin" template="/WEB-INF/layouts/admin.jsp">
<put-attribute name="header" value="/WEB-INF/views/header.jsp" />
<put-attribute name="menu" value="/WEB-INF/views/menu.jsp" />
<put-attribute name="footer" value="/WEB-INF/views/footer.jsp" />
</definition>
<definition name="content" template="/WEB-INF/layouts/content.jsp">
</definition>
</tiles-definitions>
views.xml:
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN" "http://tiles.apache.org/dtds/tiles-config_2_1.dtd"> <tiles-definitions> <!-- 服务实施 --> <definition extends="content" name="esbService/define"> <put-attribute name="body" value="/WEB-INF/views/service/serviceImplement/serviceDefine.jsp"/> </definition> <definition extends="content" name="esbService/test"> <put-attribute name="body" value="/WEB-INF/views/service/serviceImplement/serviceTest.jsp"/> </definition> ...
admin.jsp:
<body class="easyui-layout">
<!-- north -->
<div id="header" class="top_body" data-options="region:'north',border:false">
<tiles:insertAttribute name="header"/>
</div>
<!-- west -->
<div id="menu" data-options="region:'west',split:true"
style="width: 180px; padding: 1px; overflow: hidden;">
<div id="firstMenu" class="easyui-accordion" animate="false"
data-options="fit:true,border:false"></div>
</div>
<!-- center -->
<div id="content" data-options="region:'center'" style="overflow: hidden;">
<div id="centerTabs" class="easyui-tabs"
data-options="fit:true,border:false">
<div title="<spring:message code="index.welcomeAccess" text="欢迎界面"/>"
style="padding: 20px; overflow: hidden;">
<div id="container">
<tiles:insertAttribute name="body"/>
</div>
</div>
</div>
<!-- centerMenu -->
<div id="tabsMenu" style="width: 100px; display: none;">
<div type="close">
<spring:message code="index.close" text="关闭"/>
</div>
<div type="closeOther">
<spring:message code="index.closeOther" text="关闭其他" />
</div>
<div type="closeAll">
<spring:message code="index.closeAll" text="关闭所有"/>
</div>
</div>
</div>
<!-- south -->
<div id="footer" data-options="region:'south',border:false"
style="height: 20px; padding: 3px; background: #cee0e7; overflow: hidden;">
<tiles:insertAttribute name="footer"/>
</div>
</body>
index.js:
$(function () {
// west
var firstMenu = $('#firstMenu');
var fistMenuUrl = root + 'js/app/home/menuMain.json';
// ================================================================================
$.ajax({
url : fistMenuUrl,
dataType : 'json',
success : function(data) {
addAccordions(data)
}
});
addAccordions = function(data) {
var firstViewTitle;
if (data.length > 0) {
firstViewTitle = data[0].title;
for ( var i = 0; i < data.length; i++) {
firstMenu.accordion('add', {
title : data[i].title,
iconCls : data[i].iconCls,
content : secondMenu(data[i].id)
});
}
firstMenu.accordion('select', firstViewTitle);
}
}
secondMenu = function(pid) {
var url = root + 'js/app/home/tree_data' + pid + '.json';
return '<ul data-options="onClick:menuOnClick,onDblClick:menuonDblClick" class="easyui-tree" url="'
+ url + '"></ul>';
}
menuOnClick = function(node) {
addTab(node);
}
menuonDblClick = function(node) {
if (node.state == 'closed') {
$(this).tree('expand', node.target);
} else {
$(this).tree('collapse', node.target);
}
}
// center
var centerTabs = $('#centerTabs');
var tabsMenu = $('#tabsMenu');
centerTabs.tabs({
fit : true,
border : false,
onContextMenu : function(e, title) {
e.preventDefault();
tabsMenu.menu('show', {
left : e.pageX,
top : e.pageY
}).data('tabTitle', title);
}
});
tabsMenu.menu({
onClick : function(item) {
var curTabTitle = $(this).data('tabTitle');
var type = $(item.target).attr('type');
if (type === 'refresh') {
refreshTab(curTabTitle);
return;
}
if (type === 'close') {
var t = centerTabs.tabs('getTab', curTabTitle);
if (t.panel('options').closable) {
centerTabs.tabs('close', curTabTitle);
}
return;
}
var allTabs = centerTabs.tabs('tabs');
var closeTabsTitle = [];
$.each(allTabs, function() {
var opt = $(this).panel('options');
if (opt.closable && opt.title != curTabTitle
&& type === 'closeOther') {
closeTabsTitle.push(opt.title);
} else if (opt.closable && type === 'closeAll') {
closeTabsTitle.push(opt.title);
}
});
for ( var i = 0; i < closeTabsTitle.length; i++) {
centerTabs.tabs('close', closeTabsTitle[i]);
}
}
});
addTab = function(node) {
if (centerTabs.tabs('exists', node.text)) {
centerTabs.tabs('select', node.text);
} else {
if (node.attributes && node.attributes.url
&& node.attributes.url.length > 0) {
var url = root + node.attributes.url;
centerTabs.tabs(
'add',
{
title : node.text,
iconCls : node.iconCls,
closable : true,
content : '<iframe src="'
+ url
+ '" frameborder="0" style="border:0;width:100%;height:99.4%;"></iframe>'
});
}
}
}
});
MenuMain.json:
[
{
"id":"01",
"title":"服务实施"
},
{
"id":"02",
"title":"服务目录"
},
{
"id":"03",
"title":"服务监控"
},
{
"id":"04",
"title":"服务控制"
},
{
"id":"05",
"title":"系统管理"
}
]
tree_data01.json:
[{
"attributes" : {
"url" : "esbService/define.do"
},
"id" : "010101",
"state" : "open",
"text" : "服务定义"
}, {
"attributes" : {
"url" : "esbService/proxy.do"
},
"id" : "010102",
"state" : "open",
"text" : "服务封装"
}, {
"attributes" : {
"url" : "esbService/route.do"
},
"id" : "010103",
"state" : "open",
"text" : "服务路由"
}]
================================================================================
新JS：（从数据库中获取菜单）
含菜单图标
$(function () {
// west
var firstMenu = $('#firstMenu');
//var fistMenuUrl = root + 'js/app/home/menuMain.json';
// ================================================================================
$.ajax({
url : root + "login/initRootMenu.do",
type : 'POST',
dataType : 'json',
success : function(data) {
addAccordions(data);
addHome();
}
});
addAccordions = function(data) {
var firstViewTitle;
if (data.length > 0) {
firstViewTitle = data[0].menuName;
for ( var i = 0; i < data.length; i++) {
firstMenu.accordion('add', {
title : data[i].menuName,
iconCls : 'icon'+(i+1),
left: 50,
content : secondMenu(data[i].id)
});
}
firstMenu.accordion('select', firstViewTitle);
}
}
secondMenu = function(pid) {
var url = root + "login/initLeafMenu.do?pid="+pid;
return '<ul data-options="onClick:menuOnClick,onDblClick:menuonDblClick" class="easyui-tree" url="'
+ url + '"></ul>';
}
menuOnClick = function(node) {
if($(this).tree("isLeaf",node.target)){
addTab(node);
}else{
if (node.state == 'closed') {
$(this).tree('expand', node.target);
} else {
$(this).tree('collapse', node.target);
}
}
}
menuonDblClick = function(node) {
if (node.state == 'closed') {
$(this).tree('expand', node.target);
} else {
$(this).tree('collapse', node.target);
}
}
// center
var centerTabs = $('#centerTabs');
var tabsMenu = $('#tabsMenu');
centerTabs.tabs({
fit : true,
border : false,
onContextMenu : function(e, title) {
e.preventDefault();
tabsMenu.menu('show', {
left : e.pageX,
top : e.pageY
}).data('tabTitle', title);
},
tools : [{
iconCls : 'ope-add',
text : '添加组件',
plain:false,
handler : function() {
addAppDialog(1);
}
}]
});
tabsMenu.menu({
onClick : function(item) {
var curTabTitle = $(this).data('tabTitle');
var type = $(item.target).attr('type');
if (type === 'refresh') {
refreshTab(curTabTitle);
return;
}
if (type === 'close') {
var t = centerTabs.tabs('getTab', curTabTitle);
if (t.panel('options').closable) {
centerTabs.tabs('close', curTabTitle);
}
return;
}
var allTabs = centerTabs.tabs('tabs');
var closeTabsTitle = [];
$.each(allTabs, function() {
var opt = $(this).panel('options');
if (opt.closable && opt.title != curTabTitle
&& type === 'closeOther') {
closeTabsTitle.push(opt.title);
} else if (opt.closable && type === 'closeAll') {
closeTabsTitle.push(opt.title);
}
});
for ( var i = 0; i < closeTabsTitle.length; i++) {
centerTabs.tabs('close', closeTabsTitle[i]);
}
}
});
addHome = function(){
var title = '个人工作台';
if(centerTabs.tabs('exists', title)){
centerTabs.tabs('select', title);
}else{
var url = "/ESBConsole/index.do";
centerTabs.tabs(
'add',
{
title : title,
closable : false,
content : '<iframe src="'
+ url
+ '" frameborder="0" style="border:0;width:100%;height:99.4%;"></iframe>'
});
}
}
addTab = function(node) {
if (centerTabs.tabs('exists', node.text)) {
centerTabs.tabs('select', node.text);
} else {
if (node.attributes && node.attributes.url
&& node.attributes.url.length > 0) {
var url = root + node.attributes.url;
centerTabs.tabs(
'add',
{
title : node.text,
iconCls : node.iconCls,
closable : true,
selected: true,
content : '<iframe src="'
+ url
+ '" frameborder="0" style="border:0;width:98%;height:99.4%;overflow:hidden;"></iframe>'
});
}
}
}
});
/**
* 初始化根节点
* @param session
* @return
*/
@RequestMapping(value = "login/initRootMenu.do", method = RequestMethod.POST)
@ResponseBody
public List<SysMenu> initRootMenu(HttpSession session) {
List<SysMenu> menuList = (List<SysMenu>) session.getAttribute(SessionKeys.SESSION_USER_MENU);
List<SysMenu> rootList = new ArrayList<SysMenu>();
Map<Long,List<SysMenu>> leafMap = new HashMap<Long,List<SysMenu>>();
if(menuList == null || menuList.size() == 0) return rootList;
Map<Long,SysMenu> allMenu = new HashMap<Long,SysMenu>(); //所有Menu
List<SysMenu> tmpList = new ArrayList<SysMenu>();
tmpList.addAll(menuList);
for(int i = tmpList.size() -1;i>=0;i--){
SysMenu tmp = tmpList.get(i);
if(!allMenu.containsKey(tmp.getId())){
allMenu.put(tmp.getId(), tmp);
}
if(tmp.getSupId() == -1l){
rootList.add(tmp);
tmpList.remove(tmp);
}
}
if(tmpList.size() > 0){
for(int i = tmpList.size() -1;i>=0;i--){
SysMenu m = tmpList.get(i);
Long supId = m.getSupId();
if(leafMap.containsKey(supId)){
List<SysMenu> leafMenu = leafMap.get(supId);
leafMenu.add(m);
}else{
List<SysMenu> leafMenu = new ArrayList<SysMenu>();
leafMenu.add(m);
leafMap.put(supId, leafMenu);
}
}
}
for(SysMenu m : rootList){
List<SysMenu> leafMenu = leafMap.get(m.getId());
m.setChildren(leafMenu);
}
session.setAttribute(SessionKeys.SESSION_USER_LEAF_MENU, leafMap);
session.setAttribute(SessionKeys.SESSION_USER_ALL_MENU, allMenu);
session.setAttribute(SessionKeys.SESSION_USER_ROOT_MENU, rootList);
//菜单Order排序
Collections.sort(rootList, new MenuComparator());
return rootList;
}
/**
* 初始化叶子节点
* @param id
* @param session
* @return
*/
@RequestMapping(value = "login/initLeafMenu.do", method = RequestMethod.POST)
@ResponseBody
public List<MenuTemp> initLeafMenu(@RequestParam(required=false) Long id,@RequestParam Long pid,HttpSession session) {
if(id==null){
id=pid;
}
Map<Long,List<SysMenu>> leafMap = (Map<Long, List<SysMenu>>) session.getAttribute(SessionKeys.SESSION_USER_LEAF_MENU);
List<MenuTemp> result = new ArrayList<MenuTemp>();
if(leafMap == null) return result;
List<SysMenu> leafList = leafMap.get(id);
leafList = leafList == null ? new ArrayList<SysMenu>() : leafList;
//菜单Order排序
Collections.sort(leafList, new MenuComparator());
for(SysMenu m : leafList){
MenuTemp tmp = new MenuTemp();
tmp.setId(m.getId());
tmp.setText(m.getMenuName());
List<SysMenu> chilren = leafMap.get(m.getId());
if(chilren!=null&&!chilren.isEmpty()){
tmp.setState("closed");
}else{
tmp.setState("open");
}
Attributes a = new Attributes();
a.setUrl(m.getMenuUrl());
tmp.setAttributes(a);
result.add(tmp);
}
return result;
}
CSS：
.icon1{
background: url('../images/icon_01.png') no-repeat;
}
.icon2{
background: url('../images/icon_02.png') no-repeat;
}
.icon3{
background: url('../images/icon_03.png') no-repeat;
}
.icon4{
background: url('../images/icon_04.png') no-repeat;
}
.icon5{
background: url('../images/icon_05.png') no-repeat;
}
.icon6{
background: url('../images/icon_06.png') no-repeat;
}
.icon7{
background: url('../images/icon_07.png') no-repeat;
}
.icon8{
background: url('../images/icon_08.png') no-repeat;
}
。。。
相关推荐
左侧二级菜单右侧对应切换内容tab 文件夹下 tab.html 文件
仿网易邮箱的点击左侧菜单右侧出现可关闭的选项卡功能，jquery+css+div代码
左侧点击菜单tab切换
jQuery左侧点击tab切换代码是一款左侧菜单选项卡点击tab切换效果代码。
仅适用新手学习和参考，仅适用新手学习和参考，仅适用新手学习和参考。重要的事情说三遍，请高手飘过。只给新手学习和参考。
今天小编就为大家分享一篇使用layui实现的左侧菜单栏以及动态操作tab项方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用layui实现的左侧菜单栏以及动态操作tab项（动态生成的菜单栏）使用layui实现的左侧菜单栏以及动态操作tab项
layui，登陆，左侧菜单实现
tab菜单，网上常见的tab菜单。类似于网上常见的tab菜单
点击左侧菜单栏选项时，在右侧生成对应tab页面，包含嵌套iframe和div实现方法
左侧竖向选项卡TAB导航烂,支持viewpager，不依赖viewpager,支持自定义tab样式,自带切换动画
之前我们分享过很多HTML5/CSS3菜单，应该说大部分都还比较实用华丽，今天我们要来分享另外一种形式的HTML5菜单——HTML5 Tab菜单...这款Tab菜单是利用HTML5和SVG实现的，Tab菜单的外观非常漂亮，而且Tab切换也很方便。
左侧显示的tab选项卡菜单，一般的TAB是显示在顶部，也就是上边，下面才显示对应的内容，这款TAB是左侧显示导航，右侧显示主体内容，用本款TAB你就可设计成一个“关于我们”的页面，就比如本示例的菜单效果，比较不错...
这是一个只含有导航树和点击导航树出现tab选项卡的简单案例!
横向和树形tab横向和树形tab横向和树形tab横向和树形tab横向和树形tab横向和树形tab横向和树形tab横向和树形tab
jQuery左侧点击tab切换代码是一款左侧菜单选项卡点击tab切换效果代码。
左侧竖直tab导航栏, 竖直选项卡 Verticaltablayout+Viewpager解决有时候需要垂直的tab导航,并带切换动画,直接可以拿来用
仿支付宝滑动菜单教程的最终作品，Tab菜单，和以前的菜单外形及最终效果是一样的，不过代码就差很远了，有兴趣的朋友可以下载两个菜单比较一下，对研究CSS很有帮助。本菜单整体可看作是一个滑动门，每滑一下会出来二...