说明:以前发布的不知道为什么不好用,这次是修改的最新的版本,可以好用!只支持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>
分享到：
相关推荐
jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置，完美兼容IE，FireFox，Google Chrome浏览器。
本程序主要是用table表格拖动改变td宽度。
任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度
改变table的列宽度，可以拖拽的td表格，表格内文字只显示一行，超过的部分自动隐藏
vue-easytable表格老版本有表格列宽拖功能，但是最新版插件反而不存在该功能，但是大部分表格数据存在...若将ve-table封装以组件形式引用，可全局实现拖动表格列 改变列宽大小效果。如何封装我也会在资源内详细说明。
Table+CSS实现的TAB选项卡! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
用jquery实现table拖拽列功能，可动态改变表格列宽度，并且实现table表格100%的问题，如果列缩小，则自动拉伸最后一列以实现table100%的效果，如果拉伸长度比原长度大，则显示x滚动条。
拖拽改变列宽的功能网上很多，但是拖拽改变行高的我搜了很久，也没有发现可以用的。所以利用原有改变行高的模版，自己写了一个原生javascrript改变列宽的模版。
基于bootstrap用JS实现的局部刷新的案例，基于iframe实现tab页切换的效果
bootstrap-table拖拽表格改变列宽，兼容主流浏览器，兼容body与header对齐
1.附件内的源码是，是vue 和elementui实现table内的列可以随意拖拽的效果的代码。该代码在我的实际项目中已经应用。 2.table列的拖拽功能实现的核心就是改变 “表头列在数组中的位置”
Table+CSS实现的TabPane 选项卡代码实例! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
拖动单元格改变列宽或行高,可以扩展成表格设计器，改变tr 行高 td 列宽
vuex-table+SpringBoot前端实现树形结构（csdn）————程序
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查 适用于学习ssm框架 jQuery 和 Bootstrap的案例
修改bootstrap table设置列宽问题，增加插件和bootstrap table组合可随意拖动表格的列宽
实现了bootstrapTable 的列宽可鼠标拖动，方便查看列宽显示不完全的内容，前台js
实用 table + div + Jquery 实现，没有实用IE特有的expression(), 所以 兼容性 很好。 核心思想： 用JQuery的clone 复制 出 4张表， 分别放于 4 个 div 中来实现 水平 垂直 滚动， 首行 首列 冻结效果。
穿梭框+table表格结合
springboot + mybatis 实现后台数据接口，bootstrap table 通过js请求接口 表格分页加载显示数据