使用iframe实现将四个页面合成一个页面，并可以随意切换
2017-03-21 17:21
519 查看
任务
将“抄表册管理”、“抄表计划管理”、“执行抄表”、“抄表数据审核”、“抄表数据发布”四个页面整合成一个页面：“计划抄表”，以流程图节点的形式进行串联。效果如下
红箭头所指的地方是一个流程图，每一个节点点击后会显示该节点所对应的页面，而每个页面的显示都要从控制层为切入点进入。
代码
<%@page import="org.apache.commons.lang3.RandomUtils"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ page import="org.springframework.context.i18n.LocaleContextHolder"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>计划抄表</title>
<%@ include file="/WEB-INF/view/head2.jsp" %>
<style type="text/css">
.management .power_menu {
position: relative;
left: 0px;
top: 0px;
right: auto;
bottom: auto;
}
.management .power_menu ul {
overflow: hidden;
margin-bottom: -2px;
padding-left: 1px;
background-color: #fff;
display: inline-block;
border-top: 10px solid #fff;
border-bottom: 10px solid #fff;
border-left: 10px solid #fff;
}
.management .power_menu li {
margin-left: -1px;
line-height: 30px;
text-align: center;
cursor: pointer;
float: left;
background: #efefef;
padding: 0px 15px;
position: relative;
z-index: 1;
}
.management .power_menu li.hover {
color: #fff;
background: #008feb;
z-index: 2;
}
.management .power_menu li.hover em.left {
display: inline-block;
border: 15px solid #008feb;
border-left: 15px solid #efefef;
}
.management .power_menu li.hover em.right {
display: inline-block;
border: 15px solid #efefef;
border-left: 15px solid #008feb;
}
.management .power_menu li.hover:last-child em.right {
display: inline-block;
border: 15px solid #fff;
border-left: 15px solid #008feb;
}
.management .power_menu li:last-child em.right {
display: inline-block;
border: 15px solid #fff;
border-left: 15px solid #efefef;
}
.management .power_menu li em.left,
.management .power_menu li em.right {
display: inline-block;
border: 15px solid #efefef;
}
.management .power_menu li em.left {
position: absolute;
left: -15px;
}
.management .power_menu li em.right {
position: absolute;
right: -15px;
}
.management .power_menu li span {
display: inline-block;
width: 17px;
height: 25px;
line-height: 30px;
vertical-align: middle;
margin-right: 5px;
}
.management .power_menu li .meter_book {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIzNkRBQTcyMEEwODExRTc4QUFBQTVDQTNEODMzQUVCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIzNkRBQTczMEEwODExRTc4QUFBQTVDQTNEODMzQUVCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjM2REFBNzAwQTA4MTFFNzhBQUFBNUNBM0Q4MzNBRUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjM2REFBNzEwQTA4MTFFNzhBQUFBNUNBM0Q4MzNBRUIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7POHVWAAAAm0lEQVR42mLcuHHjfwbSwEIgToBx/Pz8GFig7FogPkKEAS3YBGGGXAHiA0QY8gabIBMDFQALFrF2IObEoV4XiH8C8QSYwKZNm7Aakgl19hMsco+htAGUFgFibRYcNk5Btg0PCADi9VQJk8FjCCxMuIFYAMpmJNeQJZS6pBFNrIIcQxrQxAoGNGDRgQoQOxChXwefIdlQTBQACDAAWkoXk6mGlN4AAAAASUVORK5CYII=) 0px center repeat-x;
}
.management .power_menu li .meter_book_c {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI2MTM1NjIxMEEwOTExRTdBODBGQkE4MjVDQTVCMjFFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI2MTM1NjIyMEEwOTExRTdBODBGQkE4MjVDQTVCMjFFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjYxMzU2MUYwQTA5MTFFN0E4MEZCQTgyNUNBNUIyMUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjYxMzU2MjAwQTA5MTFFN0E4MEZCQTgyNUNBNUIyMUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5ePebOAAAAnUlEQVR42mL4TzpYAMQMyJiFAQJqgfgIA2HQgk0QZsgVID5AhCFvsAkyMVABsGARawdiThzqdYH4JxBPQBZkBIUUkA4E4g1QsQ9QZz8hwhEiQKzNAA3xAKTQ/gDEBegxgAOD9P2nSpgMHkNgscMNxAKwwCbXkCWUuqQRTayCHEMa0MQKBjRg0YEKEDsQoV8HluzRJUDJnp8UlwAEGAAN4owVgoQiZgAAAABJRU5ErkJggg==) 0px center repeat-x;
}
.management .power_menu li .meter_plan {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkVEQjkyODQ2MEEwODExRTc5NjNFRTIyMDg3OEI3NDk1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkVEQjkyODQ3MEEwODExRTc5NjNFRTIyMDg3OEI3NDk1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RURCOTI4NDQwQTA4MTFFNzk2M0VFMjIwODc4Qjc0OTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RURCOTI4NDUwQTA4MTFFNzk2M0VFMjIwODc4Qjc0OTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4X1jGcAAACB0lEQVR42pSVPWiTURSGk5g6KIqiBVFBrV0FRRdpEXQQFY1DrQrtIIijYEEkBYmdSidpi0NxcvBncTBBS3UoFTcpWlCCFcVgKy4OrZogQonPkfeD4+X7EnPg4f7k3pfznXPuSbpYLKYaWF3jAIzGHcjlcv+sM1BxFOCoW0dW0HoS1vs7pVLpihfMwg64AZ+hDFu1522jWIJfMKT9PGwIBc1KMKf5HhhLCMEX+A13tL4QHsjGXJrX/ggsplo0L3gOzsMqOAgTsLnB3XIzQTvQrfkReOuyHGe7mgm+kVA0j5KRZN+bCXqh1Qr+UqsxzLi5xW4bdMI7OPQf92/BVJKHV+Gy5u9h1tVbSmX1CHbCaY0/YZniTvNi/sY7zdOzyT6JPNblk1CDGSf4FNaomBfgNbSrImx+FtGKF5zThZTEQhsGe2aX4D50KTTr4B5sgf2Z4FJN7DXv3X4HXIOLulzX13Tj1SfG48pB3gtuh2PWQOClmkRkZ+ADPEjoOMsMN6HXJ8XiNq7MX1fMZvSZu+FVjNZtEmJt7RnctWL3ghOuc4xotKx+Uz12BGJ90Kb5V3WpapiUJDsFD+XpYlyDxVP7fW3k4YGwrwX190QZtRiegB/+AGKW+R57DJGHjeywYmneTcOK+qXFdBP0S2wAb0ezQXk0so8KzaD+Y6yrV+G5eYbYCzv0R4ABALJ2jJ1BDNR6AAAAAElFTkSuQmCC) 0px center repeat-x;
width: 20px;
}
.management .power_menu li .meter_plan_c {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjExQzUyMUY0MEEwOTExRTdBMkQ3ODAxRjBCQzQ4QkYxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjExQzUyMUY1MEEwOTExRTdBMkQ3ODAxRjBCQzQ4QkYxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTFDNTIxRjIwQTA5MTFFN0EyRDc4MDFGMEJDNDhCRjEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTFDNTIxRjMwQTA5MTFFN0EyRDc4MDFGMEJDNDhCRjEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz60RaXFAAAB6UlEQVR42pTVT0iUQRjH8VfbPHhJRS+1YLt1DewY6BIdRESrg5Wyly5Cl7CDB291ko0gFDqsHsKTXvYgUlS3PYVEsIvJkiKxpRGI0KYmtQTrd+Q3Obzs+776wMeZ992ZZ8f5t16tVvNC2HgU0e6/Bv6UveN4iWXM6rlT5U/sooRhrDh9puQoYur0GN/U4byTyEarVPAHT/R+Ai1uw5jKJRRVv4Jpr358RxVzer7vbxCr02lN7zPY8k4ZbsJ7mp8zuIYs2kP6lqISmgbdqt/AKmohCRNRCT8pka3bxQiK3aiEbqImTX7ltHPY6NTN3F3AZXxG6gT9X+Bt0AjH8VD1dXx09punbbWIi7ilch+/0GDn25wUU7mqJK/UeQAHyDsJ36FZm3kTBXRoR5j6XZTtee3SWWyWeud0EgdIwwykG+1I4D2+oNWf0OpSJ/ucxD+MOO8quK36OXzFU3dR4ujDTXxAr/PZEDawELA4Zh6f4447wgeoaiQT+ua8PpvBvO+/MCPcNrcVZpEyidxVzjo3R0alWdUd7cekb1RpnFX9h26p30Fz6DeIv4iHtMnhjd02o5qjelHUMSuo7Meer82oLuWUe80HxXWN4JJW0myPMfRolXPuz4R30t8KacMzLYSJfbxW8qM2hwIMAPBJIhGPhzpWAAAAAElFTkSuQmCC) 0px center repeat-x;
width: 20px;
}
.management .power_menu li .meter_execute {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJGRkJBN0UxMEEwODExRTc5NjQ4QkEyQTYwNENFOTc1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJGRkJBN0UyMEEwODExRTc5NjQ4QkEyQTYwNENFOTc1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkZGQkE3REYwQTA4MTFFNzk2NDhCQTJBNjA0Q0U5NzUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkZGQkE3RTAwQTA4MTFFNzk2NDhCQTJBNjA0Q0U5NzUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6kRKyyAAAB9klEQVR42oyUTUhUURTHZ2rMkUAXClqOadjChaRhLaQ2gohgDQkudBVYouDGbW5c6c59ghpBCBUpM6LiQmwR9AGBiAtBIaFSoynCoJgS9Xfh/+R0eYMe+HHuux/nnns+XjSVSkVOkEEY1nge2uxiMpn8b/MZ73ABXPTmqsy4/KTbrcESeAWbcAeGYBt6zJ6rsAxdEIen6XR6CYqCDVHz5EVoiZxe9qBQ4/dwk+fvWw+fwIH5/gdjcEveu1DchQWtF4a91HoYg3Wohgzchnc5vOuSA3lyIoF3O34M78nYoUuejDVBq9lzAUbgJfQZ77qtqwmoNxuewRu4DLNQZgzmw0MYhcewpvn79pkfpQOZkX4A52UkkLh0r+pzGmrd5WR6C/075hlzsiOdkB7Q3B/o11ye1r+ac5WBhytQDBVaKJVela4Bv53+whfF1Mp3F8NrcMnc1i49Abs5suxi+EvJc5Imy1EosVmekO6ERvipA/uesT7Fr1ud4+RRWB1egQ2NM2q/t7AEW0qOy3gzdMCUYvkBz677FR432Q36+rW6wz3tky75rKJ+IWNOGsjwgG/wMKRPz8K5kPiVhszV+Qaz6gr3t5nU03pk2JcNxe8GfIPnqsvjwo6YuDWZ7/EcGZ4z4wril7WLsVP8pjLSP+SRlay/+UiAAQCin3RjZgCp8gAAAABJRU5ErkJggg==) 0px center repeat-x;
width: 20px;
}
.management .power_menu li .meter_execute_c {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI2Njc5MUREMEEwOTExRTdBOUIzOTlCRjZDOUY0QzFCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI2Njc5MURFMEEwOTExRTdBOUIzOTlCRjZDOUY0QzFCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjY2NzkxREIwQTA5MTFFN0E5QjM5OUJGNkM5RjRDMUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjY2NzkxREMwQTA5MTFFN0E5QjM5OUJGNkM5RjRDMUIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5HiaudAAABy0lEQVR42pSUzytEURTH3/AwFn6UqfFjZJSFHaUJZTM7FspCym4aaRY21ixkwT9gZUEpUiyYhaSIhY1Y+FE2JOXH0AzlRzQzmed79R3O3B4vpz7dd88599x7zj33GZZlGQ6MWD+y5uSfZ+RKMajWdH7xXWM4iYjuAXvgDXSDMXBr5UoGbIN+4AbzYAuUZePIgBvW/+RJfKuDmHrKcyAj5mkwDTqAh6XoAeu0lwrfPLuU1Q7n3DEOWv8ovko5Rd8PUGWX8oCoUzt1QdApfNTCSVAIwiLlURnQB5rBPo2LNNaDVxASAf30mQIucML5hQyY1ordR+ME5xERsJE6lW4JGBfrLsGpiTKaWifFOPo4DlP3DoaoK6D9XqyrMxjsEFSAWhq8HI85NoKotmkK3IAqTf8gL+WOR1/gvBzEfunBSdbwiPOo3S1PiDbI3nLApsYRrSuUdNkFbBAOqg/bqFdPa4bPbJO6XtGHB3Y/BzdYEbVQL2OXr+MFXIEEuAb9YJkXo6SFF5fzZCytuM8gHxTa/E+8NromPWASBMEOmAWVYJCBdTkDYRAAcbAEIlmj66uQf8sqW6uchIStiIf5FtNwlgTHR55ISlJ3/hRgAMz63WS6uJVTAAAAAElFTkSuQmCC) 0px center repeat-x;
width: 20px;
}
.management .power_menu li .meter_check {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNEREJGM0Q1MEEwODExRTc4QjE1QTEyOEE0QkI0NzQ2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNEREJGM0Q2MEEwODExRTc4QjE1QTEyOEE0QkI0NzQ2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0REQkYzRDMwQTA4MTFFNzhCMTVBMTI4QTRCQjQ3NDYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0REQkYzRDQwQTA4MTFFNzhCMTVBMTI4QTRCQjQ3NDYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4wB8YpAAABjklEQVR42pzUSygFURzH8cG9XisiUsJCJI9QFhZKkoW4ZUEsSMmCDSV2yrVyJQtR0mXBTqh7WXglEVGsWEqSFUJKkUe+p/6jaZoZw6lP93bOmV//6X/ORIRCoWpN04LI1KzHK2bRg0/zos/n+/nvkaA9zNmEpWEaiWizCjSGqYomcKLZj0tsYt4pMFJ+PzTncYwa1ElglFOYm2EMDP43LBorCEhgLdqR7xTmtShfBS2hAgsyd4BnZDuFTWEL8aagclTh3LB3EIdOYaPIwRoSTEFnhn2qylLMoC8cDsdZhV2gUgKvbIJasYsU3GNAvQ2BXqsG6IH7FkHqTI7DL03oRBmK0GLXTRVYbwpSIx3JWDTMXUuHS/56zu7wjgJTt3Nxo5fudrzIHVVSpapuxOrHxiP3LMll4AgaMGmY6+fLcauHbcsXY9Xmjj5gGMXYkArH8ChHJEA31QHuUmHN6EWWTTVfiJErdYQmvBnWVffXcarCnjD0y+s1IgMdyDOtqeeXVUFuG1Ao93bHadO3AAMA6ddddMTG5uIAAAAASUVORK5CYII=) 0px center repeat-x;
width: 19px;
}
.management .power_menu li .meter_check_c {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI1NjI3QTFBMEEwOTExRTdCQUFDRDRCNkQ3MjhBN0YwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI1NjI3QTFCMEEwOTExRTdCQUFDRDRCNkQ3MjhBN0YwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjU2MjdBMTgwQTA5MTFFN0JBQUNENEI2RDcyOEE3RjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjU2MjdBMTkwQTA5MTFFN0JBQUNENEI2RDcyOEE3RjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4eXB7KAAABZElEQVR42pzUvUvDQBjH8aut9WVyEdFBOggqtlBEcBBBUGdxUFzsroMI6urg5uTiIBZUEHFqBSuiCB3EwcX/QbSLFHwDEbE1fk8ucITLJfGBDzSX5HfPJb0Ix3EmcO/41ye2EYewickgIcQ19oS5OrGDM+RQF36lZh8KmHUYbziydeiGZYOWECYwSpgeuP/fsCSK2FTHI+qeAVtYo6F9GXSKKtLauOxuyha2izJaDUEZz41LaLeF9aCiAtssQaM4wAlW0OL3zNzAV5+gedRxjjyecKMekfEFyMCSISihJljXxrrxjlzUv0ZKXdvnGb/ClvzdIMJXFd9Ia2NJ9KIiDxIRwj7UHpU68IBFNOPQ3Zs1jIfcAV149HxVVvWvxgWZ/SihZujoGRvI4lJ1WMALBjGNPBbkMuewjJTP8n7QhCJuMYsv7fwYZEN3sb9XGlwzOMak6shba7LzsC8ggzjKtot+BRgA5UUOqF8qEBsAAAAASUVORK5CYII=) 0px center repeat-x;
width: 19px;
}
.management .power_menu li .meter_record {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkQ5RTNBODREMEEwODExRTdCRDM0OTZBNzZERjdCMDY3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkQ5RTNBODRFMEEwODExRTdCRDM0OTZBNzZERjdCMDY3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RDlFM0E4NEIwQTA4MTFFN0JEMzQ5NkE3NkRGN0IwNjciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RDlFM0E4NEMwQTA4MTFFN0JEMzQ5NkE3NkRGN0IwNjciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz71zVOhAAABF0lEQVR42mLcuHEjAx7ADMR7gdgeyj8JxHZA/AumwM/PD66YiQE/kIEa1AnE9UBsDsTquBSDDGPBYxgjlN4BxJuQXIvTsHdArM9ABQAyjBeIBalhGAuZ+kBhlwrSv2nTpudAuhEYET/INWwWEPMD8QMgjgHiO0A8l4lMw0AGLQBiByD+Ag0qlKQBiqW5QHwBiM8DcS05EQADZkCcBDXoCRA3ATEXuYaxQ+lGqAtJjiAmBiqCEWIYcgC/hdLbgJgTWsy8AeJ/QDwHiP9C5d9B1WYAcQA0jX1ANgyUxi5Dk4Y+UknxDIhDkMqzOiB+BMSJQBwP1bcCiJeBixhg4XgLqmApEP+nwJfvQC5LA+LlQDyPwiD7CBBgAPpCNmM1QttMAAAAAElFTkSuQmCC) 0px center repeat-x;
width: 20px;
}
.management .power_menu li .meter_record_c {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI0RjY5NzU2MEEwOTExRTc4MEY4OURFQkI5NTIzOEQwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI0RjY5NzU3MEEwOTExRTc4MEY4OURFQkI5NTIzOEQwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjRGNjk3NTQwQTA5MTFFNzgwRjg5REVCQjk1MjM4RDAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjRGNjk3NTUwQTA5MTFFNzgwRjg5REVCQjk1MjM4RDAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6iMV9IAAABC0lEQVR42uTUMUoDQRTG8ecmGAyI5AQ5gaTT0j2ChaUgCoFcwkCscgZJIE1C6hRiaZkugp1YiIhp4pLCQgQd/yNfyDarONkuD37MsvvmY3dnGHPO2S8KuHHLGmMzq9/+CKsqpI2mrnez+iMzK1p2bWi8xkjXhaxmH5agZjmUD9tGJY+wYuC8fdQ1f4oW3kPDLrGDRxzjAd0oMMwH9RDjTb/K0mF+lbq4xQTnIQuwqD2cKegZFyiHhpU0tvSG/16gyHKsNQlL/+BXjVfYwgdm+EIHn3qeqLeBQ+2xeTrM77E7bY1a6qR4wREOdK+JJ5ziRPOGGPwcMZxD92row63wlYk/1GJM3eo1/xZgAPy77SdIC3EZAAAAAElFTkSuQmCC) 0px center repeat-x;
width: 20px;
}
ul, ol {
margin: 0 0 0px 0px;
padding: 0;
}
</style>
</head>
<body style="height:100%">
<div class="management">
<div class="power_menu">
<ul>
<li class="hover" value="0"><span class=" meter_book"></span>抄表册管理<em class="right"></em></li>
<li value="1"><em class="left"></em><span class=" meter_plan"></span>抄表计划管理<em class="right"></em></li>
<li value="2"><em class="left"></em><span class=" meter_execute"></span>抄表执行<em class="right"></em></li>
<li value="3"><em class="left"></em><span class=" meter_check"></span>抄表结果审核<em class="right"></em></li>
<li value="4"><em class="left"></em><span class=" meter_record"></span>发布数据记录<em class="right"></em></li>
</ul>
</div>
</div>
<div>
<iframe id="iframe_0" src="${basePath}/meterReading/book/show.do?menuId=41" style="padding: 0px; width: 100%;" frameborder="no" border="0" scrolling="yes" allowtransparency="yes"></iframe>
</div>
<script type="text/javascript">
var iframeHeight = $(window).height()*0.9;
$("#iframe_0").height(iframeHeight);
$(".power_menu").on("click","li",function(){
$(this).addClass("hover").siblings("li").removeClass("hover");
$(".meter_book").removeClass("meter_book_c");
$(".meter_plan").removeClass("meter_plan_c");
$(".meter_execute").removeClass("meter_execute_c");
$(".meter_check").removeClass("meter_check_c");
$(".meter_record").removeClass("meter_record_c");
switch($(this).val())
{
case 0:
$(".meter_book").addClass("meter_book_c");
document.getElementById("iframe_0").src="${basePath}/meterReading/book/show.do?menuId=41";
break;
case 1:
$(".meter_plan").addClass("meter_plan_c");
document.getElementById("iframe_0").src="${basePath}/meterReading/meterPlan/show.do?menuId=42";
break;
case 2:
$(".meter_execute").addClass("meter_execute_c");
document.getElementById("iframe_0").src="${basePath}/meterReading/execute/show.do?menuId=43";
break;
case 3:
$(".meter_check").addClass("meter_check_c");
document.getElementById("iframe_0").src="${basePath}/meterReading/check/showMeterRecordCheck.do?menuId=45";
break;
case 4:
$(".meter_record").addClass("meter_record_c");
document.getElementById("iframe_0").src="${basePath}/meterReading/pub/showMeterRecordPubList.do?menuId=44";
break;
default:
break;
}
if($(this).val()=='0'){
$(".meter_book").addClass("meter_book_c");
}
}).find('li:first').trigger('click');
</script>
</body>
</html>结尾
感兴趣的小伙伴可以加入我们的QQ群：372702757
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- java web开发中，jsp使用了frameset框架，如何实现整个页面跳转，并且同一个表单中可以提交两个action
- (精)在ASP.NET中使用IFRAME+DIV,可以实现在同一页面使用弹出(模态)窗口
- 使用API实现的一个增加系统桌面,并且可以任意切换的小程序.
- 一个小型的网站，比如个人网站，可以使用最简单的html静态页面就实现了，配合一些图片达到美化效果，所有的页面均存放在一个目录下，这样的网站对系统架构、性能的要求都很简单，随着互联网业务的不断丰富，网站
- 2.Animation的使用 - 创建一个可以自动切换界面的游戏登陆页面
- 在ASP.NET中使用IFRAME+DIV,可以实现在同一页面使用弹出(模态)窗口
- 在主页面中实现Iframe中的子页面的切换
- GreyFrame是一个遮罩弹出显示页面的JS类, 它可以允许你像在框架(如: frame和iframe)中打开一个链接.
- java基础问题---java中有几种方法可以实现一个线程？用什么关键字修饰同步方法? stop()和suspend()方法为何不推荐使用
- Joomla!中如何使用switcher.js实现一个位置上div层的切换显示 【转】
- 如何在页面内制作一个可以实现'另存为'的链接
- 页面跳转有很多种方法，可以是更换页面Content切换，也可以使用Navigation导航。
- 使用extjs，来实现一个页面调用另一个页面中的方法，并且能获得方法的返回值
- 一个可以在页面上随意画线、多边形、圆，填充等功能的js
- 同一页面中实现点击其中一个iframe中的链接后，将链接内容显示到另一iframe
- 可以在一个页面里面使用多个uitableview ，并使用同一个delegate
- Jquery实现“Iframe”页面切换
- jQuery实现切换页面布局使用介绍
- 一个可以在页面上随意画线、多边形、圆，填充等功能的js
- 浏览器以图片格式请求一个aspx页面和以iframe形式请求页面，在服务器端可以判断出来么？