您的位置：首页 > 其它

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

2009-12-27 03:43 656 查看

需求:可以随时拖动中间div改变两边的边框架(left,right)宽度,并解决了拖拽过程中不断渲染页面的效率问题.

缺陷:仅支持ie.

Js代码

<HTML>

<head>

<style type='text/css'>

.table{

width:400;

height:2;

background-color:red;

border-color:yellow;

border:0px;

}

</style>

<SCRIPT LANGUAGE="JavaScript">

var isIe = true;

if(!document.all)

{

isIe = false;

}

function downToResize(obj,e){

obj.style.cursor='col-resize';

var e = isIe ?window.event : e;

//记录开始准备移动的起始位置

obj.mouseDownX=e.clientX;

//父级左边框架的宽度

obj.parentLeftFW = document.getElementById('left').parentNode.clientWidth;

//父级右边框架的宽度

obj.parentRightFW = document.getElementById('right').parentNode.clientWidth;

obj.parentBox = document.getElementById('box');

if(isIe)obj.setCapture();

else{

alert('不支持火狐..');

obj.mouseDownX = 0;

}

}

function moveToResize(obj,e){

var e = isIe ?window.event : e;

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.parentBox);

}

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

var e = isIe ?window.event : e;

//下面是实际的移动边框的大小

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 = parent.document.getElementById('left').parentNode;

leftObj.width = newLeftW;

leftObj.firstChild.style.width = newLeftW+'px';

var rightObj = parent.document.getElementById('right').parentNode;

//下面的之所以要减掉一个4,是在鼠标旁边的一个小小的位移..

rightObj.width = newRightW-4;

rightObj.firstChild.style.width = newRightW-4;

}

if(isIe)obj.releaseCapture();

else{

}

obj.mouseDownX=0;

obj.removed = 0;

obj.style.cursor = 'default';

obj.parentBox.style.display = 'none';

}

</SCRIPT>

</head>

<body style="overflow: hidden;">

<div id='box' style="display:'none';position:'absolute';border:'1px dotted red';z-index:5;width:20px;height:100px;"></div>

<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);"

onmouseover="this.style.cursor='col-resize';"

onmousemove="moveToResize(this,event);"

onmouseout="this.style.cursor='default';"

onmouseup="upToResize(this,event);"></div></td>

<TD><iframe id='right' src='test.html' style="height:100%;z-index: -1;width:100%;border:0px;" scrolling="no" ></iframe></TD>

</TR>

</TABLE>

</body>

</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航