`

使用OM-UI快速搭建系统前台框架

Web前端技术OM-UIjQueryJavaScript开源框架 
阅读更多
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;">
       	 	&nbsp;&nbsp;新密码：    <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(""));
}


最终的效果为：

  • 大小: 66.7 KB
  • 大小: 83.6 KB
分享到：
| allatori混淆技术总结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics