使用 jQuery UI，我怎样才能使用像http://methvin.com/splitter/3csplitter.html上的一种拆分器功能 ？
我问这个是因为我需要在我的页面上实现两件事；Portlet（可拖动） :: http://jqueryui.com/sortable/#portlets 和垂直拆分器 :: http://methvin.com/splitter/3csplitter.html
我不确定如果我包含 2 个独立的库（即使两者都是基于 jQuery）的编码实践有多好；像http://host.sonspring.com/portlets/用于 Portlets 和http://methvin.com/splitter/3csplitter.html用于拆分器
下面是一个关于如何使用 jQuery UI 创建拆分器的示例：
HTML：
<div class="wrap">
<div class="resizable resizable1"></div>
<div class="resizable resizable2"></div>
</div>
脚本：
$(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+"%",
});
}
});
});
这是一个流行的脚本。我为流体布局添加了一些修改。
我使用 Dmitriy 的回答作为我实施的基础。请注意，当滑块向右拖动时，没有什么可以阻止特定实现将边界框加倍。
我现在需要一个简单的不可移动拆分器（以使窗格将来可调整大小），并且我的应用程序已经在使用 jQuery，因此我通过更改他的部分代码来实现这一点，如下所示：
$(function ()
{
$(".resizable1").resizable(
{
autoHide: false,
containment: "#wrap",
...
我还更改了 css 光标样式（除其他外）以防止可调整大小的光标显示如下：
.ui-resizable-e {
cursor: default;
...
谢谢德米特里！
我的第一个想法是：首先选择除最后一个之外的所有框。那些在他们的右侧有一个分离器。然后，当拆分器移动时，只有接触拆分器的两个框被调整大小。
这是一个可以复制粘贴的示例；它按原样工作。这可以用于任意数量的列；只要确保你也适应了CSS。
我添加了一些按钮来展开 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>
Shield UI 框架的拆分器组件部分允许您混合使用水平和垂直拆分器。