Splitter使用jQUery UI库 [英] Splitter using jQUery UI library

问题描述

我正在尝试创建可调整大小的单元格（Splitter），如下面的
http：// methvin.com/splitter/3csplitter.html

I am trying to create resizable cells (Splitter) like the one below http://methvin.com/splitter/3csplitter.html

但我需要使用jQUery UI来做到这一点。

But I need to do that using jQUery UI.

我不确定使用jQUery UI可以实现类似的事情。

I am not sure how similar thing can be achieved using jQUery UI.

是否可以使用jQuery UI Resiable（ http://jqueryui.com/resizable/ ）

Is it possible using the jQuery UI Resiable(http://jqueryui.com/resizable/)

如果是，请提供任何相同的参考例子。
它的行为类似于Methvin.com/splitter

If yes, could you please provide any reference example for the same. It should behave similar to the Methvin.com/splitter

推荐答案

这是我有一天使用的代码：

This is the code I used one day:

$(".resizable1").resizable({
    handles: 'e',
    minWidth: '50',
    maxWidth: '350',
    resize: function() {
        var remainingSpace = $(this).parent().width() - $(this).outerWidth(),
            divTwo = $(this).next(),
            divTwoWidth = remainingSpace - (divTwo.outerWidth() - divTwo.width());
        divTwo.width(divTwoWidth);
    }
});

http://jsfiddle.net/8qzTJ/

这篇关于Splitter使用jQUery UI库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！