div js 分割

最新推荐文章于 2025-07-08 20:45:53 发布

beyondsanli

最新推荐文章于 2025-07-08 20:45:53 发布

阅读量848

点赞数

分类专栏： xml和html基础文章标签： IE Blog UP

xml和html基础专栏收录该内容

19 篇文章

订阅专栏

<html>
<head>
<title>Separator</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>
</head>
<body style="margin: 0px;" >

<table cellpadding="1" style="border:0px solid red;width:100%;" cellspacing="1" height="35" >
<tbody>
<tr >
<td id=lf minWidth="120" >宽度自动</td>
<td id=rt minWidth="120">鼠标移到左边</td>
</tr>
</tbody>
</table>
<br>
<table cellpadding="1" style="border:0px solid red;" cellspacing="3" height="50" >
<tbody>
<tr>
<td id=lfa style="width:150px;" minWidth="50">宽度自定义1</td>
<td id=cta style="width:150px;" minWidth="50">宽度自定义2</td>
<td id=rta style="width:250px;" minWidth="50">宽度自定义3</td>
<td id=rtb style="width:250px;" minWidth="50">宽度自定义4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>

<div style="position:absolute;top:150px;">
<table cellpadding="1" style="border:0px solid red;width:100%;" cellspacing="3" height="90%" >
<tbody>
<tr id=up minHeight="30" style="height:30px;">
<td id=left minWidth="50" >111</td>
<td id=center minWidth="50">222</td>
</tr>
<tr id=down minHeight="30" style="height:150px;">
<td COLSPAN=2 >down</td>
</tr>
</tbody>
</table>
</div>

<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>

<div id=divu minHeight="30" style="position:absolute;top:350px;width:100px;left:250px;height:50px;background-color:#CCCCCC">div3</div>
<div id=divd minHeight="30" style="position:absolute;top:402px;width:100px;left:250px;height:100px;background-color:#FF0000">div4</div>
<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(){
//左右拖动
//宽度为百分比，自动调整型
var test1 = new Separator(lf,rt,SP_LEFTRIGHT,1,1,0,1,1);
//宽度自定义型
var test2 = new Separator(lfa,cta,SP_LEFTRIGHT,3,2,56,2,2);
test2.autoresize = false;
var test3 = new Separator(cta,rta,SP_LEFTRIGHT,3,2,56,2,2);
test3.autoresize = false;
var test4 = new Separator(rta,rtb,SP_LEFTRIGHT,3,2,56,2,2);
test4.autoresize = false;
var sp = new Separator(left,center,SP_LEFTRIGHT,3,2,150,2,2);
//上下拖动
var sp1=new Separator(up,down,SP_UPDOWN,3,0,150,-6);
sp1.autoresize = false;
//div左右拉动
var divsp = new Separator(divl,divr,SP_LEFTRIGHT,2);
divsp.autoresize = false;
//div上下拉动
var divud=new Separator(divu,divd,SP_UPDOWN,2);
divud.autoresize = false;
}
</script>
</body>
</html>