easyui 标准布局实现

最新推荐文章于 2019-06-02 20:44:24 发布

lq123629996

最新推荐文章于 2019-06-02 20:44:24 发布

阅读量205

点赞数

分类专栏： web前端文章标签： javascript java ViewUI

本文链接：https://blog.csdn.net/lq123629996/article/details/84698998

版权

web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文记录easyUI框架如何搭建标准的页面布局，这里的标准布局就是常见的上左中的布局方式，上部用于展示头信息等，左边用例展示菜单，中间区域用于显示，当点击左边菜单时，中间区域新建一个tab页用来展示信息。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/include.jsp"%>
<!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>OA办公系统</title>
<style>
article, aside, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

.west {
	width: 200px;
	padding: 10px;
}

.north {
	height: 100px;
}
</style>
</head>
<body class="easyui-layout">
	<div region="north" class="north"
		title="OA办公系统">
	<h1>OA办公系统，采用springMVC+Spring+Mybaties+Activiti实现</h1>
	</div>
	<div region="center" title="center">
	<div class="easyui-tabs" fit="true" border="false" id="tabs">
			<div title="首页"></div>
		</div>
	</div>
	<div region="west" class="west" title="menu">
		<ul id="tree"></ul>
	</div>

	<div id="tabsMenu" class="easyui-menu" style="width: 120px;">
		<div name="close">关闭</div>
		<div name="Other">关闭其他</div>
		<div name="All">关闭所有</div>
	</div>
	<script type="text/javascript">
  $(function () {
	//动态菜单数据
	
	
	$("#tree").tree({
		url : "<%=basePath%>/system/menulist.do",
		lines : true,
		onBeforeExpand:function(node){
			 $('#tree').tree('options').url = 
"<%=basePath%>/system/menulist.do?pid=" + node.id;
		},
		onClick : function (node) {
			if (node.attributes) {
		Open(node.text, "<%=basePath%>"+node.attributes.url);
			}
		}
	});
	//在右边center区域打开菜单，新增tab
	function Open(text, url) {
		if ($("#tabs").tabs('exists', text)) {
			$('#tabs').tabs('select', text);
		} else {
			$('#tabs').tabs('add', {
				title : text,
				closable : true,
				content : createFrame(url)
			});
		}
	}
	
	//绑定tabs的右键菜单
	$("#tabs").tabs({
		onContextMenu : function (e, title) {
			e.preventDefault();
			$('#tabsMenu').menu('show', {
				left : e.pageX,
				top : e.pageY
			}).data("tabTitle", title);
		}
	});
	
	//实例化menu的onClick事件
	$("#tabsMenu").menu({
		onClick : function (item) {
			CloseTab(this, item.name);
		}
	});
	
	//几个关闭事件的实现
	function CloseTab(menu, type) {
		var curTabTitle = $(menu).data("tabTitle");
		var tabs = $("#tabs");
		
		if (type === "close") {
			tabs.tabs("close", curTabTitle);
			return;
		}
		
		var allTabs = tabs.tabs("tabs");
		var closeTabsTitle = [];
		
		$.each(allTabs, function () {
			var opt = $(this).panel("options");
			if (opt.closable && opt.title != curTabTitle 
&& type === "Other") {
				closeTabsTitle.push(opt.title);
			} else if (opt.closable && type === "All") {
				closeTabsTitle.push(opt.title);
			}
		});
		
		for (var i = 0; i < closeTabsTitle.length; i++) {
			tabs.tabs("close", closeTabsTitle[i]);
		}
	}
	function createFrame(url) {
        var s = '<iframe name="mainFrame" scrolling="auto" frameborder="0" 
 src="' + url + '" style="width:100%;height:100%;"></iframe>';
        return s;
    }
}); 
  </script>
</body>
</html>

这个页面就是一个完整的布局方式