用于创建基于面板的布局的Javascript框架
vinnylinux
我正在创建一个小型的在线IDE（受Cloud9 IDE启发）作为一个业余项目，但是我在布局上苦苦挣扎。我开始使用Twitter Bootstrap，但是不可能有可停靠的面板（侧栏，页脚等）。因此，我正在寻找一个基于Javascript的框架，或者甚至一个现代CSS框架，该框架允许我使用可停靠面板等进行布局。与此类似：
http://i.stack.imgur.com/u5tS6.png
我能够找到此jQuery插件：http : //layout.jquery-dev.net/index.cfm但它似乎已过时且非常肿。那里有类似的东西吗？
UPDATE: I'm not looking for an ExtJS alternative. I don't need widgets, datagrids or anything. I just need a flexible layout framework, which allows me to dock those layouts.
icktoofay
This is typically achieved through position: absolute. Say you have a container with a panel docked on the side and a panel in the middle:
<div class="container">
<div class="side-panel">
<!-- ... -->
</div>
<div class="middle-panel">
<1-- ... -->
</div>
</div>
If side-panel was to be 200 pixels wide, this would suffice:
.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, and right specify the distance between that edge of the element and its container.1 It turns out that you can nest these, too. Put this together and you can have a rather sophisticated fixed panel-based layout.
当然，您可能希望动态调整面板。为此，您需要编写一些JavaScript来style动态设置。要重新排列页面的整个布局，您需要超越设置styles并在DOM中移动元素。
脚注
1实际上是最近的非static定位元素。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
引导面板+用于评论布局的媒体布局
- 2
基于在Storyboard中使用自动布局创建的另一个视图以编程方式使用框架创建视图
- 3
在框架布局上设置动态创建的TextView
- 4
创建基于自动布局的指标视图
- 5
用于处理视图的Javascript框架
- 6
在运行时将创建的框架放置在面板中
- 7
setOnClickListener 用于在彼此下方创建相同的布局
- 8
用于创建异步流API的框架
- 9
Sublime布局分为3个面板，以创建自定义布局
- 10
将Sublime布局分成3个面板，以创建自定义布局
- 11
用于转换基于 Java 的香草应用程序的 Griffon 框架
- 12
自动包含用于布局文件的javascript
- 13
在应用程序中创建基于通知式卡片的布局
- 14
ScrollPane和面板布局
- 15
绘图的主面板布局
- 16
用于实例/静态变量的JavaScript框架？
- 17
关闭面板上的框架
- 18
用于创建pdf的pdfbox：如何进行文本布局？
- 19
用于创建活动的Android Material xml布局
- 20
如何在 xml 中创建可用于任何布局的视图？
- 21
如何在表单中动态创建流布局面板和标签页
- 22
使用javascript创建动态框架集和框架
- 23
用于树创建的Javascript递归
- 24
基于其他两个数据框创建面板数据框
- 25
如何基于R中的一长串表格创建面板
- 26
基于其他两个数据框创建面板数据框
- 27
用于类似 Visual-Studio 的布局管理 + 组件实例化的最佳 Web UI 框架
- 28
WPF隐藏顶部面板布局
- 29
嵌套表布局面板
我来说两句