需求:可以随时拖动中间框架(center)改变两边的边框价(left,right)宽度.
主页面:
<HTML>
<frameset cols="400,8,*" frameborder="1" border="1" framespacing="0" framepadding="0" id="topFrame"
style="border:0px solid #cccccc" >
<frame name='left' src='http://www.baidu.com' frameborder="0" ></frame>
<frame name='center' src='newBlank.htm' scrolling="no" frameborder="0" noresize></frame>
<frame name='right' src='http://www.baidu.com' frameborder="0" ></frame>
</frameset>
</HTML>
中间的页面newBank.htm主要代码:
<HTML>
<head>
<script language="javascript"
src="jquery.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
function downToResize(obj){
obj.mouseDownX=event.clientX;
obj.parentLeftFW = parent.left.document.body.offsetWidth;
obj.setCapture();
}
function moveToResize(obj){
if(!obj.mouseDownX) return false;
var changeW = event.clientX*1-obj.mouseDownX;
var newLeftW=obj.parentLeftFW*1+changeW;
if(newLeftW<=200) newLeftW = 200;
parent.parent.document.body.cols= newLeftW+',8,*';
}
function upToResize(obj){
obj.releaseCapture();
obj.mouseDownX=0;
obj.style.cursor = 'default';
}
//-->
</SCRIPT>
</head>
<div id='show' style="display:'inline';position:'absolute';z-index:5;border:'1px dotted red';width:'100px';height:'100px'"></div>
<body style='background-color:gray' onmousedown="downToResize(this);"
onmousemove="moveToResize(this);"
onmouseup="upToResize(this);" onmouseenter="this.style.cursor='col-resize';"
onmouseout="this.style.cursor='default';">
</body>
</HTML>
缺陷:在拖动的过程中,不停的在渲染页面,不是很理想的效果.应该用table布局,再加iframe实现之....后面再发代码
分享到：
相关推荐
表格边框宽度.html 表格边框宽度演示。 表格标题.html 表格标题用法演示。 表格的基本语法.html 表格的基本语法。 表格内对齐.html 演示表格内对齐。 表格内文字对齐.html 演示表格内文字对齐...
22、修复了IE7通过url参数创建的iframe可能出现边框线的小问题 23、为了后续版能够提更多接口(小巧而强大的)，想了很久狠心改了调用名：art.dialog(); 24、既然连入口都改了，那再改下配置名(为了后续可能的拓展)...
页面由7行1列的表格构成（表格宽度为200像素、高度为334像素、边框粗细为1、框线颜色为银白色、折叠表格边框）；表格由上至下，在第1个单元格中插入图片文件tu_top.gif、第2和第7个单元格高度为15，填充银白色的背景...
Chosen:新增max_drop_width选项，用于启用根据下拉菜单条目文字长度自动调整下拉菜单宽度的功能；新增highlight_selected选项，用于让下拉菜单上的选中项目永远有高亮效果，并且与鼠标悬停时的效果进行区分。数据...
实例023 加密可以这样简单（位运算） 34 实例024 用三元运算符判断奇数和偶数 35 实例025 更精确地使用浮点数 35 实例026 不用乘法运算符实现2×16 37 实例027 实现两个变量的互换（不借助 第3个变量） 37 2.3 条件...
在.NET 2.0中，让你的组件也可以绑定 .NET20 一种简单的窗口控件UI状态控制方法 翻译MSDN文章 —— 泛型FAQ：最佳实践 Visual C# 3.0 新特性概览 C# 2.0会给我们带来什么 泛型技巧系列：如何提供类型参数之间的转换 ...
9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向...
9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向...
实例219 可以左右拖动的图片 340 实例220 随意拖动图片 342 实例221 当鼠标经过图片时显示图片 344 实例222 改变图片获取焦点时的状态 345 实例223 抖动的图片 346 实例224 鼠标移动放大图片 347 8.3 图片与时间相关...
随着计算机网络的普及，网络应用日趋丰富，人们利用Internet足不出户就可以获取所需要的信息，实现购物、炒股、娱乐和在线学习等。Web网站是Internet的重要组成部分，对于公司和企业来说，可以利用网站来展示企业...
15.3 Ajax实例：能够自由拖动布局区域的网页 第4部分 综合案例篇 第16章 我的博客 16.1 分析构架 16.1.1 设计分析 16.1.2 排版构架 16.2 模块拆分 16.2.1 导航与Banner 16.2.2 左侧列表 ...
15.3 Ajax实例：能够自由拖动布局区域的网页 第4部分 综合案例篇 第16章 我的博客 16.1 分析构架 16.2 模块拆分 16.3 整体调整 第17章 小型工作室网站 17.1 分析构架 17.2 ...
-隐藏示例首页最外层RegionPanel的边框ShowBorder="false"。 +集成Extjs最新版本v3.1.1。 -增加一个新的Theme - Access。 -修正了Firefox下Zoom In/Out时页面消失的BUG。 -删除Panel的...
-隐藏示例首页最外层RegionPanel的边框ShowBorder="false"。 +集成Extjs最新版本v3.1.1。 -增加一个新的Theme - Access。 -修正了Firefox下Zoom In/Out时页面消失的BUG。 -删除Panel的...
例如窗口在被拖动时会有很多消息发送，而我们都可以不予理睬让系统自己去处理。 4、窗口句柄：说到消息就不能不说窗口句柄，系统通过窗口句柄来在整个系统中唯一标识一个窗口，发送一个消息时必须指定一个窗口句柄...