-1

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

在此处输入图像描述 http://i.stack.imgur.com/u5tS6.png

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

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

4

1 回答 1

2

这通常通过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指定元素的该边缘与其容器之间的距离。1事实证明，您也可以嵌套这些。把它们放在一起，你就可以拥有一个相当复杂的基于固定面板的布局。

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

脚注

1实际上是最近的static非同位元素。

于 2013-08-26T01:39:54.977 回答