EasyUI实例小Demo
来源：互联网 发布：金钻 淘宝 沙河市场 编辑：程序博客网 时间：2024/05/05 01:40
这是笔者最近开发项目，使用EasyUI设计界面时的一点小成果，与大家分享一下（以下仅仅是代表个人）
一：EasyUI布局
首先这是一个静态的EasyUI界面，添加相应的js,css后，就可以直接在浏览器显示了。
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>资产管理平台</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<style type="text/css">
body {
margin:0px;
padding:0px;
width:100%;
height:100%;
}
a,a:visited {
color: #5e5e5e;
text-decoration: none;
}
a:hover {
color: #b52725;
text-decoration: underline;
}
body {
font: 12px/ 180% Arial, Helvetica, sans-serif;
}
#showtime {
color:#FFDC35;
vertical-align: bottom;
bottom: 5px;
position: absolute;
right:5px;
}
.top {
color:#F00;
}
.top a {
color:#F00;
}
</style>
<script>
/*自适应浏览器的大小*/
var settime = null;
function redraw(){
$('#wrap').layout('resize');
$('#subWrap').layout('panel', 'north').panel('resize',{width:$('#subWrap').width()});
$('#subWrap').layout('panel', 'center').panel('resize',{width:$('#subWrap').width()});
$('#subWrap').layout('resize');
}
$(function(){
$(window).resize(function(){
if(settime != null)
clearTimeout(settime);
settime=setTimeout("redraw()",100);
});
var p1 = $('body').layout('panel','west').panel({
onCollapse:function(){
if(settime != null)
clearTimeout(settime);
settime=setTimeout("redraw()",100);
},
onExpand:function(){
if(settime != null)
clearTimeout(settime);
settime=setTimeout("redraw()",100);
},
onResize:function(width,height){
if(settime != null)
clearTimeout(settime);
settime=setTimeout("redraw()",100);
}
});
var p2 = $('body').layout('panel','east').panel({
onCollapse:function(){
if(settime != null)
clearTimeout(settime);
settime=setTimeout("redraw()",100);
},
onExpand:function(){
if(settime != null)
clearTimeout(settime);
settime=setTimeout("redraw()",100);
},
onResize:function(width,height){
if(settime != null)
clearTimeout(settime);
settime=setTimeout("redraw()",100);
}
});
});
//动态添加Tabs
function addTab(title, url){
if ($('#tabsInfo').tabs('exists', title)){
$('#tabsInfo').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
$('#tabsInfo').tabs('add',{
title:title,
content:content,
closable:true
});
}
}
function showTime(){
var show_day=new Array('星期一','星期二','星期三','星期四','星期五','星期六','星期日');
var time=new Date();
var year=time.getFullYear();
var month=time.getMonth();
var date=time.getDate();
var day=time.getDay();
var hour=time.getHours();
var minutes=time.getMinutes();
var second=time.getSeconds();
month=month+1;
month<10?month='0'+month:month;
hour<10?hour='0'+hour:hour;
minutes<10?minutes='0'+minutes:minutes;
second<10?second='0'+second:second;
var now_time='当前时间：'+year+'年'+month+'月'+date+'日'+' '+show_day[day-1]+' '+hour+':'+minutes+':'+second;
document.getElementById('showtime').innerHTML=now_time;
setTimeout("showTime();",1000);
}
</script>
</head>
<body class="easyui-layout" onload="showTime();">
<div id="north" region="north" border="false" style="height:80px;background:#008B8B;">
<div style="width:100%;height:80px;">
<div style="position:absolute;top:20px;left:80px;font-size: 36"><img src="images/Aspire_logo.png"></div>
<div id="showtime"></div>
</div>
</div>
<div region="west" split="true" title="菜单管理" style="width:200px;overflow:hidden;">
<div class="easyui-accordion" style="width:100%;height:100%;">
<div title="统一资源管理" iconCls="icon-menu3">
<ul id="sourcesManage" class="easyui-tree">
<li>
<span>物理机管理</span>
<ul>
<li><a onclick="addTab('联系人信息','jsp/PhysicalMachine/contacts.jsp')">联系人信息</a></li>
<li><a onclick="addTab('物理位置','jsp/PhysicalMachine/position.jsp')">物理位置</a></li>
<li><a onclick="addTab('维保信息','jsp/PhysicalMachine/maintenance.jsp')">维保信息</a></li>
<li><a onclick="addTab('设备基本信息','jsp/PhysicalMachine/equipment.jsp')">设备基本信息</a></li>
<li><a onclick="addTab('硬件信息','jsp/PhysicalMachine/hardware.jsp')">硬件信息</a></li>
<li><a onclick="addTab('系统配置信息','jsp/PhysicalMachine/systemConfiguration.jsp')">系统配置信息</a></li>
<li><a onclick="addTab('交换机信息','jsp/PhysicalMachine/exchangeBoard.jsp')">交换机信息</a></li>
<li><a onclick="addTab('防火墙信息','jsp/PhysicalMachine/firewall.jsp')">防火墙信息</a></li>
<li><a onclick="addTab('操作系统用户管理','jsp/PhysicalMachine/operatingSystem.jsp')">操作系统用户管理</a></li>
<li><a onclick="addTab('虚拟化信息','jsp/PhysicalMachine/virtualMachine.jsp')">虚拟化信息</a></li>
</ul>
</li>
<li>
<span>虚拟机管理</span>
<ul>
<li><a onclick="addTab('虚拟机基本信息','jsp/virtualMachine/virtualBaseInfo.jsp')">虚拟机基本信息</a></li>
</ul>
</li>
<li>
<span>操作系统管理</span>
<ul>
<li><a onclick="addTab('基本信息','jsp/operatingSystemManager/baseInfo.jsp')">基本信息</a></li>
<li><a onclick="addTab('系统信息','jsp/operatingSystemManager/systemInfo.jsp')">系统信息</a></li>
<li><a onclick="addTab('业务IP信息','jsp/operatingSystemManager/businessIPInfo.jsp')">业务IP信息</a></li>
<li><a onclick="addTab('操作系统账号信息','jsp/operatingSystemManager/systemAccountInfo.jsp')">操作系统账号信息</a></li>
<li><a onclick="addTab('存储信息','jsp/operatingSystemManager/saveInfo.jsp')">存储信息</a></li>
</ul>
</li>
</ul>
</div>
<div title="配置库管理" iconCls="icon-menu2">
<ul id="configureManage" class="easyui-tree">
<li>
<span>IP管理</span>
<ul>
<li><a onclick="addTab('IP信息管理','jsp/configurationLibrary/ipManageInfo.jsp')">IP信息管理</a></li>
</ul>
</li>
<li>
<span>模块管理</span>
<ul>
<li><a onclick="addTab('模版基本信息','jsp/moduleManagement/module.jsp')">模版基本信息</a></li>
<li><a onclick="addTab('模版负载均衡','jsp/moduleManagement/moduleLoad.jsp')">模版负载均衡</a></li>
<li><a onclick="addTab('维护人员信息','jsp/moduleManagement/maintenanceStaff.jsp')">维护人员信息</a></li>
<li><a onclick="addTab('维护小组信息','jsp/moduleManagement/maintenanceGroup.jsp')">维护小组信息</a></li>
<li><a onclick="addTab('模块客户端','jsp/moduleManagement/theClient.jsp')">模块客户端</a></li>
<li><a onclick="addTab('模块变更信息','jsp/moduleManagement/changeInformation.jsp')">模块变更信息</a></li>
</ul>
</li>
<li>
<span>模块实例管理</span>
<ul>
<li><a onclick="addTab('实例基本信息','jsp/configurationLibrary/moduleInstanceInfo.jsp')">实例基本信息</a></li>
<li><a onclick="addTab('外服务器信息','jsp/configurationLibrary/outerServerInfo.jsp')">外服务器信息</a></li>
<li><a onclick="addTab('负载均衡关联','jsp/configurationLibrary/loadBalancedInfo.jsp')">负载均衡关联</a></li>
<li><a onclick="addTab('进程实例信息','jsp/configurationLibrary/processInstanceInfo.jsp')">进程实例信息</a></li>
<li><a onclick="addTab('中间件/第三方','jsp/configurationLibrary/middleWareInfo.jsp')">中间件/第三方</a></li>
<li><a onclick="addTab('数据库信息','jsp/configurationLibrary/dataBaseInfo.jsp')">数据库信息</a></li>
<li><a onclick="addTab('应用脚本关联','jsp/configurationLibrary/appsScriptInfo.jsp')">应用脚本关联</a></li>
<li><a onclick="addTab('实例目录信息','jsp/configurationLibrary/instanceDirInfo.jsp')">实例目录信息</a></li>
<li><a onclick="addTab('安全策略信息','jsp/configurationLibrary/securityPolicyInfo.jsp')">安全策略信息</a></li>
</ul>
</li>
<li>
<span>脚本管理</span>
<ul>
<li><a onclick="addTab('脚本信息管理','jsp/scriptManagement/ScriptInformation.jsp')">脚本信息管理</a></li>
<li><a onclick="addTab('FTP信息管理','jsp/scriptManagement/ftpInformation.jsp')">FTP信息管理</a></li>
<li><a onclick="addTab('邮件信息管理','jsp/scriptManagement/email.jsp')">邮件信息管理</a></li>
</ul>
</li>
</ul>
</div>
<div title="协作办公" iconCls="icon-menu4">
<ul id="cooperationManage" class="easyui-tree">
<li>
<span>流程定义</span>
<ul>
<li><a onclick="addTab('流程基本信息','jsp/workOrderManage/processDefinitionInfo.jsp')">流程基本信息</a></li>
<li><a onclick="addTab('流程环节信息','jsp/workOrderManage/processNodeInfo.jsp')">流程环节信息</a></li>
</ul>
</li>
<li>
<span>发起工单</span>
<ul>
<li><a onclick="addTab('发起工单','jsp/workOrderManage/initiateWorkOrderInfo.jsp')">发起工单</a></li>
</ul>
</li>
<li>
<span>我的待办</span>
<ul>
<li><a onclick="addTab('我的待办','jsp/workOrderManage/myBacklogInfo.jsp')">我的待办</a></li>
<li><a onclick="addTab('所有待办','jsp/workOrderManage/allMyBacklogInfo.jsp')">所有待办</a></li>
</ul>
</li>
<li>
<span>业务统计</span>
<ul>
<li><a onclick="addTab('业务统计','jsp/workOrderManage/businessStatisticsInfo.jsp')">业务统计</a></li>
</ul>
</li>
</ul>
</div>
<div title="系统管理" iconCls="icon-menu1">
<ul id="systemManage" class="easyui-tree">
<li><a onclick="addTab('用户管理','jsp/systemManage/systemAccount.jsp')">用户管理</a></li>
<li><a onclick="addTab('角色管理','jsp/systemManage/systemAccount.jsp')">角色管理</a></li>
<li><a onclick="addTab('权限管理','jsp/systemManage/systemAccount.jsp')">权限管理</a></li>
<li><a onclick="addTab('日志管理','jsp/systemManage/systemAccount.jsp')">日志管理</a></li>
<li><a onclick="addTab('数据导入','jsp/systemManage/systemAccount.jsp')">数据导入</a></li>
<li><a onclick="addTab('模块列表','jsp/systemManage/systemAccount.jsp')">模块列表</a></li>
<li><a onclick="addTab('修改密码','jsp/systemManage/systemAccount.jsp')">修改密码</a></li>
<li><a onclick="addTab('在线帮助','jsp/systemManage/systemAccount.jsp')">在线帮助</a></li>
<li><a onclick="addTab('基础数据管理','jsp/systemManage/systemAccount.jsp')">基础数据管理</a></li>
<li><a onclick="addTab('工作流程管理','jsp/systemManage/systemAccount.jsp')">工作流程管理</a></li>
</ul>
</div>
</div>
</div>
<div region="east" split="true" title="系统公告" style="width:200px;padding:0px;">
<div class="ranklist">
<ul>
<li class="top">
<p><a href="#" title="习近平的一天如何度过？">习近平的一天如何度过？</a><img src="images/new.gif"></p>
</li>
<li class="top">
<p><a href="#" title="中国2014年军费预算约8082亿元 比去年提升12.2%">中国2014年军费预算约8082亿元 比去年提升12.2%</a><img src="images/new.gif"></p>
</li>
<li class="top">
<p><a href="#" title="国产操作系统迎来利好:部委机构正大量采购">国产操作系统迎来利好:部委机构正大量采购</a><img src="images/new.gif"></p>
</li>
<li >
<p><a href="#" title="罗塞夫连任巴西总统 作风强硬素有“铁娘子”之称">罗塞夫连任巴西总统 作风强硬素有“铁娘子”之称</a></p>
</li>
<li>
<p><a href="#" title="历史最悠久的电台,却在这轮传媒动荡中生命力最强">历史最悠久的电台,却在这轮传媒动荡中生命力最强</a></p>
</li>
<li>
<p><a href="#" title="男子14年献5身血 凭献血积分入户广州(图)">男子14年献5身血 凭献血积分入户广州(图)</a></p>
</li>
</ul>
</div>
</div>
<div region="south" border="false" style="height:30px;background:#81C0C0;">
<p style="margin:0px auto;text-align:center;">@版权所有：*******有限公司广州分公司——2014/10/21></p>
</div>
<div region="center" border="true" title="主题" style="border-left:0px;border-right:0px;overflow:hidden;">
<div id="tabsInfo" class="easyui-tabs" style="height:auto;overflow:hidden;" fit="true">
<div class="easyui-layout" title="首页" id="sy" >
</div>
</div>
</div>
</body>
</html>
1 0
- EasyUI实例小Demo
- EasyUI实例小Demo(一)
- EasyUI实例小Demo(二)
- ofbiz小Demo实例
- Easyui 中dialog小的demo
- JSP+Servlet+MySql+easyui小DEMO
- Spring aop 小实例demo
- [编程实例] Lucene Demo 小实例
- EasyUI Demo
- juery easyui 前后台交互小demo[附源码]
- JQuery EasyUI 之Layout布局组件小Demo
- ViewAnimator实例源码小Demo+Tab例子
- .net+EasyUI+datagrid DEMO
- jquery-easyui DEMO
- EasyUI 第一个demo
- easyui图片上传demo
- easyui-panel Demo
- easyui综合布局demo
- 第10周项目1(1)-程序填充与扩展
- Eclipse中高效的快捷键、调试及Junit
- Android启动画面
- Android中AsyncTask的使用（二）
- iphone开发：键盘事件
- EasyUI实例小Demo
- 新版linux系统设备架构中关于电源管理方式的变更
- height、clientHeight、scrollHeight、offsetHeight区别
- extern "C"
- 最小化JavaScript代码
- RMAN备份与恢复—基于SCN的不完全恢复
- Android onSaveInstanceState和onpause的区别
- 【翻译】了解Ext JS 5的小部件
- LauncherActivity，PreferenceActivity，ExpandableListActivity
