请教1个关于2个DIV并排显示

sias_summer 2012-03-15 03:30:29

2个DIV 并排这个用浮动
分隔条来调整宽度
底条一起调整高度

扩展一下juery ui resize也行先谢谢了

最好用JQ的

...全文

344 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

sias_summer 2012-03-28

打赏
举报

[Quote=引用 7 楼的回复:]
引用 5 楼 sias_summer 的回复:

引用 4 楼 hch126163 的回复:
这种效果？

……

你的这个太强大了
能否弱化一下

1个DIV 包涵2个DIV 这2个左右并排通过中间同时调整2个DIV的宽度
比如往左左边变小右边相对变大
往右亦然

var sp = new SplitPanel($('left'),$('center'),'……
[/Quote]

非常感谢

hch126163 2012-03-17

打赏
举报

[Quote=引用 5 楼 sias_summer 的回复:]

引用 4 楼 hch126163 的回复:
这种效果？

……

你的这个太强大了
能否弱化一下

1个DIV 包涵2个DIV 这2个左右并排通过中间同时调整2个DIV的宽度
比如往左左边变小右边相对变大
往右亦然
[/Quote]
var sp = new SplitPanel($('left'),$('center'),'H',5,100,300);
var sp1 = new SplitPanel($('centerLeft'),$('right'),'H',5,300,100);
var sp2 = new SplitPanel($('top'),$('bottom'),'V');
是调用了3个这样的拖动效果。

只要一个水平的
下面只调用这句就OK：
var sp = new SplitPanel($('left'),$('center'),'H',5,100,300);

H 表示水平。left,center 要拖动的2个div

yue_luu 2012-03-16

打赏
举报

<!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>
<title>js SplitPanel</title>
</head>
<body>
<div style="width:500px;height:800px;margin:0px auto;">
<div id='top' style="width:500px;height:400px;margin:0px auto;">

<div id='left' style="background-color:blue;width:250px;height:100%;float:left;"></div>
<div id='right' style="background-color:green;width:250px;height:100%;float:left;"></div>

</div>
<div id='bottom' style="width:500px;height:400px; margin:0px auto;">
</div>
</div>
</body>
<script>
var $=function(id){
return document.getElementById(id);
};

function bindEvent(obj,evt,fun){
if(window.addEventListener){
obj.addEventListener(evt,function(e){fun(e);},false);
}else{
obj.attachEvent('on'+evt,fun);
}
}

function SplitPanel(panel1,panel2,t,splitWide, panel1MinSize,panel2MinSize)
{
if(panel1 && panel2)
{
this.Panel1=panel1;
this.Panel2=panel2;
this.T=t?t:'H'; // 类型 H （水平方向） V 垂直方向
this.SplitWide=splitWide?splitWide:5; // 分隔条粗
this.Panel1MinSize=panel1MinSize?panel1MinSize:0; // 最小宽度或者高度
this.Panel2MinSize=panel2MinSize?panel2MinSize:0;// 最小宽度或者高度
this.MouseDown=0;
this.P=0;
this.init();
}
};

SplitPanel.prototype.init=function()
{
var sp = this;
var size =sp.T=='H'?(sp.Panel1.offsetWidth+sp.Panel2.offsetWidth):(sp.Panel1.offsetHeight+sp.Panel2.offsetHeight);
var p=0;
var splitPanel = document.createElement('div');
splitPanel.style.cssText = "background-color:#ddd;cursor:crosshair;overflow:hidden;" + (sp.T=='H'?'width:'+sp.SplitWide+'px;height:100%;float:left;':'width:'+sp.Panel1.width+';height:'+sp.SplitWide+'px;');
sp.Panel2.parentNode.insertBefore(splitPanel,sp.Panel2);
sp.T=='H'?(sp.Panel2.style.width =sp.Panel2.offsetWidth-sp.SplitWide +'px'):(sp.Panel2.style.height =(sp.Panel2.offsetHeight-sp.SplitWide) +'px');

splitPanel.onmouseover=function(){this.style.backgroundColor='red';};
splitPanel.onmouseout=function(){this.style.backgroundColor='#ddd';};
splitPanel.onmousedown=function(e){sp.MouseDown=1; e=e||event; sp.P=sp.T=='H'?(e.x||e.pageX):(e.y||e.pageY); };
bindEvent(document.body,'mousemove',function(e)
{
if(sp.MouseDown)
{
e=e||event;
if(sp.T=='H')
{
p = e.x||e.pageX;
var w2= sp.Panel2.offsetWidth + (sp.P-p);
var w1= size-w2-sp.SplitWide;
if(w2<=sp.Panel2MinSize)
{
sp.Panel2.style.width = sp.Panel2MinSize +"px";
sp.Panel1.style.width = size-sp.Panel2MinSize -sp.SplitWide +"px";
return;
}
if(w1<=sp.Panel1MinSize)
{
sp.Panel2.style.width = size -sp.Panel1MinSize-sp.SplitWide +"px";
sp.Panel1.style.width =sp.Panel1MinSize +"px";
return;
}
sp.Panel2.style.width =w2 +"px";
sp.Panel1.style.width =w1 +"px";

}else
{
p=e.y||e.pageY;
var h2= sp.Panel2.offsetHeight + (sp.P-p);
var h1= size-h2-sp.SplitWide;
if(h2<=sp.Panel2MinSize)
{
sp.Panel2.style.height = sp.Panel2MinSize +"px";
sp.Panel1.style.height = size-sp.Panel2MinSize -sp.SplitWide +"px";
return;
}
if(h1<=sp.Panel1MinSize)
{
sp.Panel2.style.height = size -sp.Panel1MinSize-sp.SplitWide +"px";
sp.Panel1.style.height =sp.Panel1MinSize +"px";
return;
}
sp.Panel2.style.height =h2 +"px";
sp.Panel1.style.height =h1 +"px";
}
sp.P=p;
}
});
bindEvent(document.body,'mouseup',function(e){sp.MouseDown=0;});
};
var sp = new SplitPanel($('left'),$('right'),'H',5,0,0);
var sp2 = new SplitPanel($('top'),$('bottom'),'V',5,0,0);
</script>
</html>

sias_summer 2012-03-16

打赏
举报

[Quote=引用 4 楼 hch126163 的回复:]
这种效果？

……
[/Quote]
你的这个太强大了
能否弱化一下

1个DIV 包涵2个DIV 这2个左右并排通过中间同时调整2个DIV的宽度
比如往左左边变小右边相对变大
往右亦然

hch126163 2012-03-16

打赏
举报

这种效果？



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

    <title>js SplitPanel</title>

</head>

<body >

<div style="width:960px; height:700px; margin:0px auto;">

<div id="left"  style="background-color:#1ef; width:200px;height:100%; float:left">Left</div>

<div id="center" style="background-color:blue; width:760px;height:100%; float:left; overflow:hidden;" >

    <div id="centerLeft" style="background-color:blue; width:500px;height:100%; float:left;">

        <div id='top'  style="background-color:blue; width:100%;height:200px;">center top </div>

        <div id='bottom'  style="background-color:#fff; width:100%;height:500px;">center bottom </div>

     </div>

     <div id="right" style="background-color:yellow; width:250px;height:100%; float:left">right</div>

</div>



</div>

</body>

<script type="text/javascript">



var $=function(id){

    return document.getElementById(id);

};

function bindEvent(obj,evt,fun){

    if(window.addEventListener){

        obj.addEventListener(evt,function(e){fun(e);},false);

    }else{

        obj.attachEvent('on'+evt,fun);

    }

}



function SplitPanel(panel1,panel2,t,splitWide, panel1MinSize,panel2MinSize)

{

    if(panel1 && panel2)

    {

        this.Panel1=panel1;

        this.Panel2=panel2;

        this.T=t?t:'H'; // 类型 H （水平方向） V 垂直方向

        this.SplitWide=splitWide?splitWide:5; // 分隔条粗

        this.Panel1MinSize=panel1MinSize?panel1MinSize:100; // 最小宽度 或者 高度

        this.Panel2MinSize=panel2MinSize?panel2MinSize:100;// 最小宽度 或者 高度

        this.MouseDown=0;

        this.P=0; 

        this.init();

    }

};



SplitPanel.prototype.init=function()

{ 

    var sp = this;

    var size =sp.T=='H'?(sp.Panel1.offsetWidth+sp.Panel2.offsetWidth):(sp.Panel1.offsetHeight+sp.Panel2.offsetHeight);

    var p=0;

    var splitPanel = document.createElement('div');

    splitPanel.style.cssText =  "background-color:#ddd;cursor:crosshair;overflow:hidden;" + (sp.T=='H'?'width:'+sp.SplitWide+'px;height:100%;float:left;':'width:100%;height:'+sp.SplitWide+'px;');

    sp.Panel2.parentNode.insertBefore(splitPanel,sp.Panel2);

    sp.T=='H'?(sp.Panel2.style.width =sp.Panel2.offsetWidth-sp.SplitWide +'px'):(sp.Panel2.style.height =(sp.Panel2.offsetHeight-sp.SplitWide) +'px');

    

    splitPanel.onmouseover=function(){this.style.backgroundColor='red';};

    splitPanel.onmouseout=function(){this.style.backgroundColor='#ddd';};

    splitPanel.onmousedown=function(e){sp.MouseDown=1; e=e||event; sp.P=sp.T=='H'?(e.x||e.pageX):(e.y||e.pageY); };

    bindEvent(document.body,'mousemove',function(e)

    {  

         if(sp.MouseDown)

          { 

               e=e||event;

               if(sp.T=='H')

               {

                  p = e.x||e.pageX;

                  var w2= sp.Panel2.offsetWidth  + (sp.P-p);

                  var w1= size-w2-sp.SplitWide;

                  if(w2<=sp.Panel2MinSize)

                  {

                    sp.Panel2.style.width = sp.Panel2MinSize +"px";

                    sp.Panel1.style.width =  size-sp.Panel2MinSize -sp.SplitWide +"px";

                    return;

                  }

                  if(w1<=sp.Panel1MinSize)

                  {

                    sp.Panel2.style.width = size -sp.Panel1MinSize-sp.SplitWide +"px";

                    sp.Panel1.style.width =sp.Panel1MinSize   +"px";

                    return;

                  }

                   sp.Panel2.style.width =w2 +"px";

                   sp.Panel1.style.width =w1 +"px";

                

               }else

               {

                  p=e.y||e.pageY;

                  var h2= sp.Panel2.offsetHeight  + (sp.P-p);

                  var h1= size-h2-sp.SplitWide;

                  if(h2<=sp.Panel2MinSize)

                  {

                    sp.Panel2.style.height = sp.Panel2MinSize +"px";

                    sp.Panel1.style.height =  size-sp.Panel2MinSize -sp.SplitWide +"px";

                    return;

                  }

                  if(h1<=sp.Panel1MinSize)

                  {

                    sp.Panel2.style.height = size -sp.Panel1MinSize-sp.SplitWide +"px";

                    sp.Panel1.style.height =sp.Panel1MinSize   +"px";

                    return;

                  }

                   sp.Panel2.style.height =h2 +"px";

                   sp.Panel1.style.height =h1 +"px";

               }

               sp.P=p;

           }

        });

       bindEvent(document.body,'mouseup',function(e){sp.MouseDown=0;});

};

var sp = new SplitPanel($('left'),$('center'),'H',5,100,300);

var sp1 = new SplitPanel($('centerLeft'),$('right'),'H',5,300,100);

var sp2 = new SplitPanel($('top'),$('bottom'),'V');

</script>

</html>