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

实现可以拖动框架边框的宽度

阅读更多
需求:可以随时拖动中间框架(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实现之....后面再发代码
0
0
分享到:
评论

相关推荐

    可以左右拖动的iframe框架

    "可以左右拖动的iframe框架"是一种创新的实现方式,它允许用户通过鼠标在水平方向上移动iframe,从而提供了更灵活的网页布局和用户体验。下面将详细讲解这个知识点。 **Iframe(Inline Frame)** 是HTML中的一个...

    HTML中可拖动改变框架大小的页面范例

    总的来说,HTML中实现可拖动改变框架大小的技术是通过结合HTML的框架结构和JavaScript事件处理来实现的,它可以为用户提供更灵活的界面控制,提高网页的交互性和可用性。通过学习和借鉴"NETGEAR Router.htm"这个范例...

    table实现列宽的拖动效果

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

    QT跨平台无边框支持拖拽带菜单窗体框架.rar

    这样可以自定义窗口的外观和行为,但同时也需要自己实现窗口的拖动和缩放功能。 3. **窗口拖动**:为了让无边框窗体能够移动,我们需要捕获鼠标按下和移动事件,计算窗口移动的距离,并更新窗口的位置。这通常通过...

    table 表格宽度拖动demo

    "table 表格宽度拖动demo"就是一个专门针对这一需求的示例,它展示了如何实现用户可以通过拖动来调整表格列宽的功能。 首先,我们需要理解HTML中的`&lt;table&gt;`元素,它是创建表格的基础。`&lt;table&gt;`包含`&lt;thead&gt;`...

    QGraphicsItem选中后,出现边框,可以拉伸

    然后,为了使`QGraphicsItem`可以被拉伸,我们需要实现拖动调整大小的行为。这通常涉及到重写`QGraphicsItem::mouseMoveEvent()`和`QGraphicsItem::mousePressEvent()`等鼠标事件处理函数。例如: ```cpp void ...

    禁止用拖动条的frame框架

    然而,`frame`框架有一个特性,即用户可以通过拖动条来调整框架的大小。在某些情况下,我们可能希望固定框架的大小,不让用户进行这种操作。例如,为了保持页面布局的一致性和专业性,或者因为内容本身不适合调整...

    table列排序、列拖动、列宽度变化、行交换

    用户可以通过手动拖动列边框来改变宽度,或者采用自动调整列宽的机制,让表格更适应屏幕尺寸或数据内容。 最后,**行交换**功能则允许用户交换表格内的行,这对于数据对比或整理非常有用。例如,在一个待办事项列表...

    专题资料(2021-2022年)DreamweaverCS5自学教程第六课框架结构.doc

    1. 选中框架集后,可以通过属性面板设置边框、边框宽度、边框颜色以及行的尺寸。 2. 单独选择框架,可以设置框架名称、源文件、边框属性、滚动条设置等。 3. 链接设置:创建链接时,需注意设置“目标”属性,以确定...

    自定义QGraphicsProxyWidget,嵌入自定义QWidget(可以拖拽,显示焦点边框)

    完成以上步骤后,你就可以在QGraphicsScene中添加DraggableProxyWidget,并将自定义的QWidget实例传入构造函数,实现一个可拖拽且有焦点边框效果的自定义控件了。 为了进一步完善这个功能,你可能还需要考虑以下几...

    Qt Qml 可拖动设置Rectangle大小Demo

    通过这样的实现,我们可以创建一个交互性强、用户友好的界面,用户可以直接通过拖动来调整Rectangle的大小。这个功能在许多应用程序中都非常实用,尤其是那些需要自定义布局或控件大小的场景。 在实际项目中,你...

    使用框架PPT学习教案.pptx

    - 要删除框架,只需将光标放在要删除的框架边框上,拖动到父边框或窗口边缘即可。 4. **设置框架集属性**: - 可以在属性面板中设定框架集的边框、边框宽度和边框颜色。 - 示例操作包括将最外层框架集的边框设为...

    框架页和框架集PPT学习教案.pptx

    5. 使用【查看】 | 【可视化助理】 | 【框架边框】命令显示框架边框,便于调整。 6. 对于多层嵌套框架,可以重复插入框架,并自动命名,以适应不同分辨率的浏览器窗口。 **框架的编辑和制作**: 1. 为了使框架看...

    Dreamweaver8中文版网页制作基础.docx

    通过拖动边框可以改变框架大小,设置边框宽度可以控制边框的可见性。此外,还可以通过设置边框颜色来使边框更显眼或者与网页背景相协调。 总的来说,Dreamweaver 8 提供了完善的框架管理工具,使得网页设计师能够...

    使用框架灵活布局网页PPT学习教案.pptx

    - **删除框架**:拖动框架边框至页面外部或父框架边框上删除。 - **保存框架**:将光标定位到需要保存的框架,选择“文件/保存框架”,指定保存位置和文件名。 - **保存全部**:使用“文件/全部保存”确保所有...

    QtQuick实现无边框窗口的拉伸,拖拽

    综上所述,实现一个具备拖拽、最大化、最小化和边缘拉伸的无边框窗口,需要结合QML的声明式编程和C++的面向对象编程,以及对Qt框架的深入理解。通过精心设计的组件和事件处理,可以创建出具有丰富交互功能的用户界面...

    网页制作:项目07使用框架布局论坛网页--ppt.pptx

    同时,多余的框架可以通过拖动边框至父框架边框或移出页面来删除。 任务二:保存框架 每个框架包含一个独立的文档,因此保存框架网页时,必须保存整个框架集。这通常通过【文件】/【保存全部】命令完成,...

    框架元素PPT学习教案.pptx

    5. **边框宽度属性 (border)**:`border`属性定义框架区域边框的宽度,可以自定义边框的粗细,如`border="2px"`。 6. **边框颜色属性 (bordercolor)**:`bordercolor`属性用于设置框架边框的颜色,如`bordercolor=...

    网页制作CH—框架技术PPT学习教案.pptx

    框架技术的主要优点在于它可以实现局部更新,即当用户点击某个框架内的链接时,只会改变相应框架的内容,而其他框架保持不变,无需整个页面刷新。此外,框架还可以用来固定网页的某些部分,如导航栏,使其在浏览过程...

Global site tag (gtag.js) - Google Analytics