Question

我想实现一个编码游乐场。目前，我使用flex-box来定义不同面板的位置。这是JSBin及其html部分：

<div class="flex-box">
  <div class="col" id="html-panel">
    <p>html</p>
  </div>
  <div class="handle">
    <div class="handle-inner"></div> 
  </div>
  <div class="col" id="css-panel">
    <p>css</p>
  </div>
  <div class="handle">
    <div class="handle-inner"></div> 
  </div>
  <div class="col" id="js-panel">
    <p>javascript</p>
  </div>
</div>

（为了让它成为一个游乐场，我在每个textarea内添加panel（例如html-textarea中的html-panel），然后将3个textareas的内容组合起来操场对textareas中内容的每次更改做出反应：我选择使用AngularJS控制器，而不是JQuery事件处理程序。）

现在，我想知道如何在不重复太多代码的情况下实现不同的布局。就像Liveweave向用户提出4个布局（见右下角）一样，我想建议显示例如

水平地将3个面板当作目前的样子
垂直3个面板
左侧1个，右侧2个
左侧2个，右侧1个

那么实现这一目标的最佳方法/结构/工具是什么？

要分享最大值，我们是否应该通过1个常见.html，1个常见.js和4个.css文件来实现此目标？那么，我们只需要为不同的布局选择不同的.css文件？

Answer 1

根据一些研究，这当然可以通过嵌套视图/ UI-Router / AngularUI / Angular JS来完成。我们将能够为每个布局定义一个html文件。

但我会首先考虑@DCR建议的内容：仅使用JS和CSS。因为它更简单，因为JS允许我们注入html，例如innerHTML。因此，我可以为4个布局注入4个html字符串。在4个html字符串中，可能存在相同的类名，这使得在JS中的一些样式和函数（例如，分割器拖动）中共享样式。

为（部分）网页实现不同的布局

1 个答案: