Question

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

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

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

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

如果是，请您提供相同的参考示例。它应该与Methvin.com/splitter

类似

Answer 1

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

$(".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/

Answer 2

这绝对可以使用jquery ui，查看这里的文档http://jqueryui.com/resizable/#helper这只是一个简短的例子

$(function() {
    $( "#resizable" ).resizable({
      handles: "n,e,s,w" // chose the handle you want
    });
  });

Splitter使用jQUery UI库

2 个答案: