`
uule
  • 浏览: 6358803 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

构造左侧菜单和对应的右侧Tab

 
阅读更多

效果：

 

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;
}

 

。。。

 

 

 

  • 大小: 17.9 KB
分享到：
| JVM堆模型
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    左侧二级菜单右侧对应切换内容tab

    在IT行业中，"左侧二级菜单右侧对应切换内容tab"是一种常见的网页设计模式，它提高了用户在网站或应用中的导航体验。这种设计通常用于有多个相关内容模块的页面，使得用户能够轻松地在不同的部分之间切换，而无需...

    LayUI动态加载左侧菜单以及tab组件的使用

    在"layui，登陆，左侧菜单实现"这个主题中，我们将深入探讨如何利用LayUI来创建动态加载的左侧菜单以及集成tab组件，以实现一个完整的登录功能和页面导航。 首先，我们需要了解LayUI的基础结构。LayUI的核心是layui...

    C#Winform界面布局设计(左侧菜单)右侧窗口操作

    本主题聚焦于使用C#进行Winform界面布局设计，特别是实现左侧菜单和右侧窗口的操作。Winform是.NET Framework提供的一个强大的用户界面设计工具，它允许开发者创建具有丰富功能的桌面应用。 首先，我们要理解...

    左侧点击菜单tab切换网页特效

    在IT行业中，网页交互设计是用户体验的关键因素之一，而“左侧点击菜单tab切换网页特效”是一种常见的网页设计手法，主要用于提升网站的导航性和用户友好性。这种特效使得用户可以通过左侧的菜单栏轻松地在不同的...

    横向和树形tab tab菜单

    在网页设计和开发中，"横向和树形tab菜单"是一种常见的用户界面元素，用于组织和展示大量信息。这种设计模式有效地利用空间，提供清晰的导航结构，帮助用户快速找到所需内容。以下是对这一主题的详细说明： 1. **...

    axure左侧折叠菜单和Tab标签实例

    仅适用新手学习和参考，仅适用新手学习和参考，仅适用新手学习和参考。重要的事情说三遍，请高手飘过。只给新手学习和参考。

    使用layui实现的左侧菜单栏以及动态操作tab项方法

    本文将基于Layui提供的左侧菜单栏组件和Tab页签组件进行说明。 首先，左侧菜单栏是Web界面中常见的导航结构之一，它能够清晰地展示网站或应用的主功能菜单和子菜单。使用Layui，我们可以轻松实现这一功能。在Layui...

    ElementUI之首页导航及左侧菜单（模拟实现）

    在本文中，我们将深入探讨如何使用ElementUI框架来构建一个具备首页导航和左侧菜单功能的Web应用程序。ElementUI是一款基于Vue.js的开源组件库，它提供了丰富的UI组件，能够帮助开发者快速搭建美观、响应式的界面。 ...

    使用layui实现的左侧菜单栏以及动态操作tab项（动态生成的菜单栏）

    用户可以在左侧菜单栏选择不同功能，对应的选项卡在右侧展示内容，同时可以自由切换和关闭选项卡，提高了工作效率。 综上所述，这个项目展示了如何使用layui框架构建一个具有动态菜单和选项卡功能的后台管理系统。...

    左侧导航与tab页切换HTML示例

    在网页设计中，左侧导航和tab页切换是常见的交互元素，它们可以有效地组织内容并提供用户友好的浏览体验。下面将详细阐述这两种设计模式的工作原理、实现方式以及它们在实际应用中的重要性。 首先，左侧导航通常指...

    仿网易点击左侧菜单右侧出现选项卡功能

    本示例探讨的主题是如何实现“仿网易点击左侧菜单右侧出现选项卡功能”，这是一个常见于许多网站和应用的交互设计，旨在提高用户体验。这个功能的实现主要依赖于jQuery库，结合CSS样式和HTML布局来完成。 首先，...

    jQuery左侧点击tab切换代码.zip

    通常，这包括一个容器元素，用于容纳所有选项卡和内容，以及一组用于表示选项卡的`&lt;li&gt;`元素和对应内容的隐藏`&lt;div&gt;`。 2. **CSS样式**：CSS用于设置样式，包括初始隐藏内容区域，以及选中状态下的选项卡样式。 3....

    layui点击导航栏刷新tab页的示例代码

    在现代网页设计和开发中，Layui作为一个流行的前端UI框架，它的使用日益广泛。它基于jQuery，提供了一整套的解决方案，包括模块化、可定制的界面组件，使得网页开发更加快捷、高效。Layui的tab组件是该框架中非常...

    一款实用的tab菜单

    tab菜单，网上常见的tab菜单。类似于网上常见的tab菜单

    bootstrap动态生成tab

    当用户点击左侧菜单栏选项时，我们需要监听事件并根据选择生成新的Tab。这通常通过添加新的`&lt;li&gt;`和`&lt;div class="tab-pane"&gt;`元素来实现，并调整Tab的激活状态。`bootstrap-closable-tab.js`可能包含了这样的功能，...

    web中tab菜单

    此外，现代前端框架如React、Vue和Angular也提供了更高级的组件化方式来创建Tab菜单，它们提供了更好的状态管理、动画效果和无障碍访问特性。 在设计Tab菜单时，要考虑到以下最佳实践： - 保持一致性：Tab菜单在...

    右滑动tab菜单jQuery代码

    最后，`photoshop`目录可能包含设计过程中使用Photoshop的源文件，这些文件对理解设计意图和视觉效果有所帮助，但它们在实现tab菜单的功能上并不直接参与。 总的来说，这个项目是一个基于jQuery的右滑动tab菜单实现...

    左侧tab切换Web 页面

    在创建Tab切换页面时，我们需要使用XHTML编写基础的HTML结构，定义各个Tab标签和对应的面板内容。每个Tab通常作为一个链接或者按钮元素，而内容则被包含在隐藏的div元素中。当用户点击某个Tab时，对应的内容区域会被...

Magicbox
Global site tag (gtag.js) - Google Analytics