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 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'); }); }); // 单击菜单项时,增加一个tabpanel function 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("")); }
最终的效果为: