【叨、校长】DIV大小随窗口改变、Ext Panel放大功能的实现
程序员文章站
2022-07-14 08:56:57
...
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<link rel="stylesheet" type="text/css"
href="ext3.4/resources/css/ext-all.css" />
<script type="text/javascript" src="ext3.4/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext3.4/ext-all.js"></script>
<style type="text/css">
#mydiv1{
background:"#00ffff";
}
</style>
<script type="text/javascript">
Ext.onReady(function(){
document.getElementById("mydiv1").innerHTML="";
var p1=createP("mydiv1");
document.getElementById("mydiv2").innerHTML="";
createP("mydiv2");
document.getElementById("mydiv3").innerHTML="";
createP("mydiv3");
document.getElementById("mydiv4").innerHTML="";
createP("mydiv4");
document.getElementById("mydiv5").innerHTML="";
createP("mydiv5");
document.getElementById("mydiv6").innerHTML="";
createP("mydiv6");
function createP(div){
var p=new Ext.Panel({
renderTo:div,
title:"测试"+div,
tools:[{
id:"minimize",
handler:function(a,b,c){
c.setWidth(document.body.clientWidth/3);
c.setHeight(document.body.clientHeight/2);
document.getElementById("mydiv1").style.display="";
document.getElementById("mydiv2").style.display="";
document.getElementById("mydiv3").style.display="";
document.getElementById("mydiv4").style.display="";
document.getElementById("mydiv5").style.display="";
document.getElementById("mydiv6").style.display="";
}
},{
id:"maximize",
handler:function(a,b,c){
c.setWidth(document.body.clientWidth);
c.setHeight(document.body.clientHeight);
if(div=="mydiv2"){
document.getElementById("mydiv1").style.display="none";
}else if(div=="mydiv3"){
document.getElementById("mydiv1").style.display="none";
document.getElementById("mydiv2").style.display="none";
}else if(div=="mydiv4"){
document.getElementById("mydiv1").style.display="none";
document.getElementById("mydiv2").style.display="none";
document.getElementById("mydiv3").style.display="none";
}else if(div=="mydiv5"){
document.getElementById("mydiv1").style.display="none";
document.getElementById("mydiv2").style.display="none";
document.getElementById("mydiv3").style.display="none";
document.getElementById("mydiv4").style.display="none";
}else if(div=="mydiv6"){
document.getElementById("mydiv1").style.display="none";
document.getElementById("mydiv2").style.display="none";
document.getElementById("mydiv3").style.display="none";
document.getElementById("mydiv4").style.display="none";
document.getElementById("mydiv5").style.display="none";
}
}
}],
width:document.body.clientWidth/3,
height:document.body.clientHeight/2,
html:"我是panel"
})
return p;
}
})
</script>
</head>
<body style="overflow:hidden;">
<div id="max_div" style="position:absolute;z-index:0;">
<table cellspacing="0">
<tr>
<td id="mydiv1" vertical-align="middle" align="center" >
<img src="images/loadmask.gif">
</td>
<td id="mydiv2" vertical-align="middle" align="center" >
<img src="images/loadmask.gif">
</td>
<td id="mydiv3" vertical-align="middle" align="center" >
<img src="images/loadmask.gif">
</td>
</tr>
<tr>
<td id="mydiv4" vertical-align="middle" align="center" >
<img src="images/loadmask.gif">
</td>
<td id="mydiv5" vertical-align="middle" align="center" >
<img src="images/loadmask.gif">
</td>
<td id="mydiv6" vertical-align="middle" align="center" >
<img src="images/loadmask.gif">
</td>
</tr>
</table>
</div>
<div id="max_div_up" style="position:absolute;z-index:0;border:1px solid red"></div>
<script type="text/javascript">
var mydiv1=document.getElementById("mydiv1");
var mydiv2=document.getElementById("mydiv2");
var mydiv3=document.getElementById("mydiv3");
var mydiv4=document.getElementById("mydiv4");
var mydiv5=document.getElementById("mydiv5");
var mydiv6=document.getElementById("mydiv6");
var mydiv_resize=function(){
mydiv1.style.width=document.body.clientWidth/3;
mydiv1.style.height=document.body.clientHeight/2;
mydiv2.style.width=document.body.clientWidth/3;
mydiv2.style.height=document.body.clientHeight/2;
mydiv3.style.width=document.body.clientWidth/3;
mydiv3.style.height=document.body.clientHeight/2;
mydiv4.style.width=document.body.clientWidth/3;
mydiv4.style.height=document.body.clientHeight/2;
mydiv5.style.width=document.body.clientWidth/3;
mydiv5.style.height=document.body.clientHeight/2;
mydiv6.style.width=document.body.clientWidth/3;
mydiv6.style.height=document.body.clientHeight/2;
}
mydiv_resize();
window.onresize=mydiv_resize;
function change(){
mydiv1.style.width=document.body.clientWidth;
mydiv1.style.height=document.body.clientHeight;
;
}
</script>
</body>
</html>
上一篇： 删除svn信息