javascript - 拥有可调整大小的垂直 Pane 的最佳方式

Question

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

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

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

所以我希望左侧的默认宽度约为 75%，然后是右侧的 25%，但您可以拖动垂直条左右调整大小。然后这些面板中的每一个都将运行自己的 ajax。

到目前为止，我尝试直接使用 CSS、JQuery 和 JSplitter 库，结果发现 Jsplitter 无法在 Chrome 和 jquery 1.8+ 上运行。有没有人对实现我想要的简单方法有任何建议？如果您甚至将我链接到您知道的教程或库，那就太好了，但在过去的 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。