[英]Panels like JSFiddle
我有这个,
我想要,
当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”面板一样工作,它们都可以调整大小,但也有最小高度,你可以在这里看到
$('#second').resizable({ handles: { 'n': '#ngrip', }, maxHeight: 300, minHeight: 150, resize: function (event, ui) { var h = ui.size.height; $('#first').height(400 -h); } });
#main { width:100%; height:400px; overflow: hidden; position: relative; } #first, #second { height:200px; width: 100%; overflow-y: scroll; } #second { z-index:999; position: absolute; } #first-head, #second-head { background-color:red; } #ngrip { position: relative; width: 10px; height: 10px; background-color: #ffffff; border: 1px solid #000000; bottom: -5px; left: 50%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script> <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-n" 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> </div> </div> </div>
使用JqueryUI的minHeight
和minHeight
选项结合CSS display: absolute;
为#second
首先,在HTML中更改调整大小方向(从ui-resizable-s
到ui-resizable-n
)
<div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
其次,在Javascript中使用JqueryUI选项:
$('#second').resizable({
handles: {
'n': '#ngrip',
},
maxHeight: 300, // Example max height of `#second` is 300px
minHeight: 100, // Example min height of `#second` is 100px
resize: function (event, ui) {
// Get height of `#second`
var h = ui.size.height;
// Set height of `#first`
$('#first').height(400 - h); //400 is height of container `#main`
}
});
最后,改变一些CSS
#main {
width:100%;
height:400px;
overflow: hidden;
position: relative;
}
#first, #second {
height:200px;
width: 100%;
overflow-y: scroll;
}
#second {
z-index:999;
position: absolute;
}
#first-head, #second-head {
background-color:red;
}
#ngrip {
position: relative;
width: 10px;
height: 10px;
background-color: #ffffff;
border: 1px solid #000000;
bottom: -5px;
left: 50%;
}
希望它对你有所帮助。
试试下面这行
<div id="first" style="min-height:35%;overflow:hidden">
代替
<div id="first">
请查看这个演示JS Fiddle 。 它对你有用。
HTML
<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");
}
});
您的第二条评论接近所有要求。
“关键洞察力”是,为了约束一个元素的最小高度,足以约束另一个元素的最大高度。 如果顶部元素不能高于250,则底部元素不能小于50(以保持容器高度恒定为300)。
// initialise dimensions
var containerHeight = $("#container").height();
var minHeight = containerHeight * 0.30; // min 30% height
var maxHeight = containerHeight - minHeight;
// call rebalance once on page load to make sure the panels start off right
rebalance()
$("#top").resizable({
handles: 's',
maxHeight: maxHeight,
minHeight: minHeight,
resize: rebalance // whenever we resize, rebalance the panels
});
function rebalance() {
var currentTopHeight = $("#top").height();
$("#bottom").height(containerHeight - currentTopHeight);
}
我也冒昧地清理你的代码了。 我认为你在标题后填充空格有CSS问题,一旦修复,调整大小相当简单。 我用注释来注释CSS,以解释发生了什么。 您可能还对此处的讨论感兴趣: 使div填充剩余屏幕空间的高度
/* both containers are full-width, and absolutely positioned in their parent */
#first, #second {
position:absolute;
width:100%;
}
/* pin the first to the top, and the second to the bottom */
#first {
top:0;
}
#second {
top:50%;
bottom:0;
}
/* The body needs to leave space at the top for the header (25px) but none at the bottom */
#first-body, #second-body {
overflow-y:auto;
width:100%;
position:absolute;
top:25px;
bottom:0;
}
我遇到了一个非常有前途的插件: http : //nathancahill.github.io/Split.js/
Split.js是一个轻量级,不受影响的实用程序,用于创建可调整的拆分视图或窗格。
不需要依赖项或标记,只需要两个或多个具有公共父项的元素。
视图可以水平或垂直分割,每两个元素之间插入可拖动的水槽。
甚至有一个JS小提琴风格的演示 。
示例JS(来自演示):
Split(['#a', '#b'], {
gutterSize: 8,
cursor: 'col-resize'
})
Split(['#c', '#d'], {
direction: 'vertical',
sizes: [25, 75],
gutterSize: 8,
cursor: 'row-resize'
})
Split(['#e', '#f'], {
direction: 'vertical',
sizes: [25, 75],
gutterSize: 8,
cursor: 'row-resize'
})
示例html用法(来自演示):
<div id="a" class="split split-horizontal">
<div id="c" class="split content"></div>
<div id="d" class="split content"></div>
</div>
<div id="b" class="split split-horizontal">
<div id="e" class="split content"></div>
<div id="f" class="split content"></div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.