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