jQuery UI 和拆分器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15309163/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI and Splitter
提问by testndtv
Using jQuery UI, how can I use a Splitter kind of feature like the one at http://methvin.com/splitter/3csplitter.html?
使用 jQuery UI，我怎样才能使用像http://methvin.com/splitter/3csplitter.html 上的那样的 Splitter 类型的功能 ？
I am asking this as I need 2 things to be implemented on my page; Portlet (Draggable) :: http://jqueryui.com/sortable/#portletsand Vertical Splitter :: http://methvin.com/splitter/3csplitter.html
我问这个是因为我需要在我的页面上实现两件事；Portlet（可拖动）:: http://jqueryui.com/sortable/#portlets和垂直拆分器:: http://methvin.com/splitter/3csplitter.html
I am not sure how good coding practice it is if I am including 2 separate libraries (even though both are jQuery based); like http://host.sonspring.com/portlets/for Portlets and http://methvin.com/splitter/3csplitter.htmlfor Splitter
如果我包含 2 个单独的库（即使两者都是基于 jQuery 的），我不确定它的编码实践有多好；像http://host.sonspring.com/portlets/用于 Portlets 和http://methvin.com/splitter/3csplitter.html用于 Splitter
回答by Dmitriy
Here is an example on how to create the splitter using jQuery UI:
以下是如何使用 jQuery UI 创建拆分器的示例：
HTML:
HTML：
<div class="wrap">
<div class="resizable resizable1"></div>
<div class="resizable resizable2"></div>
</div>
Script:
脚本：
$(function ()
{
$(".resizable1").resizable(
{
autoHide: true,
handles: 'e',
resize: function(e, ui)
{
var parent = ui.element.parent();
var remainingSpace = parent.width() - ui.element.outerWidth(),
divTwo = ui.element.next(),
divTwoWidth = (remainingSpace - (divTwo.outerWidth() - divTwo.width()))/parent.width()*100+"%";
divTwo.width(divTwoWidth);
},
stop: function(e, ui)
{
var parent = ui.element.parent();
ui.element.css(
{
width: ui.element.width()/parent.width()*100+"%",
});
}
});
});
This is a popular script. I've added little modifications for the fluid layout.
这是一个流行的脚本。我为流体布局添加了一些修改。
回答by testworks
I used Dmitriy's answer as the base of my implementation. Note that there is nothing stopping that particular implementation from doubling the bounding box when the slider is dragged to the right.
我使用 Dmitriy 的答案作为我实现的基础。请注意，当滑块向右拖动时，没有什么可以阻止该特定实现将边界框加倍。
I needed a simple non-moveable splitter for now (with the view to making the panes resizable in the future), and my application is already using jQuery, so I achieved this by changing part of his code as follows:
我现在需要一个简单的不可移动的拆分器（以便将来可以调整窗格的大小），并且我的应用程序已经在使用 jQuery，所以我通过如下更改他的部分代码来实现这一点：
$(function ()
{
$(".resizable1").resizable(
{
autoHide: false,
containment: "#wrap",
...
I also changed the css cursor style (among other things) to prevent the resizable cursor from being displayed as follows:
我还更改了 css 光标样式（除其他外）以防止显示可调整大小的光标，如下所示：
.ui-resizable-e {
cursor: default;
...
Thanks Dmitriy!
谢谢德米特里！
回答by Emmanuel Delay
My first thought was: first you select all the boxes except the last. Those get a splitter to their right side. Then, when the splitter is moved, only the two boxes touching the splitter are resized.
我的第一个想法是：首先选择除最后一个之外的所有框。那些在他们的右侧有一个分离器。然后，当拆分器移动时，只有与拆分器接触的两个框才会调整大小。
This is an example you can copy paste; it works as is. This can be used for any number of columns; just make sure you also adapt the css.
这是一个你可以复制粘贴的例子；它按原样工作。这可以用于任意数量的列；只要确保你也适应了 css。
I added some buttons to expand 1 box; also a reset button.
我添加了一些按钮来展开 1 个框；还有一个复位键。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI 4-Column Splitter</title>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<style>
body {
padding: 0;
margin: 0;
}
.wrap {
width: 100%;
white-space: nowrap;
background-color: #c0c0c0;
}
.resizable {
width: 25%;
height: 120px;
display: inline-block;
overflow: hidden;
}
.ui-resizable-e {
cursor: e-resize;
width: 10px;
top: 0;
bottom: 0;
background-color: gray;
z-index: 10;
}
</style>
</head>
<body>
<div class="wrap">
<div class="resizable"> HELLO </div>
<div class="resizable"> WORLD </div>
<div class="resizable"> FOO </div>
<div class="resizable"> BAR </div>
</div>
<div id="controls">
<input type="button" value="expand 0" data-index="0" class="expand">
<input type="button" value="expand 1" data-index="1" class="expand">
<input type="button" value="expand 2" data-index="2" class="expand">
<input type="button" value="expand 3" data-index="3" class="expand">
<input type="button" value="reset" class="reset">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<style type="text/css" media="all">
</style>
<script type="text/javascript">
$(function () {
// settings
var minWidth = 15;
var splitterWidth = 10; // this sh ould match the css value
var splitter = $('.ui-resizable-e');
var container = $('.wrap');
var boxes = $('.resizable');
var subBoxWidth = 0;
$(".resizable:not(:last)").resizable({
autoHide: false,
handles: 'e',
minWidth: minWidth,
start: function(event, ui) {
// We will take/give width from/to the next element; leaving all other divs alone.
subBoxWidth = ui.element.width() + ui.element.next().width();
// set maximum width
ui.element.resizable({
maxWidth: subBoxWidth - splitterWidth - minWidth
});
},
resize: function(e, ui) {
var index = $('.wrap').index( ui.element );
ui.element.next().width(
subBoxWidth - ui.element.width()
);
},
});
// collapses all the other boxes to the minimum width; expands the chosen box to what ever width is left
$('.expand').click(function () {
var index = $(this).data('index');
var boxesToCollapse = boxes.length - 1;
var widthLeft = container.width() - boxesToCollapse * (minWidth + splitterWidth);
for (var i=0; i<boxes.length; i++) {
boxes.eq(i).width( i==index ? widthLeft : minWidth);
}
});
$('.reset').click(function () {
boxes.removeAttr('style');
});
});
</script>
</body>
</html>
回答by Vladimir Georgiev
The Splitter componentpart of the Shield UI framework allows you to use a mixture of horizontal and vertical splitters.
该分离器组件的屏蔽UI框架的一部分允许您使用的水平和垂直分割的混合物。
