一个jsp页面想分成左右两块分开显示两块内容。这种效果很不错,但当你想要某一个div在某一时刻占据整个页面的大小,而第二个div则不显示。这时,可以在两个div之间加上左右箭头的图标,点击图标时控制两个div的width就可以了。
实现不难,记下以备查。
<div id="CententDiv">
<jsp:include flush="true" page="ags_map.jsp"></jsp:include>
</div>
<div class="resizeRight">
<img id="resizeImg" src="/epub_web/util_web/jsp/login/image/toright.gif" alt="隐藏右边" style="cursor:hand" onClick="changeRightSize();">
</div>
<div id="RightDiv">
<jsp:include flush="true" page="right_menu.jsp"></jsp:include>
</div>
div#RightDiv {
float: right;
overflow-y:hidden;
overflow-x:scroll;
width: 20%;
height: 100%;
}
div#CententDiv {
left:0;
top:0;
float: left;
width: 80%;
height: 100%;
margin: 0px;
}
.resizeRight{
position:absolute;
left:expression(this.previousSibling.clientWidth-this.clientWidth;
top:expression(this.previousSibling.clientHeight/2-this.clientHeight/2);
}
function changeRightSize(){ var resizeImgSrc = document.getElementById("resizeImg").src; if(resizeImgSrc.indexOf("right")!=-1){ document.getElementById("resizeImg").src = "/epub_web/util_web/jsp/login/image/toleft.gif"; document.getElementById("CententDiv").style.width = "100%"; document.getElementById("RightDiv").style.width = "0%"; } if(resizeImgSrc.indexOf("left")!=-1){ document.getElementById("resizeImg").src = "/epub_web/util_web/jsp/login/image/toright.gif"; document.getElementById("CententDiv").style.width = "80%"; document.getElementById("RightDiv").style.width = "20%"; } }
代码很简单,就不多说了,主要是展示得美观些。如果想在一个页面用div布局都差不多思路。注意以下几点:
1、css里通过float来得到流的方向。
2、css里用expression来动态得到图标的位置。并且通过this.previousSibling来得到第一个div,通过它的clientWidth和clientHeight来确定图标的位置。
3、通过 overflow-y:hidden;overflow-x:scroll;来设定overflow分为横与纵时的处理。