javascript - jQuery UI 和拆分器

Question

使用 jQuery UI，我如何使用 Splitter 类的功能，如 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/对于 Portlet和 http://methvin.com/splitter/3csplitter.html分离器

Answer 1

这是一个关于如何使用 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+"%",
            });
        }
    });
});

这是一个流行的脚本。我对流体布局添加了一些修改。

jsFiddle example