使用table+iframe实现可以拖动改变框架宽度
说明:以前发布的不知道为什么不好用,这次是修改的最新的版本,可以好用!只支持ie!!需求:可以随时拖动中间div改变两边的边框架(left,right)宽度,并解决了拖拽过程中不断渲染页面的效率问题.
缺陷:仅支持ie.
下面是测试test.htm:
<html><head><style> .a{ position:relative; width:100%; height:100%; border: solid 0px; z-index:1; cursor:e-resize; border-width:0px;margin:0px;background-color:green;} </style> </head><SCRIPT LANGUAGE="JavaScript"><!--function init(){var ans = [];for(i=0;i<10000;i++){ans.push(i);}document.getElementById('a').innerHTML = ans.join(',');}//--></SCRIPT><body onload='init();'><div id='a' style='width:100%;height:100%;word-wrap: break-word;'></div></body></html>
下面是主要的页面
<HTML><head><style type='text/css'>.table{width:400;height:2; background-color:red;border-color:yellow;border:0px;}</style><SCRIPT LANGUAGE="JavaScript">function downToResize(obj,e,lf,rf,bx){obj.style.cursor='col-resize';var e = window.event;//记录开始准备移动的起始位置obj.mouseDownX=e.clientX; //父级左边框架的宽度obj.parentLeftFW = document.getElementById(lf).parentNode.clientWidth; //父级右边框架的宽度obj.parentRightFW = document.getElementById(rf).parentNode.clientWidth;//obj.parentBox =document.getElementById(bx);obj.setCapture(); if(!obj.createBox){var div = document.createElement("div");div.id = 'box'+lf+rf;div.style.display = 'none';div.style.position = 'absolute';div.style.border = '1px dotted red';div.style.zIndex = '5';div.style.width = '3px';div.style.height = '100%';document.body.appendChild(div);obj.parentBox= document.getElementById(div.id);obj.createBox = 1;}}function moveToResize(obj,e){var e = window.event;if(!obj.mouseDownX) return false; obj.removed = 1;obj.parentBox.style.display = 'inline';obj.parentBox.style.width = obj.offsetWidth;obj.parentBox.style.height = obj.offsetHeight;obj.parentBox.style.left = e.clientX;obj.parentBox.style.top = getPosTop(obj);}function getPosLeft(elm) { var left = elm.offsetLeft; while((elm = elm.offsetParent) != null) { left += elm.offsetLeft; } return left;}function getPosTop(elm) { var top = elm.offsetTop; while((elm = elm.offsetParent) != null) { top += elm.offsetTop; } return top;}function upToResize(obj,e,lf,rf){var e = window.event ;//下面是实际的移动边框的大小var changeW = e.clientX*1-obj.mouseDownX;if(changeW!=0&&obj.removed){var newLeftW=obj.parentLeftFW*1+changeW; var newRightW=obj.parentRightFW*1-changeW; if(newLeftW<=200) {var temp = newLeftW;newLeftW = 200;newRightW =newRightW-(200-temp);}if(newRightW<=200) {var temp = newRightW;newRightW = 200;newLeftW = newLeftW-(200-temp);}var leftObj = document.getElementById(lf).parentNode;leftObj.width = newLeftW;leftObj.firstChild.style.width = newLeftW+'px';var rightObj = document.getElementById(rf).parentNode;//下面的之所以要减掉一个4,是在鼠标旁边的一个小小的位移..rightObj.width = newRightW-4;rightObj.firstChild.style.width = newRightW-4;//rightObj.width = '100%';//rightObj.firstChild.style.width = '100%';}obj.releaseCapture(); obj.mouseDownX=0; obj.removed = 0;obj.style.cursor = 'default';obj.parentBox.style.display = 'none';}</SCRIPT></head><body style="overflow: hidden;"><TABLEheight="100%" width='100%'><TR><TD ><iframe id='left' src='test.html' style="width:100%;height:100%;z-index: -1;border:0px;"scrolling="no"></iframe></TD><td><div style='height:100%;background-color:red;width:8px;'onmousedown="downToResize(this,event,'left','right');" onmousemove="moveToResize(this,event);"onmouseout="this.style.cursor='default';"onmouseup="upToResize(this,event,'left','right');"></div></td><TD><iframe id='right' src='test.html' style="height:100%;z-index: -1;width:100%;border:0px;"scrolling="no" ></iframe></TD><td><div style='height:100%;background-color:red;width:8px;'onmousedown="downToResize(this,event,'right','right2');" onmousemove="moveToResize(this,event);"onmouseout="this.style.cursor='default';"onmouseup="upToResize(this,event,'right','right2');"></div></td><TD><iframe id='right2' src='test.html' style="height:100%;z-index: -1;width:100%;border:0px;"scrolling="no" ></iframe></TD></TR></TABLE></body></HTML>
页:
[1]