用于创建基于面板的布局的Javascript框架

Question

我正在创建一个小型在线IDE（灵感来自Cloud9 IDE）作为一个爱好项目，但我正在努力布局。我开始使用Twitter Bootstrap，但是不可能有可停靠的面板（侧边栏，页脚等）。所以，我正在寻找一个基于Javascript的框架，甚至是一个现代的CSS框架，它允许我有一个带可停靠面板的布局等等。与此类似：

http://i.stack.imgur.com/u5tS6.png

我能够找到这个jQuery插件：http://layout.jquery-dev.net/index.cfm 但它似乎已过时且非常臃肿。那里有类似的东西吗？

更新： 我不是在寻找ExtJS替代方案。我不需要小部件，数据网格或任何东西。我只需要一个灵活的布局框架，这允许我停靠这些布局。

Answer 1

这通常是通过position: absolute实现的。假设您有一个容器，其侧面对接面板，中间有面板：

<div class="container">
    <div class="side-panel">
        <!-- ... -->
    </div>
    <div class="middle-panel">
        <1-- ... -->
    </div>
</div>

如果side-panel宽度为200像素，这就足够了：

.side-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 200px;
}
.middle-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 200px;
    right: 0;
}

top，bottom，left和right指定元素边缘与其容器之间的距离。 ¹ 转你也可以嵌套这些。把它放在一起，你可以有一个相当复杂的固定面板布局。

当然，您可能希望动态调整面板。为此，您需要编写一些JavaScript来动态设置style。要重新排列页面的整个布局，您需要超越设置style并移动DOM中的元素。

脚注

¹ 实际上是最近的非static盟友元素。