ウェブページの一部に異なるレイアウトを実装する

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> 

（それ遊び場作るために、私は、各panel（例えば、html-panelでhtml-textarea）内textareaを追加し、出力を返すために3つのテキストエリアの内容を組み合わせて私は、JQueryのイベントハンドラではなくAngularJSコントローラを使用することにしました。）

ここで、あまりにも多くのコードを繰り返さずに異なるレイアウトを実現する方法を知りたいと思います。 4つのレイアウト（右下隅を参照）ユーザーに提案Liveweaveと同じように、私は現時点では

縦に3枚のパネル

1のように見えるものとして例えば

• 水平3枚のパネルを表示する提案したいです右

上の左右の

2と1の左および2は、だから、これを実施するための最良の方法/構造/ツールは何ですか？

これを実現するには、共通の.htmlと共通の.jsと4 .cssのファイルを使用しますか？次に、レイアウトごとに異なる.cssファイルを選択するだけです。

Answer 1

これは確かにネストされたビュー/ UI-Router/AngularUI/Angular JSで行うことができます。そして、我々はレイアウトごとに1つのhtmlファイルを定義することができます。

しかし、@DCRが提案したものは、まずJSとCSSのみで説明します。 JSはhtmlを挿入できるため、たとえばinnerHTMLでより簡単です。したがって、4つのレイアウトに対して4つのhtml文字列を注入できます。 4つのHTML文字列の中には、CSSでのスタイリングやJSでの関数の分割（スプリッタドラッグなど）を共有できるように、同じクラス名を使用できます。