index.jsp
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>管理系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css"
href="${ctx}/jquery/js/themes/default.css" />
<link rel="stylesheet" type="text/css"
href="${ctx}/jquery/js/themes/default/easyui.css" />
<script type="text/javascript"
src="${ctx}/jquery/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript"
src="${ctx}/jquery/js/jquery.easyui.pack.js"></script>
<script type="text/javascript" src="${ctx}/jquery/js/outlook.js"></script>
</head>
<body class="easyui-layout" style="overflow-y: hidden" scroll="no">
<div region="north" split="true" border="false"
style="overflow: hidden; height: 122px; background: url(images/layout-browser-hd-bg.gif) #7f99be repeat-x center 50%; line-height: 20px; color: #fff; font-family: Verdana, 微软雅黑, 黑体">
<iframe src="${ctx}/frame.do?method=topFrame" name="topFrame"
frameborder="0" scrolling="no" width="100%"></iframe>
</div>
<div region="west" class="easyui-panel" split="true" title="导航菜单" style="width: 165px;"
id="west">
<iframe src="${ctx}/frame.do?method=menuFrame&menu_type=&menu_id=03"
name="menuFrame" frameborder="0" scrolling="no" width="100%"
height="100%"></iframe>
</div>
<div id="mainPanle" region="center"
style="background: #eee; overflow-y: auto; height: auto; overflow-x: auto;">
<!-- <div id="tabs" class="easyui-tabs" fit="true" border="false"></div>-->
<iframe name="mainFrame" frameborder="0" scrolling="auto" width="100%"
height="100%"></iframe>
</div>
<div region="south" split="true"
style="height: 30px; background: #D2E0F2;">
<iframe src="${ctx}/frame.do?method=bottomFrame" name="bottomFrame" frameborder="0"
scrolling="no" width="100%" height="100%"></iframe>
</div>
</body>
</html>
FrameTop.jsp
<%@ page contentType="text/html; charset=utf-8" %>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript" src="${ctx}/scripts/prototype.js"></script>
<script language="JavaScript" src="${ctx}/scripts/waiting.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="${ctx}/styles/main.css" rel="stylesheet" type="text/css" />
<title>管理系统</title>
<style type='text/css'>
<!--
.top{clear:both;width:100%;height:84px;background-image: url(${ctx}/images/company/topLogo/${pName});background-repeat: no-repeat; background-color:#F3F9FE;}
.highlightit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=45);
-moz-opacity: 0.5;
}
.highlightit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}
-->
</style>
<script language="Javascript" type="text/JavaScript">
<!--
var focusObj = null; //当前聚焦节点
function open_menu(menu_id,url)
{
if(url.length > 0) top.mainFrame.location.href = "${ctx}/" + url;
// else top.mainFrame.location.href ="${ctx}/frame.do?method=menuFrame&menu_type=&menu_id="+menu_id;
top.menuFrame.location.href = "${ctx}/frame.do?method=menuFrame&menu_type=&menu_id="+menu_id;
}
function logout()
{
if(confirm("确定要退出系统？"))
top.location.href = "${ctx}/logout.do?method=logout";
}
function clickNode(obj,menu_id,url,menuType)
{
open_menu(menu_id,url);
secBoard(obj);
}
function secBoard(obj)
{
var mod = document.all("span_menu");
if(mod.length)
{
for(var i = 0;i < mod.length; i++)
mod[i].className ="";
}
else
{
mod.className = "";
}
obj.className="sec2";
}
function load()
{
var mod = document.all("span_menu");
if (mod.length)
{
secBoard(mod[0]);
}
setTimeout(auto_click,300);
}
function auto_click()
{
if (span_menu.length > 0)span_menu[0].click();
else span_menu.click();
}
function auto_click()
{
if (span_menu.length > 0)span_menu[0].click();
else span_menu.click();
}
function closePopWindow(){
if(popWindow!=null && !popWindow.closed){
popWindow.window.close(closePopWindow);
}
}
function onLogoutOver(){
$("logoutBtn").src = "${ctx}/images/frame/logout2.gif";
}
function onLogoutOut(){
$("logoutBtn").src = "${ctx}/images/frame/logout1.gif";
}
function listSelfInfo(){
var url="${ctx}//security.omuserself.do?method=editSelf";
var toLeft=(screen.width-550)/2-2;
var toTop=(screen.height-400)/2;
window.showModalDialog(url,"","dialogLeft:" + toLeft + ";dialogTop:"+toTop+";dialogheight: 400px;dialogwidth: 550px;location:no;status:no;help:no;");
}
function layoutsetting(){
parent.$('body').layout('collapse','north');
}
//-->
</script>
</head>
<body onload="load()" onunload="closePopWindow()">
<div class="top" id="topB">
<div class="topleft"></div>
<div class="topright" align="right" >
<br/><img id="imBtn" src="${ctx}/images/frame/ad_im.gif" style="cursor: hand" border="0" onclick="listSelfInfo()"/>
<img id="logoutBtn" src="${ctx}/images/frame/logout.gif" style="cursor: hand" onclick="logout()" /> <br/>
今天是：${nowDate_str} </div>
</div>
<div class="nav">
<ul>
<c:forEach items="${MenusRoots}" var="menu">
<li><a href="#" name="span_menu" id="span_menu" onclick="clickNode(this,'${menu.menuId}','${menu.url}','${menu.menuType}')">
<span>${menu.menuName}</span>
</a>
</li>
</c:forEach>
</ul>
<div style="float:right;margin-right:5px;margin-top:3px"><a href="#" onclick="layoutsetting()" class="highlightit" style="cursor: hand;"><img id="imgup" src="${ctx}/jquery/js/themes/default/images/layout_button_up.gif" border="0" /></a></div>
</div>
</body>
</html>
easyui-layout为north添加收缩按钮重要代码
<div style="float:right;margin-right:5px;margin-top:3px"><a href="#" onclick="layoutsetting()" class="highlightit" style="cursor: hand;"><img id="imgup" src="${ctx}/jquery/js/themes/default/images/layout_button_up.gif" border="0" /></a></div>
重要js
function layoutsetting(){
parent.$('body').layout('collapse','north');
}
css样式
.highlightit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=45);
-moz-opacity: 0.5;
}
.highlightit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
分享到：
相关推荐
cls: ("layout-expand layout-expand-" + dir), title: _Cstitle, iconCls: _CsIcon, closed: true, minWidth: 0, minHeight: 0, doSize: false, tools: [{ iconCls: icon, handler: function () { _3ad...
在 "index.html" 和 "main.html" 文件中，我们可以看到EasyUI组件的使用，如`<div class="easyui-layout">`定义布局，`<table id="dg">`创建数据网格。 2. **CRUD 操作** CRUD是数据库操作的基本动作，本示例通过...
"EasyUI Layout" 是 EasyUI 中的一个核心组件，用于实现页面的布局管理。下面我们将深入探讨 EasyUI Layout 的相关知识点。 1. **Layout 基本概念**： EasyUI Layout 是一种灵活的布局解决方案，它允许开发者将...
<div id="layout" class="easyui-layout" style="width:100%;height:400px;"> <!-- 添加子组件的代码 --> $(function () { $('#layout').layout(); }); ``` 以上就是关于 "jquery-easyui-1.2.5" 的核心...
6. **布局(Layout)**：允许自定义页面布局，如拆分面板、浮动窗口等。 7. **其他组件**：包括滑块(Slider)、按钮(Button)、提示(Tip)、提示框(Alert/Confirm/Prompt)等。 此外，`EasyUI` 还提供了主题定制功能，...
jQuery EasyUI 是一款基于 jQuery 的前端框架，它提供了一套完整的UI组件，包括布局（layout）、表格（datagrid）、对话框（dialog）等，方便开发者快速构建用户界面。Layout 是EasyUI中的核心组件之一，用于创建...
3.1 Layout基本结构：Layout 是EasyUI中用于页面区域划分的组件，它可以将页面划分为北（North）、南（South）、东（East）、西（West）、中（Center）五个部分，方便构建复杂的页面布局。 3.2 基本使用：通过在div...
1. **组件化**：EasyUI提供了一系列组件，如对话框（dialog）、表单（form）、表格（datagrid）、菜单（menu）、布局（layout）等，帮助开发者构建复杂UI。 2. **主题支持**：EasyUI内置多套预设主题，允许开发者...
首先，jQuery EasyUI的核心在于其组件化的设计，其中包括布局(layout)、表格(grid)、表单(form)、对话框(dialog)、菜单(menu)、树(tree)、按钮(button)等。这些组件能够帮助开发者快速构建出具有专业界面和用户体验...
- **Layout（布局）**: 提供了多种布局方式，如流式、绝对定位和响应式布局，可以灵活地划分页面区域。 - **Grid（表格）**: 支持数据分页、排序、过滤和编辑，与后端数据库交互方便，适用于展示大量结构化数据。 ...
5. **布局（Layout）**：EasyUI 提供了灵活的布局组件，允许开发者将页面划分为多个区域，便于组织复杂的界面结构。布局组件支持横向和纵向分割，可以动态调整大小。 6. **表单（Form）**：Form 组件允许用户输入和...
首先，EasyUI 的主要组成部分包括布局（Layout）、表单（Form）、表格（Grid）、对话框（Dialog）、菜单（Menu）等常用组件。在这一版本中，这些组件都进行了优化和增强，以提供更好的用户体验和更高的性能。 1. **...
- **布局（Layout）**: 提供了灵活的页面布局功能，可以将页面划分为多个区域，如north、south、east、west和center。 - **对话框（Dialog）**: 实现弹出式窗口，用于展示信息、表单或其他复杂内容。 - **表格...
2. **EasyUI组件**：EasyUI 提供了多种组件，如数据网格（datagrid）、表单（form）、对话框（dialog）、菜单（menu）、按钮（button）、布局（layout）等，这些组件可以快速构建出具有专业外观的网页应用。...
最近在把以前写的一个项目改成用easyui做前端。过程中遇到了不少问题。其中一个就是datagrid不能很好的布局。...这个时候就应该用 easyui-layout来分隔窗体来使具体的内容放在easyui-layout不同的部分。这样就能很好
3. 布局（Layout）：布局组件允许开发者将页面划分为多个区域，如北、南、东、西和中心，便于实现响应式设计和自适应屏幕尺寸的布局。 4. 窗帘（Curtain）：窗帘效果常用于加载提示或遮罩层，为用户呈现一个半透明...
1. **布局（Layout）**: 提供了灵活的页面布局方式，可以将页面分割成多个区域，每个区域可以嵌入不同的内容或组件。 2. **窗口（Window）**: 可以创建弹出式或嵌入式的窗口，支持拖动、最大化、最小化和关闭等操作...