- 浏览: 302798 次
- 性别:
- 来自: 西安
文章分类
- 全部博客 (94)
- java编程 (10)
- android (6)
- Web前端技术 (4)
- db&pl/sql (9)
- 开发工具 (6)
- IT生涯 (1)
- 体育 (2)
- ibatis (2)
- jQuery (5)
- Struts (1)
- JavaScript (3)
- Spring (3)
- Ajax (1)
- Ext (3)
- Flex (1)
- JFreeChart (1)
- Hibernate (1)
- java通信 (3)
- pinyin4j (1)
- linux (1)
- JNI (1)
- mysql (1)
- 混淆 (1)
- 算法 (2)
- OM-UI (3)
- jsp (1)
- PHP (1)
- AS (0)
- myBatis (1)
- CSS (1)
- 工作记录 (19)
最新评论
-
masuweng:
楼主讲的很详细mark
allatori混淆技术总结 -
无双Rama:
查询:数据-》xml-》POJO的setter插入:POJO的 ...
使用myBatis时要注意对象属性与表字段要对应 -
无双Rama:
chengxiaohu66 写道请问能发下userAnalys ...
ajax实现动态级联下拉框 -
无双Rama:
<html>
<head>
& ...
如何在页面中设置IE浏览器的文档模式 -
zfms:
楼主解决了吗?我也遇到这个问题了
ClientAbortException: java.io.IOException
WebRoot里面的目录结构为:
1、main.jsp页面:
2、frame.js
3、main.css
用户查询的菜单项:
最终的效果为:
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("")); }
最终的效果为:
相关推荐
本文将详细介绍戴尔服务器Web管理工具OM-SrvAdmin-Dell-Web-LX 9.5.0-4063_A00,以及如何在R710、R720、R730等服务器上进行安装和使用。 OM-SrvAdmin-Dell-Web-LX是一款基于Web的服务器管理软件,允许用户通过Web...
operamasks-ui的demo程序,能够直接部署,运行。查看om-ui上优秀的标签。
OM-UI简介 OM-UI是一个基于jQuery的前端组件库。它提供了丰富的组件,包括各种表单组件、布局组件、功能性组件等。它旨在帮助用户快速构建企业应用。它是简单易用的,并配有丰富的文档、示例和详实的开发手册。最...
### ALPHA OM-338-PT Lead-Free Solder Paste技术公告关键知识点解析 #### 一、产品概述 ALPHA OM-338-PT是一款专为广泛的电子组装应用设计的无铅、免清洗型焊膏。它具有宽泛的加工窗口,旨在减少从锡/铅焊膏向无铅...
om-material-ui React MaterialUI 的简单包装器。 它基本上就像 bootstrap-cljs。 用法 样本位于: cd 示例/简单 lein cljsbuild 曾经简单 然后在浏览器中访问 resources/public/index.html 您应该会看到一个...
迈世智慧机房OM-A6系统使用手册.doc
core -ns 提供了一种使用 om-dev-tools 的快速简便的方法,但您也可以手动使用提供的东西,例如使用您自己的 UI。样式Jar 应该包含文件om-dev-tools/om-dev-tools.css和om-dev-tools/om-dev-tools.less 。 您可以...
"阿尔法OM-340规格书中文版.pdf" ...阿尔法OM-340规格书中文版.pdf提供了关于阿尔法OM-340焊料paste的组成和材料信息,强调了对电子电气设备中有害物质使用的限制,并对Alpha公司的责任声明进行了说明。
"om-debug-tools.rar" 是一个压缩包文件,其主要包含了一组用于OM(可能是Operation Management或Object Modeling)的调试工具。这些工具可能被设计用来帮助开发者、系统管理员或IT专业人员在OM环境中诊断问题、优化...
### VBA-OM-S007 使用说明书关键知识点解析 #### 一、产品基本信息 - **产品名称**:VBA-OM-S007 使用说明书 - **适用产品**:VBAT-M47C 气罐(型号:VBAT20S1-T-X104、VBAT38S1-T-X104) - **主要用途**:作为...
om-next-kanban-demo, 使用Om下一步编写的看板演示应用程序 下一次看板演示看板演示应用程序使用 Om下一步编写。警告:与Om类似,这个演示是在alpha状态。 运行安装引导程序克隆这里存储库在克隆的存储库内部运行 ...
**PyPI 官网下载 | redis_om-0.0.15-py3-none-any.whl** 在Python的世界中,PyPI(Python Package Index)是官方的第三方Python软件包仓库,开发者可以发布他们的模块、库和其他工具供全球Python用户下载使用。本...
`om-inputs-demo`是一个基于JavaScript的项目,它展示了如何使用`om-inputs`这个库来创建各种输入控件。`om-inputs`库可能是一个专门为简化前端表单元素创建和管理而设计的工具,它提供了一套丰富的组件,帮助开发者...
综上所述,KTM OM-2分体式浮动球阀的安装维护手册是确保该阀门能够正确安装、高效运行和长期可靠使用的关键参考资料。了解和掌握手册中的知识点,对于操作者来说至关重要,能够有效地预防事故的发生,降低设备的故障...
标题中的"PyPI 官网下载 | arivo.om-0.2.11-py2-none-any.whl"指的是在Python的包索引服务(Python Package Index,简称PyPI)上下载的一个名为`arivo.om`的软件包,版本号为0.2.11,该包是为Python 2编译的,且不...
语音增强 单通道OM-LSA 带 IMCRA 噪声估计
资源分类:Python库 所属语言:Python 使用前提:需要解压 资源全名:arivo.om-0.1.18-py2-none-any.whl 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059