需求:可以随时拖动中间框架(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实现之....后面再发代码
分享到：
相关推荐
"可以左右拖动的iframe框架"是一种创新的实现方式，它允许用户通过鼠标在水平方向上移动iframe，从而提供了更灵活的网页布局和用户体验。下面将详细讲解这个知识点。 **Iframe（Inline Frame）** 是HTML中的一个...
总的来说，HTML中实现可拖动改变框架大小的技术是通过结合HTML的框架结构和JavaScript事件处理来实现的，它可以为用户提供更灵活的界面控制，提高网页的交互性和可用性。通过学习和借鉴"NETGEAR Router.htm"这个范例...
"table实现列宽的拖动效果"是一个常见的需求，特别是在数据展示或者数据分析的应用中，用户可能需要自定义表格列的宽度以更好地查看和理解数据。这篇博客文章 "https://jifeng3321.iteye.com/blog/2403674" 提到的...
这样可以自定义窗口的外观和行为，但同时也需要自己实现窗口的拖动和缩放功能。 3. **窗口拖动**：为了让无边框窗体能够移动，我们需要捕获鼠标按下和移动事件，计算窗口移动的距离，并更新窗口的位置。这通常通过...
"table 表格宽度拖动demo"就是一个专门针对这一需求的示例，它展示了如何实现用户可以通过拖动来调整表格列宽的功能。 首先，我们需要理解HTML中的`<table>`元素，它是创建表格的基础。`<table>`包含`<thead>`...
然后，为了使`QGraphicsItem`可以被拉伸，我们需要实现拖动调整大小的行为。这通常涉及到重写`QGraphicsItem::mouseMoveEvent()`和`QGraphicsItem::mousePressEvent()`等鼠标事件处理函数。例如： ```cpp void ...
然而，`frame`框架有一个特性，即用户可以通过拖动条来调整框架的大小。在某些情况下，我们可能希望固定框架的大小，不让用户进行这种操作。例如，为了保持页面布局的一致性和专业性，或者因为内容本身不适合调整...
用户可以通过手动拖动列边框来改变宽度，或者采用自动调整列宽的机制，让表格更适应屏幕尺寸或数据内容。 最后，**行交换**功能则允许用户交换表格内的行，这对于数据对比或整理非常有用。例如，在一个待办事项列表...
1. 选中框架集后，可以通过属性面板设置边框、边框宽度、边框颜色以及行的尺寸。 2. 单独选择框架，可以设置框架名称、源文件、边框属性、滚动条设置等。 3. 链接设置：创建链接时，需注意设置“目标”属性，以确定...
完成以上步骤后，你就可以在QGraphicsScene中添加DraggableProxyWidget，并将自定义的QWidget实例传入构造函数，实现一个可拖拽且有焦点边框效果的自定义控件了。 为了进一步完善这个功能，你可能还需要考虑以下几...
- 要删除框架，只需将光标放在要删除的框架边框上，拖动到父边框或窗口边缘即可。 4. **设置框架集属性**： - 可以在属性面板中设定框架集的边框、边框宽度和边框颜色。 - 示例操作包括将最外层框架集的边框设为...
5. 使用【查看】 | 【可视化助理】 | 【框架边框】命令显示框架边框，便于调整。 6. 对于多层嵌套框架，可以重复插入框架，并自动命名，以适应不同分辨率的浏览器窗口。 **框架的编辑和制作**： 1. 为了使框架看...
通过拖动边框可以改变框架大小，设置边框宽度可以控制边框的可见性。此外，还可以通过设置边框颜色来使边框更显眼或者与网页背景相协调。 总的来说，Dreamweaver 8 提供了完善的框架管理工具，使得网页设计师能够...
- **删除框架**：拖动框架边框至页面外部或父框架边框上删除。 - **保存框架**：将光标定位到需要保存的框架，选择“文件/保存框架”，指定保存位置和文件名。 - **保存全部**：使用“文件/全部保存”确保所有...
综上所述，实现一个具备拖拽、最大化、最小化和边缘拉伸的无边框窗口，需要结合QML的声明式编程和C++的面向对象编程，以及对Qt框架的深入理解。通过精心设计的组件和事件处理，可以创建出具有丰富交互功能的用户界面...
同时，多余的框架可以通过拖动边框至父框架边框或移出页面来删除。 任务二：保存框架 每个框架包含一个独立的文档，因此保存框架网页时，必须保存整个框架集。这通常通过【文件】/【保存全部】命令完成，...
5. **边框宽度属性 (border)**：`border`属性定义框架区域边框的宽度，可以自定义边框的粗细，如`border="2px"`。 6. **边框颜色属性 (bordercolor)**：`bordercolor`属性用于设置框架边框的颜色，如`bordercolor=...
框架技术的主要优点在于它可以实现局部更新，即当用户点击某个框架内的链接时，只会改变相应框架的内容，而其他框架保持不变，无需整个页面刷新。此外，框架还可以用来固定网页的某些部分，如导航栏，使其在浏览过程...
通过这样的实现，我们可以创建一个交互性强、用户友好的界面，用户可以直接通过拖动来调整Rectangle的大小。这个功能在许多应用程序中都非常实用，尤其是那些需要自定义布局或控件大小的场景。 在实际项目中，你...