使用table+iframe实现可以拖动改变框架宽度

renjie120

浏览: 237670 次
性别:
来自: 上海

最近访客更多访客>>

qq12547345

此间的我

fengziyu925

yuanlibo

博主相关

博客

微博

相册

留言

关于我

博客专栏

: Java应用集锦
浏览量：22902

文章分类

社区版块

存档分类

博客分类：

js及框架

框架 IE 脚本 HTML

说明:以前发布的不知道为什么不好用,这次是修改的最新的版本,可以好用!只支持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;">
<TABLE  height="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');"
		  onmouseover="this.style.cursor='col-resize';"
		  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');"
		  onmouseover="this.style.cursor='col-resize';"
		  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>

demo.rar (1.9 KB)
下载次数: 500

分享到：

表格树GridTree的后台示例代码(含war包) ... | 实现可以拖动框架边框的宽度

2009-12-26 15:26
浏览 3717
评论(3)
论坛回复 / 浏览 (3 / 6999)
分类:Web前端
查看更多

3 楼 wukele 2010-04-07

我也是脚本出错 objobj.parentBox.style.width = obj.offsetWidth;
objobj.parentBox.style.height = obj.offsetHeight;
objobj不存在，改为obj，没效果，ie卡死
我用的是ie8

2 楼 renjie120 2010-01-04

dyllove98 写道

不能用 Ie提示程序脚本会照成运行速度减慢~~拖动就卡，没效果

我测试了一下是好用的啊,楼上的使用的是ie几??
我用的是ie8.

1 楼 dyllove98 2010-01-04