`
renjie120
  • 浏览: 237889 次
  • 性别: Icon_minigender_1
  • 来自: 上海
博客专栏
D11bba82-ec4a-3d31-a3c0-c51130c62f1c
Java应用集锦
浏览量:22941
社区版块
存档分类
最新评论

使用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;">
<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>
分享到:
评论
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  
不能用 Ie提示程序脚本 会照成运行速度减慢~~拖动就卡,没效果

相关推荐

    table表格拖动改变td宽度

    "table表格拖动改变td宽度"这一功能,正是为了提升用户体验,允许用户通过拖动来动态调整表格单元格(`td`)的宽度,使得数据的查看和操作更加灵活便捷。 实现这一功能通常涉及到以下几个关键知识点: 1. **HTML ...

    jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置

    总的来说,通过jQuery和JavaScript的组合,我们可以实现一个功能完善的表格列宽度拖动调整功能,提升用户的交互体验。这个功能对于数据展示和列表页面尤其有用,让用户可以根据自己的需求自由调整列宽,使得数据更加...

    任意改变table表格td的宽度 支持表格TD拖拽

    标题“任意改变table表格td的宽度 支持表格TD拖拽”和描述中反复提到的“动态td的宽度”,就是指这种功能,即允许用户通过拖动来调整表格单元格的宽度。 实现这一功能通常需要结合JavaScript(或者更高级的库如...

    原生javascript实现拖拽改变table表格行高(html)

    标题提到的“原生javascript实现拖拽改变table表格行高”是一项技术挑战,因为大部分在线资源都集中在改变列宽上,而对行高的调整相对较少。 首先,我们需要理解HTML表格的基本结构。表格由`&lt;table&gt;`元素定义,内部...

    table实现列宽的拖动效果

    "table实现列宽的拖动效果"是一个常见的需求,特别是在数据展示或者数据分析的应用中,用户可能需要自定义表格列的宽度以更好地查看和理解数据。这篇博客文章 "https://jifeng3321.iteye.com/blog/2403674" 提到的...

    bootstrapTable实现列宽可拖动

    "bootstrapTable 实现列宽可拖动"的特性就是为了解决这个问题,让用户可以通过鼠标拖动来动态调整表格列的宽度。 要实现这个功能,首先你需要确保在项目中已经引入了 BootstrapTable 的基础库和相应的 CSS、JS 文件...

    改变table的列宽度

    改变table的列宽度,可以拖拽的td表格,表格内文字只显示一行,超过的部分自动隐藏

    bootstrap-table拖拽表格改变列宽

    在“bootstrap-table拖拽表格改变列宽”这个主题中,我们将深入探讨如何实现用户可以动态调整表格列宽的功能,同时确保兼容主流浏览器,并保持表格的body部分与header部分对齐。 首先,我们需要引入必要的CSS和JS库...

    基于bootstrap用iframe实现的局部刷新的案例

    例如,我们可以通过监听`click`事件,获取用户点击的选项卡,然后改变iframe的`src`属性,加载对应的内容。 ```javascript $('ul.nav-tabs a').on('click', function (e) { e.preventDefault(); // 阻止默认的链接...

    实现bootstrap table可设置列宽和可拖动列宽

    总之,实现 Bootstrap Table 的列宽设置和拖动功能,需要结合使用 `data-width` 属性、Bootstrap Table 本身以及第三方的列宽拖动插件。通过这样的配置,我们可以为用户提供更加灵活和友好的数据查看体验。

    Table+CSS实现的TAB选项卡

    Table+CSS实现的TAB选项卡! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    拖动table单元格改变列宽或行高

    本文将深入探讨如何实现“拖动table单元格改变列宽或行高”的功能,以及这一特性在表格设计器中的应用。 首先,我们要理解HTML表格的基本结构。一个HTML表格由`&lt;table&gt;`元素定义,包含多个`&lt;tr&gt;`(行)元素,每个`...

    vue-easytable@2.16.3版本 拖动列 动态改变列宽大小实现

    vue-easytable表格老版本有表格列宽拖功能,但是最新版插件反而不存在该功能,但是大部分表格数据存在...若将ve-table封装以组件形式引用,可全局实现拖动表格列 改变列宽大小效果。如何封装我也会在资源内详细说明。

    jquery实现table拖拽列效果

    用jquery实现table拖拽列功能,可动态改变表格列宽度,并且实现table表格100%的问题,如果列缩小,则自动拉伸最后一列以实现table100%的效果,如果拉伸长度比原长度大,则显示x滚动条。

    可调整列宽TABLE

    在网页设计中,"可调整列宽TABLE"是一种常见的交互式数据展示技术,它使得用户可以根据需要自由调整表格中列的宽度。这种功能通常应用于数据量大、信息丰富的表格,以便用户能更清晰地查看和理解数据。下面将详细...

    vue Element ui实现table列拖动效果

    Vue.js 是一款非常流行的前端框架,它以其轻量级、高效和易用性著称。Element UI 是基于 Vue 的一套组件...通过以上的实现方式,你可以在 Vue 和 Element UI 项目中轻松地创建一个支持列拖动的表格,提升用户交互体验。

    vue +el + Sortable table列拖拽排序

    vue table 列拖拽排序例子

    Table+CSS实现的TabPane 选项卡代码实例

    Table+CSS实现的TabPane 选项卡代码实例! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    C# MVC+layui.js超轻量级框架(包含数据库)

    配合layui.js,可以实现美观且高效的前端交互体验。 `SQLSugar` 是一个强大的ORM(对象关系映射)框架,它允许开发者使用C#代码操作数据库,而无需编写SQL语句。SQLSugar支持多种数据库,包括SQL Server、MySQL、...

Global site tag (gtag.js) - Google Analytics