像JSFiddle这样的面板

Question

我有这个,

我想要,

小提琴

当Seconds标签上升时,我想减少第一部分的高度,最小前2显示,与第二部分相同.

$('#second').resizable({
    handles: {
        'n': '#ngrip',
    },
    resize: function () {
        var b = $('#second').height();
        var a = $('#first').css("height", b + "px");
        console.log(a.height());
    }
});

编辑

必须 - 我希望它像JSFiddle"HTML"和"JavaScript"面板一样工作,它们都可以调整大小,但也有最小高度,你可以在这里看到

http://jsfiddle.net/

Answer 1

请查看这个演示JS Fiddle。这对你很有用。

超文本标记语言

<div id="main">
  <div id="first">
    <div id="first-head">
       <h3>First</h3>
    </div>
    <div id="first-body">
      <p>First-1</p>
        <p>First-2</p>
        <p>First-3</p>
        <p>First-4</p>
        <p>First-5</p>
        <p>First-6</p>
    </div>
  </div>
  <div id='second'>
    <div id="second-head">
       <h3>Second</h3>
       <div class="ui-resizable-handle ui-resizable-s" id="ngrip"></div>
    </div>
    <div id="second-body">
      <p>Second-1</p>
      <p>Second-2</p>
      <p>Second-3</p>
      <p>Second-4</p>
      <p>Second-5</p>
      <p>Second-6</p>
      <p>Second-7</p>
      <p>Second-8</p>
      <p>Second-9</p>
    </div>
  </div>
</div>

CSS

#main {
    width:100%;
    height:400px;
}
#first, #second {
    min-height:100px;
    height:170px;
    max-height:400px;
}
#second-body{
   z-index:9999;
}
#first-head, #second-head {
    background-color:red;
}
#first-body, #second-body {
    overflow-y:auto;
    height:100%;
     margin-bottom:10px;
}
#ngrip {
        position: absolute;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
    top:0px;
    left: 50%;
}

jQuery

$('#second').resizable({
    handles: {
        'n': '#ngrip',
    },
    resize: function () {
        var b = $('#second').height();
        var height=$('#main').height();
        var a = $('#first').css("height", b + "px");
        var first=$('#first').height();
        $('#second').css("height",height- first+ "px");
    }
});