`

左右移动的js分割面板

IEXHTMLBlog 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档-SH!</title>
<style> 
/* 左右分割条样式 */ 
.lrSeparator { 
background-color:#549FE3; 
cursor:e-resize; 
font-size : 1px; 
} 
/* 上下分割条样式 */ 
.udSeparator { 
background-color:#549FE3; 
cursor:s-resize; 
font-size : 1px; 
} 
td { 
border:1px solid #549FE3; 
} 
</style> 
<script> 
/** 
* 类 名 称： Separator|SP 
* 功能说明： 分割条类 
* 版权信息： CopyRight 2005-2006 JoeCom 
* 参数说明： o1,o2 : 两个对象 
spTpe: 方向，是左右，还是上下 
w:宽度;wx:left的差值;wy:top的差值 
wh:左右拖动时，是宽度的差值，上下则是高度的差值 
wl:上下拉动时时的一个差值 
差值的存在是因为控件可能存在border,padding,top等一些情况， 
还有就是控件的position不是为absolute 
* 创 建 人： JoeCom | MSN:juwuyi@hotmail.com | blog:http://hi.baidu.com/joecom 
* 创建日期： 2006-07-27 
* 修改记录： 
* 备 注 ： IE下效果最好，FF下TD标签不支持onresize事件？ 
*/ 

//以下定义拖拉方向的常量 
SP_LEFTRIGHT = 1; //左右拖拉 
SP_UPDOWN = 2; //上下拖拉 

function Separator(o1,o2,spType,w,wx,wy,wh,wl){ 
var me = this; 
this.o1 = (typeof o1=="string")?document.getElementById(o1):o1; 
this.o2 = (typeof o2=="string")?document.getElementById(o2):o2; 
this.w = w||3; //Width or Height 
this.wx = wx||0; //parentOffsetLeft 
this.wy = wy||0; //parentOffsetTop 
this.wh = wh||0; //parentOffsetHeight 
this.wl = wl||0; //parentOffsetWidth 
//this.wr = wr||0; //parentOffsetRight 
this.autoresize = true; 
this.spType = (spType==SP_UPDOWN)?SP_UPDOWN:SP_LEFTRIGHT; 
this.allWidth = this.o1.clientWidth + this.o2.clientWidth + this.w ; 
this.allHeight = this.o1.clientHeight + this.o2.clientHeight + this.w ; 
this.isIE = false; 

this.addEvent = function(el, evname, func) { 
if (el.attachEvent) { // IE 
el.attachEvent("on" + evname, func); 
this.isIE = true; 
} else if (el.addEventListener) { // Gecko / W3C 
el.addEventListener(evname, func, true); 
} else { 
el["on" + evname] = func; 
} 
}; 

this.sp = document.createElement("div"); 
document.body.appendChild(this.sp); 

this.init = function(){ 
if (this.spType==SP_LEFTRIGHT) 
{ 
with (this.sp){ 
style.position = "absolute"; 
style.left = this.o1.offsetLeft + this.o1.clientWidth + this.wx + "px"; 
style.top = this.o1.offsetTop + this.wy + "px" ; 
style.width = this.w; 
style.height = this.o1.clientHeight + this.wh + "px"; 
className = "lrSeparator"; 
style.zIndex = "200"; 
} 
}else 
{ 
with (this.sp){ 
style.position = "absolute"; 
style.left = this.o1.offsetLeft + this.wx + "px"; 
style.top = this.o1.offsetTop + this.o1.clientHeight + this.wy + "px" ; 
style.width = this.o1.clientWidth + this.wh + "px"; 
style.height = this.w; 
className = "udSeparator"; 
style.zIndex = "200"; 
} 
} 
} 

this.init(); 
this.dd = new ObjectDragDrop(this.sp); 
this.dd.moveStyle = (this.spType==SP_LEFTRIGHT)?DD_HMOVE:DD_VMOVE; 

this.resize = function(){ 
this.init(); 
} 

this.addEvent(window,"resize",function(){me.resize();}); 
this.addEvent(this.o1,"resize",function(){me.resize();}); 

this.dd.isMoved = function(newPosX,newPosY){ 
if (me.spType==SP_LEFTRIGHT) 
{ 
var mw1 = me.o1.getAttribute("minWidth"); 
var mw2 = me.o2.getAttribute("minWidth"); 
if (mw1==null){mw1 = 0;} 
if (mw2==null){mw2 = 0;} 
return {x:((newPosX - me.o1.offsetLeft)>=mw1&&(newPosX - me.o1.offsetLeft)<=(me.allWidth - mw2)),y:false}; 
}else 
{ 
var mh1 = me.o1.getAttribute("minHeight"); 
var mh2 = me.o2.getAttribute("minHeight"); 
if (mh1==null){mh1 = 0;} 
if (mh2==null){mh2 = 0;} 
return {x:false,y:((newPosY - me.o1.offsetTop - me.wy)>=mh1&&(newPosY - me.o1.offsetTop - me.wy)<=( me.allHeight - mh2))}; 
} 
} 

this.dd.onDrop = function(){ 
if (me.spType==SP_LEFTRIGHT) 
{ 
me.o1.style.width = me.sp.offsetLeft - me.o1.offsetLeft - me.wx - me.wl; 
if (!me.autoresize){ 
me.o2.style.width = me.allWidth - me.o1.clientWidth - me.w; 
if (me.o2.tagName!="TD") 
{ 
me.o2.style.left = me.sp.offsetLeft; 
} 
} 
}else 
{ 
me.o1.style.height = me.sp.offsetTop - me.o1.offsetTop - me.wy; 
if (!me.autoresize){ 
me.o2.style.height = me.allHeight - me.o1.clientHeight ; 
if (me.o2.tagName!="TR") 
{ 
me.o2.style.top = me.sp.offsetTop; 
} 
} 
} 
if (!me.isIE){ 
me.init(); 
} 
} 
} 

/** 
* 类 名 称： DragDrop|DD 
* 功能说明： 可拖动类 
* 版权信息： CopyRight 2005-2006 JoeCom 
* 创 建 人： JoeCom | MSN:juwuyi@hotmail.com | blog:http://hi.baidu.com/joecom 
* 创建日期： 2006-07-19 
* 修改记录： 1. 2006-07-21 加上scrollTop 和 scrollLeft的相对移动 
ł. 2006-07-25 加入moveStyle属性，增加水平移动和垂直移动的功能 
Ń. 2006-07-25 加入isMoved函数，增加范围移动功能 
*/ 

//以下定义移动方向的常量 
DD_FREEMOVE = 0; //自由移动，没有限制 
DD_HMOVE = 1; //水平移动，也就是左右移动 
DD_VMOVE = 2; //垂直移动，也就是上下移动 

function ObjectDragDrop(obj){ 
var me = this; 
this.moveStyle = DD_FREEMOVE ; 
this.foo = (typeof obj=="string")?document.getElementById(obj):obj; 
this.onDrop = function(){}; 
this.onDrag = function(){}; 
this.isMoved = function(newPosX,newPosY){return {x:true,y:true}};//offsetX:x的移动距离;offsetY:y的移动距离 

this.foo.onmousedown = function(e){ 
var foo = me.foo; 
e = e||event; 
if( e.layerX ){ foo.oOffset = {x:e.layerX, y:e.layerY }; } 
else { foo.oOffset = {x:e.offsetX, y:e.offsetY }; } 
document.onmousemove = me.drag; 
document.onmouseup = me.drop; 
document.onselectstart = function(){ return false; }; 
} 

this.drag = function(e){ 
var foo = me.foo; 
e=e||event; 
var mv = me.isMoved(e.clientX - foo.oOffset.x + document.body.scrollLeft, 
e.clientY - foo.oOffset.y + document.body.scrollTop); 
if (mv.x&&me.moveStyle!=DD_VMOVE) 
{ 
foo.style.left = e.clientX - foo.oOffset.x + document.body.scrollLeft + "px"; 
} 
if (mv.y&&me.moveStyle!=DD_HMOVE) 
{ 
foo.style.top = e.clientY - foo.oOffset.y + document.body.scrollTop + "px"; 
} 
me.onDrag(); 
} 

this.drop = function(e){ 
e=e||event; 
document.onmousemove = document.onmouseup = document.onselectstart = null; 
me.onDrop(); 
} 
} 


</script> 
<script> 
window.onload=function(){ 
 
//div左右拉动 
var divsp = new Separator(divl,divr,SP_LEFTRIGHT,2); 
divsp.autoresize = false; 

} 
</script> 
</head>

<body>
<div id=divl minWidth="30" style="position:absolute;top:350px;width:100px;left:0px;height:100px;background-color:#CCCCCC">div1</div> 
<div id=divr minWidth="30" style="position:absolute;top:350px;width:100px;left:102px;height:100px;background-color:#FF0000">div2</div> 

</body>
</html>
分享到：
| 页面导入pdf
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript网页特效范例宝典源码

    实例197 左右移动单元格的信息 304 实例198 通过键盘使单元格焦点任意移动 306 7.3 对表格的行、列进行修改 311 实例199 动态制作表格 311 实例200 动态生成行或列 313 实例201 删除表中的行 314 7.4 单元格的相关...

    Ext Js权威指南(.zip.001

    1.2.4　在javascript中使用json / 4 1.2.5　在.net中使用json / 8 1.2.6　在java中使用json / 12 1.2.7　更多有关json的信息 / 15 1.3　ext js 4概述 / 15 1.4　ext js的开发工具的获取、安装与配置介绍 / 18 1.4.1...

    qillerr.github.io

    也许将[removed]依赖关系移动到具有可插入内容的程序包依赖关系顶层面板中（例如在所见即所得的编辑器中） 为了在双换行符上高效分割MeX代码（例如使用hr），它看起来不错，并提高了速度使右面板跟随左面板，反之...

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    -优化AJAX的内部实现，每个页面保存的ViewState现在减少1/3左右（重要更新）。 -优化Tree节点的NodeId自动生成，减少ViewState占用。 +2009-08-09 v2.0 beta5 +ExtAspNet和Asp.net的提交按钮兼容问题...

    ExtAspNet_v2.3.2_dll

    -WindowPosition默认居中，而不是黄金分割位置。 +Button, Window等控件弹出位置属性的变化。 -Window的Target属性由字符串类型变为枚举类型，注意更新以前的代码：Target="_self" -&gt; Target="Self", Target="_...

    JAVA上百实例源码以及开源项目

    此时此景，笔者只专注Android、Iphone等移动平台开发，看着这些源码心中有万分感慨，写此文章纪念那时那景！ Java 源码包 Applet钢琴模拟程序java源码 2个目标文件，提供基本的音乐编辑功能。编辑音乐软件的朋友，这...

    JAVA上百实例源码以及开源项目源代码

    JavaScript万年历 显示出当前时间及年份，还可以选择年份及月份和日期 Java编写的HTML浏览器 一个目标文件 摘要:Java源码,网络相关,浏览器 　Java编写的HTML浏览器源代码，一个很简单甚至不算是浏览器的HTML浏览器...

    java源码包---java 源码 大量 实例

    JavaScript万年历 显示出当前时间及年份，还可以选择年份及月份和日期 Java编写的HTML浏览器 一个目标文件 摘要:Java源码,网络相关,浏览器 　Java编写的HTML浏览器源代码，一个很简单甚至不算是浏览器的HTML浏览器...

    java源码包2

    JavaScript万年历 显示出当前时间及年份，还可以选择年份及月份和日期 Java编写的HTML浏览器 一个目标文件 摘要:Java源码,网络相关,浏览器 　Java编写的HTML浏览器源代码，一个很简单甚至不算是浏览器的HTML...

    java源码包3

    JavaScript万年历 显示出当前时间及年份，还可以选择年份及月份和日期 Java编写的HTML浏览器 一个目标文件 摘要:Java源码,网络相关,浏览器 　Java编写的HTML浏览器源代码，一个很简单甚至不算是浏览器的HTML...

    java源码包4

    JavaScript万年历 显示出当前时间及年份，还可以选择年份及月份和日期 Java编写的HTML浏览器 一个目标文件 摘要:Java源码,网络相关,浏览器 　Java编写的HTML浏览器源代码，一个很简单甚至不算是浏览器的HTML...

    成百上千个Java 源码DEMO 4(1-4是独立压缩包)

    Java从网络取得文件 1个目标文件 简单 Java从压缩包中提取文件 1个目标文件 简单 Java存储与读取对象 1个目标文件 如题 Java调色板面板源代码 1个目标文件 摘要:Java源码,窗体界面,调色板 使用Java语言编写的一款...

    成百上千个Java 源码DEMO 3(1-4是独立压缩包)

    Java从网络取得文件 1个目标文件 简单 Java从压缩包中提取文件 1个目标文件 简单 Java存储与读取对象 1个目标文件 如题 Java调色板面板源代码 1个目标文件 摘要:Java源码,窗体界面,调色板 使用Java语言编写的一款...

Magicbox
Global site tag (gtag.js) - Google Analytics