上左右布局
上、左、右布局页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>发布统计系统</title>
</head>
<body style="margin: 0;overflow: hidden;">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="100">
<iframe id="iframe_top" name="iframe_top" src="${request.contextPath}/info/getTopHtml" width="100%"
height="100" allowtransparency="true" scrolling="no" border="0" frameborder="0"></iframe>
</td>
</tr>
<tr>
<td>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20%">
<iframe id="iframe_left" name="iframe_left" src="${request.contextPath}/info/getLeftHtml"
width="100%" allowtransparency="true" border="0" scrolling="no"
frameborder="0"></iframe>
</td>
<td>
<iframe id="iframe_main" name="iframe_main" src="${request.contextPath}/info/getMainHtml"
width="100%" allowtransparency="true" border="0" scrolling="no"
frameborder="0"></iframe>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<script>
function changeFrameHeight() {
var top_height = document.getElementById("iframe_top");
if (top_height) {
top_height = top_height.height;
} else {
top_height = 0;
}
document.getElementById("iframe_left").height = document.documentElement.clientHeight - top_height;
document.getElementById("iframe_main").height = document.documentElement.clientHeight - top_height;
}
window.onresize = function () {
changeFrameHeight();
}
window.onload = function () {
changeFrameHeight();
}
</script>
</html>
右侧主页面tab
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>右侧主页面</title>
<script type="text/javascript" src="${request.contextPath}/assets/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/assets/js/layer/layer.js"></script>
<style type="text/css">
ol, ul, dl {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}
a {
text-decoration: none;
color: #333;
cursor: pointer;
}
a:focus {
outline: none;
}
.tabbox .clearfix:after {
content: "";
display: block;
clear: both;
}
.tabbox ul li {
float: left;
padding: 9px 0;
height: 23px;
line-height: 23px;
}
.tabbox ul li a {
padding: 0 30px;
}
.tabbox ul li a.haveborder {
border-right: 1px solid #c3c3c3;
}
.tabbox ul li.on {
background-color: #fff;
border-top: 2px solid #ff7f27;
margin-top: -1px;
height: 21px;
line-height: 21px;
}
.tabbox ul li.on a {
border-right: none;
}
</style>
</head>
<body style="margin: 5px 0px 0px 5px;">
<div class="tabbox"
style="width: 100%;background-color: #e7e7e7;height: 40px;line-height: 40px;border-top: 1px solid #c3c3c3;margin: 0px auto;font-size: 16px;position: relative;top: 0;left: 0;bottom: 0;right: 0;">
<ul class="clearfix">
<li id="year" class="on" style="display: none;">
<a href="javascript:tab('${request.contextPath}/dept/getDeptDesc?type=${type}&id=${ID}&upperID=${upperID}&nodePath=${nodePath}')">年度统计（年）</a>
</li>
<li id="quarter" style="display: none;">
<a href="javascript:tab('')">季度统计（季）</a>
</li>
<li id="month" style="display: none;">
<a href="javascript:tab('')">月份统计（月）</a>
</li>
<li id="week" style="display: none;">
<a href="javascript:tab('http://www.baidu.com')">周统计（周）</a>
</li>
<li id="day" style="display: none;">
<a href="javascript:tab('')">月统计（日）</a>
</li>
<li id="hour" style="display: none;">
<a href="javascript:tab('http://www.baidu.com')">日统计（小时）</a>
</li>
</ul>
<iframe id="iframe" name="iframe" src="" width="100%" height="500" allowtransparency="true"
border="0" frameborder="0"></iframe>
</div>
<script>
function tab(url) {
var aLi = $('.tabbox ul li');
aLi.click(function () {
aLi.removeClass('on');
$(this).addClass('on');
});
$("#iframe").attr("src", url);
}
$("ul").on("click", "li", function () {
$("a", this)[0].click();
});
function changeFrameHeight() {
document.getElementById("iframe").height = parent.document.getElementById("iframe_main").height - 40;
}
window.onresize = function () {
changeFrameHeight();
}
$(function () {
changeFrameHeight();
$('.clearfix').find(".on").find("a")[0].click();
$("#year").show();
$("#quarter").show();
$("#month").show();
$("#week").show();
$("#day").show();
$("#hour").show();
});
</script>
</body>
</html>
