效果：
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;
}
。。。
相关推荐
在IT行业中，"左侧二级菜单右侧对应切换内容tab"是一种常见的网页设计模式，它提高了用户在网站或应用中的导航体验。这种设计通常用于有多个相关内容模块的页面，使得用户能够轻松地在不同的部分之间切换，而无需...
在"layui，登陆，左侧菜单实现"这个主题中，我们将深入探讨如何利用LayUI来创建动态加载的左侧菜单以及集成tab组件，以实现一个完整的登录功能和页面导航。 首先，我们需要了解LayUI的基础结构。LayUI的核心是layui...
本主题聚焦于使用C#进行Winform界面布局设计，特别是实现左侧菜单和右侧窗口的操作。Winform是.NET Framework提供的一个强大的用户界面设计工具，它允许开发者创建具有丰富功能的桌面应用。 首先，我们要理解...
在IT行业中，网页交互设计是用户体验的关键因素之一，而“左侧点击菜单tab切换网页特效”是一种常见的网页设计手法，主要用于提升网站的导航性和用户友好性。这种特效使得用户可以通过左侧的菜单栏轻松地在不同的...
在网页设计和开发中，"横向和树形tab菜单"是一种常见的用户界面元素，用于组织和展示大量信息。这种设计模式有效地利用空间，提供清晰的导航结构，帮助用户快速找到所需内容。以下是对这一主题的详细说明： 1. **...
仅适用新手学习和参考，仅适用新手学习和参考，仅适用新手学习和参考。重要的事情说三遍，请高手飘过。只给新手学习和参考。
本文将基于Layui提供的左侧菜单栏组件和Tab页签组件进行说明。 首先，左侧菜单栏是Web界面中常见的导航结构之一，它能够清晰地展示网站或应用的主功能菜单和子菜单。使用Layui，我们可以轻松实现这一功能。在Layui...
用户可以在左侧菜单栏选择不同功能，对应的选项卡在右侧展示内容，同时可以自由切换和关闭选项卡，提高了工作效率。 综上所述，这个项目展示了如何使用layui框架构建一个具有动态菜单和选项卡功能的后台管理系统。...
在网页设计中，左侧导航和tab页切换是常见的交互元素，它们可以有效地组织内容并提供用户友好的浏览体验。下面将详细阐述这两种设计模式的工作原理、实现方式以及它们在实际应用中的重要性。 首先，左侧导航通常指...
在现代网页设计和开发中，Layui作为一个流行的前端UI框架，它的使用日益广泛。它基于jQuery，提供了一整套的解决方案，包括模块化、可定制的界面组件，使得网页开发更加快捷、高效。Layui的tab组件是该框架中非常...
本示例探讨的主题是如何实现“仿网易点击左侧菜单右侧出现选项卡功能”，这是一个常见于许多网站和应用的交互设计，旨在提高用户体验。这个功能的实现主要依赖于jQuery库，结合CSS样式和HTML布局来完成。 首先，...
通常，这包括一个容器元素，用于容纳所有选项卡和内容，以及一组用于表示选项卡的`<li>`元素和对应内容的隐藏`<div>`。 2. **CSS样式**：CSS用于设置样式，包括初始隐藏内容区域，以及选中状态下的选项卡样式。 3....
tab菜单，网上常见的tab菜单。类似于网上常见的tab菜单
当用户点击左侧菜单栏选项时，我们需要监听事件并根据选择生成新的Tab。这通常通过添加新的`<li>`和`<div class="tab-pane">`元素来实现，并调整Tab的激活状态。`bootstrap-closable-tab.js`可能包含了这样的功能，...
此外，现代前端框架如React、Vue和Angular也提供了更高级的组件化方式来创建Tab菜单，它们提供了更好的状态管理、动画效果和无障碍访问特性。 在设计Tab菜单时，要考虑到以下最佳实践： - 保持一致性：Tab菜单在...
最后，`photoshop`目录可能包含设计过程中使用Photoshop的源文件，这些文件对理解设计意图和视觉效果有所帮助，但它们在实现tab菜单的功能上并不直接参与。 总的来说，这个项目是一个基于jQuery的右滑动tab菜单实现...
在创建Tab切换页面时，我们需要使用XHTML编写基础的HTML结构，定义各个Tab标签和对应的面板内容。每个Tab通常作为一个链接或者按钮元素，而内容则被包含在隐藏的div元素中。当用户点击某个Tab时，对应的内容区域会被...
之前我们分享过很多HTML5/CSS3菜单，应该说大部分都还比较实用华丽，今天我们要来分享另外一种形式的HTML5菜单——HTML5 Tab菜单...这款Tab菜单是利用HTML5和SVG实现的，Tab菜单的外观非常漂亮，而且Tab切换也很方便。