使用OM-UI快速搭建系统前台框架
2024-04-20 20:10:06
WebRoot里面的目录结构为：
[img]http://dl2.iteye.com/upload/attachment/0092/6034/922edd55-e61a-3f58-b37d-9783eff13a88.jpg[/img]
1、main.jsp页面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><%@ page import="java.util.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>欢迎登录XXXX</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/main.css"/> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/default/om-default.css"/> <script type="text/javascript" src="${pageContext.request.contextPath}/script/jquery.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/script/operamasks-ui.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/script/frame.js"></script> <script type="text/javascript"> var basePath = "${pageContext.request.contextPath}"; </script> </head> <body> <div id="page"> <div id="north-panel"> <div class="head_logo" style="text-align:left"> <font class="logo_text">定位服务中心</font> <div class="right_img"> <img id="to_home" class="right_imgs_css" src="${pageContext.request.contextPath}/images/home.png" /> <img id="set_user" class="right_imgs_css" src="${pageContext.request.contextPath}/images/setting.png" /> <img id="refresh_page" class="right_imgs_css" src="${pageContext.request.contextPath}/images/refresh.png" /> <img id="help_doc" class="right_imgs_css" src="${pageContext.request.contextPath}/images/help.png" /> <img id="logout" class="right_imgs_css" src="${pageContext.request.contextPath}/images/exit.png" /> </div> </div> </div> <div id="center-panel"> <div id="tabs"> <ul> <li><a tabid="firstTab" id="firstTab" href="#tab1">首页</a></li> </ul> <div id="tab1"> 欢迎登录XXXX </div> </div> </div> <div id="west-panel" class="om-accordion" style="position: relative;"> <div id="nav-panel-1" class="nav-panel"> <div class="my_menu_item nav-item" onclick="addItemToTab('/user/initQuery.action',this);">用户数据查询</div> <div class="my_menu_item nav-item" onclick="addItemToTab('/ueOffset/init.action',this);">手机类型管理</div> </div> <div id="nav-panel-2" class="nav-panel"> <div class="my_menu_item nav-item" onclick="addItemToTab('/hnb/initImport.action',this);">基站数据导入</div> <div class="my_menu_item nav-item" onclick="addItemToTab('/hnb/query.action',this);">基站数据查询</div> <div class="my_menu_item nav-item" onclick="addItemToTab('/hnb/reference.action',this);">参考点配置</div> </div> <div id="nav-panel-4" class="nav-panel"> <div class="my_menu_item nav-item" onclick="addItemToTab('/location/locatonQuery.action',this);">定位结果查询</div> <div class="my_menu_item nav-item" onclick="addItemToTab('/location/cellLocationQuery.action',this);">关机定位结果</div> <div class="my_menu_item nav-item" onclick="addItemToTab('/location/exportResult.action',this);">定位结果导出</div> </div>
<div id="nav-panel-5" class="nav-panel"> <div id="update_info" class="nav-item">个人资料管理</div> <div class="nav-item" onclick="addItemToTab('/log/initSetLogLevel.action',this);">系统日志配置</div> <div class="nav-item" onclick="addItemToTab('/setPro/initServiceParameters.action',this);">服务参数配置</div> <div id="exit_main" class="nav-item">退出</div> </div> </div> </div>
<div id="update_pwd_dialog-modal" title="修改密码" style="padding-top: 25px;padding-left: 25px;"> <input type="text"/ id="username" value="${sessionScope.username}" style="display: none;"> 新密码： <input type="password" id="newpwd"/><br /> <p></p> <button style="margin-left: 80px;" id="update_pwd">确定</button> <button id="cancel_pwd">取消</button> </div>
</body></html>
2、frame.js
String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) {
if (!RegExp.prototype.isPrototypeOf(reallyDo)) {
return this.replace(new RegExp(reallyDo, (ignoreCase ? "gi" : "g")), replaceWith);
} else {
return this.replace(reallyDo, replaceWith);
}
}// tabpanels//var tabs = null;
/** * <一句话功能简述> <功能详细描述> * * @author smart * @version [版本号, 2012-11-28] * @see [相关类/方法] * @since [产品/模块版本] */$(document).ready(function() {
$("#update_pwd_dialog-modal").omDialog({ autoOpen: false, height: 140, modal: true });
var element = $('#page').omBorderLayout({
panels : [{ id : "north-panel", header : false, region : "north", height : 90 }, { id : "center-panel", header : false, region : "center" }, { id : "west-panel", resizable : true, collapsible : true, title : "系统目录", region : "west", width : 180 }]
});
var menuPanel = [{ id : "nav-panel-1", title : "用户管理" },
{ id : "nav-panel-2", title : "基站管理" },
{ id : "nav-panel-3", title : "参数配置" },
{ id : "nav-panel-4", title : "定位信息" },
{ id : "nav-panel-5", title : "系统管理" }];
$(menuPanel).each(function(index, panel) {
$("#" + panel.id).omPanel({
title : panel.title, collapsed : true, collapsible : true,
// 面板收缩和展开的时候重新计算自定义滚动条是否显示
onCollapse : function() {
$("#west-panel").omScrollbar("refresh");
},
onExpand : function() {
$("#west-panel").omScrollbar("refresh");
}
});
});
// 初始化中间的tab页签 $('#center-tab').omTabs({ height : "fit", border : false });
// tabpanel var tabs = $("#tabs").omTabs({ width : '100%', height : '100%', tabMenu : true, closeFirst: false, closable : true, // switchMode : 'mouseover', tabWidth : 100 });
// 把首页的关闭图标去掉 $("#firstTab").find("+ a.om-icon-close").remove();
// 给logo右边的图片增加样式 changeHeaderImg();
// 回到主页 $("#to_home").click(function(){ $('#tabs').omTabs('activate', "firstTab"); });
// 设置 $("#set_user").click(function(){ $("#update_pwd_dialog-modal").omDialog('open'); });
// 修改密码 $("#update_pwd").click(function(){ var username = $("#username")[0].value; var newpwd = $("#newpwd")[0].value;
$.ajax({ url : basePath + "/login/updatePassword.action", data : "username=" + username + "&newpwd=" + newpwd, success: function(msg){ $("#update_pwd_dialog-modal").omDialog('close'); if(msg == '1') { $.omMessageTip.show( { type : 'success', title : "提示", content : "修改密码成功", timeout : 1500 }); } else { $.omMessageTip.show( { type : 'error', title : "提示", content : "修改密码失败", timeout : 1500 }); } } }); });
// 取消修改密码 $("#cancel_pwd").click(function(){ $("#update_pwd_dialog-modal").omDialog('close'); });
// 刷新 $("#refresh_page").click(function(){// window.location.reload();
// 关闭其它页签，刷新首页页签 var self = tabs, $headers = self.find('>div.om-tabs-headers');
$headers.find('ul li').each(function(index, item) { var itemId = $(item).find('a.om-tabs-inner') .attr('tabid'); if ("firstTab" === itemId) return; self.omTabs('close', (self.omTabs('getAlter', itemId))); });
// 刷新首页页签
});
// 帮助 $("#help_doc").click(function() { var a = window .open( "../help/help.docx", "111", "height=0,width=0, top=100 left=50 toolbar=no,menubar=no,scrollbars=no,resizable=on,location=no,status=no");
a.document.execCommand("SaveAs"); });
// 导航退出 $("#logout").click(function(){ window.location = basePath + "/"; });
// 菜单退出 $("#exit_main").click(function(){ window.location = basePath + "/"; });
// 修改个人资料 $("#update_info").click(function(){ $("#update_pwd_dialog-modal").omDialog('open'); }); });
// 单击菜单项时，增加一个tabpanelfunction addItemToTab(url, obj) { var urltemp = url; var tabid = urltemp.replaceAll("/", ""); tabid = tabid.replace("\.", ""); if ($("a[tabId='" + tabid + "']").length > 0) { $('#tabs').omTabs('activate', tabid); } else { url = basePath + url; $('#tabs').omTabs('add', { tabId : tabid, title : obj.innerHTML, closable : true, tabMenu : true, border : false, content : "<iframe src ='" + url + "' id='" + tabid + "' name='" + tabid + "' marginwidth=0 style='overflow:hidden;' marginheight=0 width=100% height='' " //+ " onload='setIframeHeight(this)' " + " frameborder='no' border=0 ></iframe>"
}); }}
/** * 鼠标移入移出时改变图片的样式 */function changeHeaderImg() { var oLi = $(".right_imgs_css"); for (var i = 0; i < oLi.length; i++) { oLi[i].onmouseover = function() { $(this).addClass("header_alpha"); }; oLi[i].onmouseout = function() { $(this).removeClass("header_alpha"); } }}
/** * 设置iframe的高度（目前只考虑ff） * 用name属性，可兼容所有浏览器 */function setIframeHeight(name) { var iframe = document.getElementById(name.name); if(iframe) { if (undefined != iframe.ownerDocument && undefined != iframe.ownerDocument.body.offsetHeight) { // body的高度减去 top(89)、tab_header(28+12)、边框等高度 iframe.height = parseInt(iframe.ownerDocument.body.offsetHeight) - 150; } }
/*if($.browser.mozilla) // ff}
/**/*$(window).resize(function(){
3、main.css
html,body { font-size: 12px; width: 100%; height: 100%; margin: 0; padding: 0; border: 0 none; overflow: hidden; height: 100%;}
#north-panel h2{
font-size: 18px;
font-weight: bold;
margin: 5px;
}
div.icon-help{
background-image: url("images/icon-help.png");
margin-top: -2px;
}
#search-panel span.label{
margin-left: 10px;
}
#search-panel .input-text {
border: 1px solid #6D869E;
height: 18px;
vertical-align: middle;
width: 137px;
}
#search-panel span.om-combo,#search-panel span.om-calendar{
vertical-align: middle;
}
#grid .om-btn-icon {
padding-left: 34px;
}
#grid .op-menu{
position: absolute;
display: none;
background-color: #E6ECF5;
border: 1px solid #99A8BC;
padding: 0;
width: 75px;
}
#grid .op-menu div{
cursor: pointer;
padding-left: 20px;
}
#grid .op-menu div:hover{
background-color: #4E76AD;
color: #FFFFFF;
}
#grid .op-menu .edit{
background: url("images/op-edit.png") no-repeat scroll 7px 5px;
}
#grid .op-menu .delete{
background: url("images/op-delete.png") no-repeat scroll 7px 5px;
}
.om-borderlayout-region-west .om-borderlayout-region-header{
padding: 0px;
border: 0;
height: 28px;
line-height: 28px;
background: url("images/accordion/leftmenu_bg.jpg") repeat-x scroll 0 0 #FFFFFF;
border-right:1px solid #99A8BB;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
.om-borderlayout-region-west .om-panel-body{
padding: 0;
}
.nav-panel {
padding: 0;
}
.nav-panel div.nav-item{
line-height: 25px;
font-size: 13px;
padding-left: 40px;
cursor: pointer;
list-style-type: none;
}
.nav-panel div.user{
background: url("images/user.png") no-repeat scroll 20px 4px;
}
.nav-panel div.nav-item:hover{
border: 1px solid #99A8BC;
background-color: #C4D6EC;
padding-left: 39px;
line-height: 23px;
}
.nav-panel div.user:hover{
background-position: 19px 3px;
}
/* 左侧菜单的title距左15px,字体14px */.om-panel-title{ padding-left: 15px; font-size: 14px; font-weight: bold;}
.om-tree .om-tree-node a:link { color: #1E1E1E; text-decoration: none;}
span{ font: normal 14px 宋体;}
ul { padding: 0;}
a{ color: #0000EE;}
li { font-size: 14px; list-style-type: none; margin: 0; padding: 0; cursor: pointer;}
li:hover { background-color: #46A3FF;}
.li_selected { background-color: #0072E3;}
p { margin: 5px;}
#page{ width: 100%; height: 100%;}.settings { background-image: url(../images/folder_wrench.png);}
.nav { background-image: url(../images/folder_go.png);}
.sub_item{ margin-left: 10px; background-image: url(../images/leaf.gif);}
#center-panel{ overflow: hidden; height:600px;}
/* logo img */#north-panel{ background: url(../images/head_bg.png) repeat-x; overflow: hidden;}
/* 右边的图标 */.right_img{ position: absolute; top: 0px; right: 0px; height: 88px; vertical-align:middle; margin: 0px 30px 0px 0px;}
.right_imgs_css{ margin-top: 20px; margin-right: 30px; cursor: pointer;}
/*菜单title*/.menu_title{ font-size: 14px;}
/* 左边菜单 div*/.treeLEheight a{ margin: 2px 0; padding: 2px 2px 2px 15px; text-decoration: none;}
/* 二级菜单css */.second_menu{}
.second_menu a{ margin: 2px 0; padding: 2px 2px 2px 25px; text-decoration: none;}
.red_label{ color: 'red';}
/* header img */.header_alpha{ background-color:#FFFFFF; filter:alpha(opacity=80); /* IE 透明度20% */ -moz-opacity:0.8; /* Moz + FF 透明度20%*/ opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）透明度20%*/}
.logo_text{ color: white; font-size: 32px; font-weight: bold; line-height: 89px; text-align: left;}用户查询的菜单项：
$(document) .ready( function() { // 条件查询的面板 var panel = $("#condition_query").omPanel( { width : 'fit', height : '105px', iconCls : "panel_search", header : true, title : '条件查询', collapsed : false, collapsible : true });
// 把查询的表单加入到面板当中 $("#condition_query").append($("form[name='locationResult']"));
// 修改图标 $(".panel_search").removeClass("om-icon"); $(".panel_search").removeClass("om-panel-icon");
// 手机号码自动搜索 $("#msisdn").omSuggestion( { queryName : 'msisdn', method : 'POST', dataSource : path + "/location/getAllMsisdnByJson.action" });
// 用户名自动搜索 $("#userName").omSuggestion( { queryName : 'userName', method : 'POST', dataSource : path + "/location/getAllUserNameByJson.action" });
// 手机短号联想搜索 $("#shortMsisdn").omSuggestion( { queryName : 'shortNum', method : 'POST', dataSource : path + "/location/getAllShortNumByJson.action" });
// imsi联想搜索 $("#imsi").omSuggestion( { queryName : 'imsi', method : 'POST', dataSource : path + "/user/getAllImsiByJson.action" });
$("#userInfoGrid") .omGrid( { dataSource : path + "/user/getAllUser.action", singleSelect : true, showIndex : true, height: 450, colModel : [ { header : '用户名', name : 'userName', width : 100, align : 'center' }, { header : '手机号码', name : 'msisdn', width : 100, align : 'center' }, { header : '手机短号码', name : 'shortMsisdn', width : 100, align : 'center' }, { header : 'IMSI号码', name : 'imsi', width : 200, align : 'center' }, { header : '手机类型标识', name : 'imei', width : 100, align : 'center', editor : { type : 'text', editable : true, name : 'imei', rules : [ [ "required", true, "手机类型标识是必填的" ], [ "minlength", 6, "手机类型标识长度为六位" ], [ "maxlength", 6, "手机类型标识长度为六位" ] ] } }, { header : '用户状态', name : 'ueState', width : 100, align : 'center', renderer : function(colValue) { if ("0" == colValue) { return '<span style="color:red;">离线</span>'; } else { return '<span style="color:green;">在线</span>'; } }, editor : { type : 'text', editable : false, name : 'ueState', renderer : function(colValue) { if ("0" == colValue) { return '<input type="text" value="离线" class="grid-edit-text readonly-text" readonly="readonly" style="width:95%"/>'; } else { return '<input type="text" value="在线" class="grid-edit-text readonly-text" readonly="readonly" style="width:95%"/>'; } } } }, { header : '备注', name : 'remark', width : 180, align : 'center' } ], onAfterEdit : function(rowIndex, rowData) { var msisdn = rowData['msisdn']; var imei = rowData['imei'];
// 修改后的数据入库 $.ajax( { type : 'POST', data : 'msisdn=' + msisdn + '&imei=' + imei, url : path + '/user/updateUserImei.action', dataType : 'script', success : function(msg) { if ("1" == msg) { $.omMessageBox.alert( { type : 'success', title : '提示', content : '修改成功' }); } else { $.omMessageBox.alert( { type : 'error', title : '提示', content : '修改失败' }); }
// 重新加载数据 $('#userInfoGrid').omGrid('reload'); } }); } }); // 设置父页面iframe的高度 parent.document.getElementById("userinitQueryaction").height=560; });// 条件查询function submitForm(){ var imsi = $.trim($("#imsi").val()); var msisdn = $.trim($("#msisdn").val()); var userName = encodeURI(encodeURI($.trim($("#userName").val()))); var shortMsisdn = $.trim($("#shortMsisdn").val()); $('#userInfoGrid').omGrid( "setData", path + '/user/getAllUser.action?imsi=' + imsi + '&msisdn=' + msisdn + '&userName=' + userName + '&shortMsisdn=' + shortMsisdn);};
// 查询条件重置function reset(){ var msisdn = $.trim($("#msisdn").val("")); var userName = $.trim($("#userName").val("")); var imsi = $.trim($("#imsi").val("")); var shortMsisdn = $.trim($("#shortMsisdn").val(""));}
最终的效果为：
[img]http://dl2.iteye.com/upload/attachment/0092/6044/9929ce91-a0e8-37a0-93ce-e405b0cf85f7.jpg[/img]
使用OM-UI快速搭建系统前台框架相关推荐
- 用Easy UI快速搭建一个后台
今天来分享一个我前端技术-------如何使用Easy UI快速搭建一个后台,本博主也只是在官网文档学习了一个小时左右,就已经会使用了,当你学了Easy UI后,一个后台短短两分钟就可以over了,好 ...
- Spring Boot如何在最短时间里快速搭建微服务框架，详细教程贡上
前言: Spring Boot是为了简化Spring应用的创建.运行.调试.部署等而出现的,使用它可以做到专注于Spring应用的开发,而无需过多关注XML的配置. 简单来说,它提供了一堆依赖打包,并 ...
- 在Windows7/10上快速搭建深度学习框架Caffe开发环境
之前在 http://blog.csdn.net/fengbingchun/article/details/50987353 中介绍过在Windows7上搭建Caffe开发环境的操作步骤,那时caff ...
- EasyUI(1)：快速搭建系统界面
使用EasyUI搭建系统界面真是easy,简单而且快! 1.到EasyUI的官网下载免费的包到本地,解压,安排好目录,建立空的html文件YQCYNDI.HTML. 2.加入引用,即css和js部分的 ...
- 接口自动化 ------ 快速搭建接口自动化框架
接口自动化框架要搭成什么,里面的内容究竟应该有多少? 这个问题没有标准答案,因为这要取决于你的项目,以及你想要用框架来解决什么问题等多种因素. 当然了,这里也就不展开讨论了,还是回到接口自动化这个点, ...
- springboot入门（一）--快速搭建一个springboot框架
原文出处 前言 在开始之前先简单介绍一下springboot,springboot作为一个微框架,它本身并不提供Spring框架的核心特性以及扩展功能,只是用于快速.敏捷地开发新一代基于Spring框 ...
- 不会数据驱动？还不快来看看，教你快速搭建数据驱动测试框架
导语 说到数据驱动自动化测试,你会不会有这样的疑问:数据怎么管理?数据怎么才能驱动测试用例执行?到底怎么样才算数据驱动?那么本篇文章就教你如何进行数据驱动测试,相信你一定能对数据驱动自动化测试有一个不 ...
- 【SpringMVC】SpringMVC基础-SpringMVC项目快速搭建、日志框架为logback
转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自[大学之旅_谙忆的博客] 分析 Spring MVC提供了一个DispatcherServlet来开发Web应 ...
- Java 通过gecco快速搭建一个爬虫框架
Java gecco 爬虫Demo Gecco是一款用java语言开发的轻量化的易用的网络爬虫框架. 官网: http://www.geccocrawler.com/ 1.导入依赖 <depen ...
最新文章
- rhcs做HA时的资源释放脚本实现
- matlab stract结构_MATLAB 的基础知识
- Go 语言web 框架 Gin 练习8
- Django扩展xadmin后台管理
- 19.12 添加自定义监控项目 配置邮件告警 测试告警
- html知识笔记（一）——head和body标签
- 1018.eclipse工具使用记录
- 视频分享：挨踢项目求生法则（2）——战略篇
- 玉伯的一道课后题题解（关于 IEEE 754 双精度浮点型精度损失）
- Logistic回归模型（C++代码实现）
- PDF怎么打印？为什么有时选择打印没有反应？
- 一篇文章看明白 Android 从点击应用图标到界面显示的过程
- php微信公众号消息推送
- 批量更改图像背景颜色_Photoshop 2021来了，图像处理新功能让人惊叹
- PMP项目进度管理-在线甘特图
- Parallels Desktop 安装 Windows10 提示“安全启动功能防止操作系统启动”怎么解决？
- 推荐几个9月爆火的 GitHub 电商项目
- 解决如何获取R的帮助文档
- 知易行难的 “目标管理法”
- 利用WPT（Windows Performance Toolkit）进行程序的性能分析