拥有可调整大小的垂直窗格的最佳方式

Question

所以，我首先应该说我对JQuery和CSS的了解并不广泛，但我可以很好地处理基本代码和最温和的代码。

我目前正在尝试设计一个具有垂直可调整大小窗格的网站布局。这就是我的意思：

____________________________
|                 |         |
|                 |         |
|                 |         |
|                 |         |
|_________________|_________|

所以我希望默认左边的宽度约为75％，然后是右边的25％，但你可以拖动垂直条左右调整大小。然后每个面板都会运行自己的ajax。

到目前为止，我尝试使用直接的CSS，JQuery和库JSplitter只是为了发现Jsplitter在jquery 1.8+上无法在Chrome上运行。有没有人有任何简单的方法来实现我想要的建议？如果你甚至把我链接到你知道的教程或图书馆，那就太好了，但是我在过去的3个小时内还没有发现任何事情我一直在努力...感谢你的帮助。

编辑：哦，我已经尝试了UI布局，但我看到的例子非常复杂......如果有人有一个简单的例子也有帮助，我理解UI布局非常强大。

Answer 1

也许您可以将此示例用作初始方法：http://jsfiddle.net/amontellano/hM92y/1/

点击||在中间标记并移动它以展开左侧面板。

$('.rsh').draggable({
    axis: 'x', 
    containment: 'parent',
    helper: 'clone', 
    drag: function (event, ui) { 
        var width = ui.offset.left; 
        $(this).prev().width(width); 
    } 
});

它只使用div元素作为容器。 然后，您应该开始播放并为此添加增强功能。 希望它有助于作为一个初步的想法。你不需要任何其他库只是jQuery UI。