使用OM-UI快速搭建系统前台框架
WebRoot里面的目录结构为：
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 style="text-align:left"> <font src="${pageContext.request.contextPath}/images/home.png" /><img id="set_user" src="${pageContext.request.contextPath}/images/setting.png" /><img id="refresh_page" src="${pageContext.request.contextPath}/images/refresh.png" /><img id="help_doc" src="${pageContext.request.contextPath}/images/help.png" /><img id="logout" 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" style="position: relative;"> <div id="nav-panel-1" onclick="addItemToTab('/user/initQuery.action',this);">用户数据查询</div> <div onclick="addItemToTab('/ueOffset/init.action',this);">手机类型管理</div> </div> <div id="nav-panel-2" onclick="addItemToTab('/hnb/initImport.action',this);">基站数据导入</div> <div onclick="addItemToTab('/hnb/query.action',this);">基站数据查询</div> <div onclick="addItemToTab('/hnb/reference.action',this);">参考点配置</div> </div> <div id="nav-panel-4" onclick="addItemToTab('/location/locatonQuery.action',this);">定位结果查询</div> <div onclick="addItemToTab('/location/cellLocationQuery.action',this);">关机定位结果</div> <div onclick="addItemToTab('/location/exportResult.action',this);">定位结果导出</div> </div> <div id="nav-panel-5" onclick="addItemToTab('/log/initSetLogLevel.action',this);">系统日志配置</div> <div onclick="addItemToTab('/setPro/initServiceParameters.action',this);">服务参数配置</div> <div id="exit_main" 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>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});// tabpanelvar 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(){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="离线" readonly="readonly" style="width:95%"/>';}else{return '<input type="text" value="在线" 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(""));}