主题:使用table+iframe实现可以拖动改变框架宽度
来源:互联网 发布:nba球队数据统计排名 编辑:程序博客网 时间:2024/05/16 10:26
需求:可以随时拖动中间div改变两边的边框架(left,right)宽度,并解决了拖拽过程中不断渲染页面的效率问题.
缺陷:仅支持ie.
- <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>
- 主题:使用table+iframe实现可以拖动改变框架宽度
- 拖动改变Table的列宽度
- 拖动改变Table的列宽度
- 可以拖动表头改变列的宽度
- js 实现table每列可左右拖动改变列宽度
- 拖动改变表格宽度
- 可以拖动改变table列宽的sample
- 拖动一个div,动态改变其td宽度的实现
- js实现拖动改变层的大小(宽度)
- 火弧下带iframe框架拖动
- table拖动表格列宽度
- 实现拖动table标题实现改变td的大小
- 鼠标拖动改变表格宽度
- 可拖动拉伸的左右分栏效果,本例子是用Table以及JS来实现的,左右分栏可改变,拖动中间的边框就可实现宽度的调整,点击时可设置为隐藏左侧列表。
- 可拖动拉伸的左右分栏效果,本例子是用Table以及JS来实现的,左右分栏可改变,拖动中间的边框就可实现宽度的调整,点击时可设置为隐藏左侧列表。
- 可以拖动的table--html
- 对话框可以拖动改变大小
- 用拖动的方式改变表格宽度
- 怎么在无人状态下远程访问内网电脑
- 怎样可以在Windows上安装多个Mysql
- 蓝蜂浏览器框架重构
- Linux命令备忘
- 主题:jQuery学习之:Validation表单验证插件
- 主题:使用table+iframe实现可以拖动改变框架宽度
- 主题:web应用service层的全局事物问题
- 天涯人脉通讯录2010 V3.1.52.0 最新截图
- mysql-bin.000001文件的来源及处理方法
- jbpm一个很奇怪的问题
- 两种单例模式的代码案例
- Filter技术
- 也谈随需应变——万变不离其宗
- 源码下载网站