本文记录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>
这个页面就是一个完整的布局方式
相关推荐
EasyUI 是一个基于 jQuery 的轻量级前端开发框架，它为开发者提供了丰富的组件，使得构建交互式的、符合现代Web标准的用户界面变得简单易行。标题提到的是 "easyui 整体框架布局1.2.6"，这指的是 EasyUI 的一个特定...
5. **响应式设计**：考虑到现代企业对多设备兼容性的需求，EasyUI支持响应式布局。这意味着CRM系统可以在不同尺寸的屏幕上良好显示，无论是桌面电脑还是移动设备。 6. **服务器端交互**：CRM系统通常需要与后端...
总的来说，"struts2+spring+mybatis+easyui"的实现是一个标准的Java Web项目结构，它利用Maven进行构建管理，通过整合四个组件，实现了后端的业务逻辑处理、数据访问和前端的用户界面展示。这种架构在实际开发中具有...
将EasyUI和zTree完美结合，可以在EasyUI的框架布局中嵌入zTree，实现数据树的展示和交互。例如，可以使用EasyUI的`<div>`标签定义一个区域，然后在这个区域内插入zTree渲染的树形结构。这样，用户可以在框架化的界面...
EasyUI 是一个基于 jQuery 的 UI 框架，它通过简单的 API 和预定义的 CSS 样式，可以快速创建出符合现代设计标准的界面。框架中的组件包括窗口（Window）、面板（Panel）、菜单（Menu）、表单（Form）、按钮...
EasyUI源码的使用，可以帮助开发者快速搭建出符合标准的前端界面，减少在UI布局和组件设计上的时间消耗。"全栈开发偏后端人员"意味着这个模板特别关注那些主要负责后端逻辑，但同时也需要处理前端展示的开发者，它...
JavaScript 和 ECMAScript 是EasyUI 的基础，前者是Web开发中最常用的客户端脚本语言，后者则是JavaScript的标准版，定义了语言的核心语法。EasyUI 利用jQuery的简洁API，简化了DOM操作，使得开发者可以轻松地实现...
而Activiti则是一个流行的企业级工作流管理系统，它基于BPMN 2.0标准，能够帮助企业实现复杂的业务流程自动化。 首先，我们需要理解Activiti的核心概念。Activiti是一个开源的工作流引擎，它提供了一个模型驱动的...
EasyUI的进度条（progressbar）和评分组件（rating）可以轻松实现这些功能。 5. **EasyUI云平台四套模板**：云平台模板可能涉及云计算服务的控制面板，包含虚拟机管理、存储配置、网络设置等模块。利用EasyUI的表单...
这种结合使得开发者能够利用Bootstrap的响应式布局和易定制特性，同时享受到EasyUI丰富的组件和强大的功能。 Bootstrap是一个广泛使用的前端框架，它提供了丰富的CSS样式、JavaScript插件和HTML模板，适用于快速...
EasyUI 提供了一套完整的组件库，包括布局、表格、表单、菜单、对话框等，这些组件都遵循一致的设计风格，使得开发人员可以快速构建符合现代设计标准的用户界面。 2. **安装与引入** 要在项目中使用 EasyUI，首先...
在标准的EasyUI组件库中，并未直接提供带单位的输入框组件，因此，我们需要通过自定义插件的方式来实现这一需求。这种输入框通常用于需要用户输入具体数值并附带单位的情况，例如输入“10米”或“20千克”。 ### ...
EasyUI的核心理念是“简单易用”，其组件设计遵循W3C标准，兼容主流浏览器，支持响应式布局，适应不同设备的显示需求。 2. **组件库**：EasyUI提供了丰富的UI组件，如： - **布局（Layout）**：用于创建复杂的页面...
总的来说，jQuery EasyUI 是一款强大的前端开发工具，通过它，开发者可以轻松实现界面的快速搭建，提高开发效率，同时保持良好的用户体验。在实际项目中，熟练掌握 jQuery EasyUI 的使用技巧和 API，对于提升工作...
通过 EasyUI，开发者可以轻松地创建符合现代网页设计标准的界面，同时保证在不同设备上的良好适应性和性能。 在这个界面原型中，我们可以预期包含以下 EasyUI 的关键知识点： 1. **组件使用**：原型可能使用了 ...
EasyUI还提供了栅格布局（grid layout）和流式布局（flow layout），方便地调整元素的位置和大小。 11. **数据绑定** EasyUI 支持数据绑定，可以将表单字段与模型数据关联，实现数据的自动同步和验证。 12. **...
**完美登录页面EasyUI设计与实现** 在网页开发中，一个吸引用户且功能完善的登录页面是至关重要的。EasyUI是一个基于jQuery的UI框架，它提供了一系列简洁、美观的组件，帮助开发者快速构建用户界面。本篇文章将深入...
EasyUI 提供的主要功能包括：布局管理、窗口（对话框）、表单控件、数据网格、树形控件、菜单、按钮、提示等，这些组件能够帮助开发者快速创建出符合现代Web标准的用户界面。其设计理念是通过简单的HTML标记和CSS...
EasyUI 提供了一系列预先设计好的UI组件，如窗口、表单、数据网格、菜单、树形结构等，使得开发者可以快速地创建出符合现代Web标准的交互界面，而无需过多关注样式和布局的细节。其核心理念是“简单易用”，通过简单...
EasyUI 是一个基于 jQuery 的前端框架，用于快速开发交互式且响应式的Web应用程序。它提供了大量的预定义的组件和主题，使得...通过熟练掌握EasyUI的使用，开发者可以快速构建出符合现代Web标准的、功能丰富的应用。