首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

【叨、校长】DIV大小随窗口改变、Ext Panel放丰功能的实现

2012-11-22 
【叨、校长】DIV大小随窗口改变、Ext Panel放大功能的实现htmlheadtitleMy JSP index.jsp starting pa

【叨、校长】DIV大小随窗口改变、Ext Panel放大功能的实现

<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>

热点排行