不用FRAME实现的窗口分割及拖曳效果

转载 2006年06月13日 14:31:00

源代码如下:
==========
<html>
<head>
<script language="javascript">
<!--
var bInDrag = false;
// 分割条高度
var iSplitHeight = 20;
// 浏览器高度
var iBrowserHeight = 400;

/**
* 初始化拖曳
*
* @access  public
* @param  object  [obj]
* @return  void
*/
function initDrag(obj) {
 bInDrag = true;
 obj.setCapture();
}

/**
* 释放拖曳
*
* @access  public
* @param  object  [obj]
* @return  void
*/
function freeDrag(obj) {
 bInDrag = false;
 obj.releaseCapture();
}

/**
* 开始拖曳
*
* @access  public
* @return  void
*/
function doDrag() {
 var iMoveHeight = 0;
 if (bInDrag) {
  // 拖拉的高度
  iMoveHeight = event.clientY - document.getElementById('splitLine').style.pixelTop;
  document.getElementById('head').style.pixelHeight += iMoveHeight;
  document.getElementById('splitLine').style.pixelTop = document.getElementById('head').style.pixelHeight + (iSplitHeight/2);
  document.getElementById('foot').style.pixelTop += iMoveHeight;
  document.getElementById('foot').style.pixelHeight = iBrowserHeight - document.getElementById('foot').style.pixelTop;
 }
}
-->
</script>
<style type="text/css">
<!--
body {
 margin-left: 0px;
 margin-top: 0px;
}
-->
</style>
</head>
<body>
<div id="head" style="overflow:auto; height:100">
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr valign="top">
 <td>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
 </td>
 <td>&nbsp;</td>
</tr>
</table>
</div>

<div id="splitLine" height="20">
<hr onmousedown="initDrag(this);" onmouseup="freeDrag(this);" onmousemove="doDrag();" style="cursor:row-resize" color="#c6d7ff" noShade size="5">
</div>

<div id="foot" style="overflow:auto; height:300">
<table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0">
<tr valign="top">
 <td>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
 </td>
    <td>gggggggggggggggggg</td>
</tr>
</table>
</div>
</body>
</html>

用FRAMESET设计网页分割窗口式布局

  用FRAMESET设计网页分割窗口式布局 梁伟敏  随着INTERNET网络应用的日益普及,一般的使用者...
  • shixinbao
  • shixinbao
  • 2007年05月15日 11:20
  • 2169

利用JQ实现简单的拖曳效果

提出问题 如何实现将一个盒子里的元素拉到另外一个盒子里? 实现思路 此操作包含的事件有 mousedown mousemove mouseup ,对这三个事件进行监听并进行相应的操作。 ...
  • weixin_38788347
  • weixin_38788347
  • 2017年10月18日 15:37
  • 216

JQ拖曳效果

图片拖拽效果,网上找的某位大神力作:$(function(){ /*--------------拖曳效果---------------- *原理:标记拖...
  • u010096371
  • u010096371
  • 2016年06月16日 08:30
  • 282

frame分割条效果

 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" >http://www....
  • xiandawang
  • xiandawang
  • 2007年06月12日 09:24
  • 699

不用ViewPager和Fragment实现滑动页面的效果

这是一篇被逼出来的文章。 一入SDK深似海,从此jar包是路人,没错,你以为我愿意不用ViewPager和Fragment啊,因为SDK为了减少包体大小不能用v4的包啊!坑爹的v4包居然有1M多,你...
  • amurocrash
  • amurocrash
  • 2016年11月04日 11:10
  • 1068

页面用frame分割成多块后,如何整页刷新

一般后台管理用下面代码进行分割:                               当点击左边菜单后,通过target指定刷新的块eg: 修改密码   但怎样在一个...
  • xiaobc1234
  • xiaobc1234
  • 2013年04月05日 19:58
  • 522

用Win32实现带分割条(Splitter)的窗口

在MFC中借助向导的帮助很容易就能创建一个带有分隔条(Splitter)的窗口,但是在Win32中一切都没有那么容易,在这篇文章里我带领大家用Win32实现一个带这种Splitter的窗口。 一个S...
  • dong_mingyi
  • dong_mingyi
  • 2015年02月06日 18:23
  • 1325

MFC实现窗口的任意分割——分割窗口

一、关于CSplitterWnd类 我们在使用CuteFtp或者NetAnt等工具的时候,一般都会被其复杂的界面所吸引,在这些界面中窗口被分割为若干的区域,真正做到了窗口的任意分 割。 那么我...
  • shaderdx
  • shaderdx
  • 2014年04月14日 21:01
  • 1394

vim 窗口分割使用

同时显示两个不同的文件, 或者同时查看同一个文件的两个不同位置, 或者是同步显示两个文件的不同之处. 所有这些都可以通过分隔窗口的功能来实现.1. 分隔一个窗口打开一个新窗口最简单的办法就是使用命令:...
  • hjs1122
  • hjs1122
  • 2011年03月03日 14:29
  • 7998

Qt学习之QSplitter分割窗口

在Qt开发中,QSplitter是比较常用到的,也就是分割窗口。 并且窗口分割处也就是QSplitter的handle是可以随意拖动的。 这样,每个窗口的大小就可以按照自己的需要进行调整。 QSpli...
  • u011417605
  • u011417605
  • 2016年03月17日 16:50
  • 1417
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:不用FRAME实现的窗口分割及拖曳效果
举报原因:
原因补充:

(最多只允许输入30个字)