easyui-layout
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;
<%@ 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;