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

Posted 2023-03-06

【中文标题】为（部分）网页实现不同的布局

【英文标题】：Implement different layouts for a (part of a) web page

【发布时间】：2017-05-10 14:19:48

【问题描述】：

我想实现一个编码游乐场。目前，我使用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>  

（为了使其成为游乐场，我在每个 panel 中添加了textarea（例如，html-panel 中的 html-textarea），并结合 3 个文本区域的内容以返回输出。游乐场对每个更改 textareas 中的内容：我选择使用 AngularJS 控制器，而不是 JQuery 事件处理程序。）

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

水平方向的 3 个面板，就像现在的样子 三个面板垂直 左边1个，右边2个 左边2个，右边1个

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

为了最大限度地分享，我们是否应该通过 1 个普通 .html、1 个普通 .js 和 4 个 .css 文件来实现这一点？那么，我们只需要为不同的布局选择不同的.css文件？

【问题讨论】：

为什么不使用像 Angular 或 React 这样的单页应用程序框架？

这就是为什么我添加了angularjs 标签...所以angularjs 可以这样做吗？我在哪里可以获得更多说明来实现这些不同的视图？

Angular 将简化仅使用 1 个 html 文件的结构。现在，就 1 个 js 文件而言，您将不得不捆绑代码（GulpJs、GruntJs、Webpack 是很好的工具）。我在我的手机上，所以我真的不能写出一个好的答案，但你一定要试试看。

为什么不保持简单。这可以只用 css 和 js 来完成。使用js更改每个面板的类，并使用css适当定位每个类/面板

@Thomas 我认为这很简单。首先创建您的 html 模板，然后将这个模板与不同的 css 文件一起使用，以获得您正在寻找的结果。一旦你有了它，组合单独的 css 文件并根据需要对 js 进行更改以更改 div 类。就石灰编织而言，我不确定他们在做什么

【参考方案1】：

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

但我将首先采用@DCR 的建议：仅通过 JS 和 CSS。因为它更简单，也因为 JS 允许我们注入 html，例如 innerHTML。因此，我可以为 4 个布局注入 4 个 html 字符串。在这 4 个 html 字符串中，可能有相同的类名，这使得 CSS 中的样式和 JS 中的函数（例如，拆分器拖动）成为可能。