前回のチュートリアル「 The Unbreakable Nine-Gong Grid Layout 」では、幅と高さを完全に柔軟に調整して、より柔軟なレイアウトスタイルを実現できる、比較的完璧な9マスグリッドのレイアウト方法を紹介しました。
ただし、弾性機能を完全に反映するには、依然として非常に大きな代償がかかり、構造の観点からは構造が比較的肥大化していますが、各ノードは不可欠であり、合理化できなければ柔軟性につながります。足りない。
実際のアプリケーションでは、多くの設計者はこのレイアウト構造を好まず、冗長だと考えるかもしれません。
完璧な 9 マス グリッドの設計は 3 層に分離された構造である必要があります。私が実現したい理想的な 9 マス グリッドは次のようになります。
したがって、この記事では、このレイアウトをこの理想的な状態にできるだけ近づけて、さまざまな面でよりアプリケーションに適したものにすることを試みます。
1 つ目と 2 つ目の点については、柔軟性を維持しながら効率化を実現したい場合、つまり「ケーキを食べながらケーキも食べたい」場合は、js カプセル化を使用する以外に方法はありません。これは一種の「耳を隠してベルを盗む」アプローチであると言えます。はい、JS でカプセル化するこの方法は本質的にその構造を単純化するものではなく、カプセル化するために動的な方法を使用しているだけであることを認めざるを得ません。構造を作成しますが、冗長な HTML 構造に即座に影響し、すべての冗長な構造が一度に表示されなくなります。
3 層分離アプローチから 9 正方形グリッドを改善する方法を学びましょう。
構造層:
これは、できる限り合理化したい重要な領域です。js を使用してその構造を動的に作成するため、現在の構造は次のような最もオリジナルな構造になるはずです。
<div class="box">最初の 9 正方形のボックス</div>
<div class="box" id="one">2 番目の 9 正方形のボックス</div>
<div class="box" id="two">3 番目の 9 正方形のボックス</div>
私が行った唯一の変更は、各ボックスに異なる ID を追加することです。これにより、後で異なる色を作成するためにスタイル シートを呼び出すためのフックが残ります。この ID を使用して、スタイル シートにさまざまな画像やカラー スタイルを作成します。
class="box" を div コンテナに追加するだけで、9 正方形のグリッド レイアウトが正常に作成されます。これだけでも十分簡単です。
スタイルレイヤー:
先程、スタイルカスタマイズの画期的なポイント（別ID）を構造層に埋め込みましたので、スタイルを書きやすくなりました。別のスタイルを取得するためにスタイルを変更する必要がある 9 か所すべてのスタイルをオーバーライドしてリセットします。
もちろん、デモンストレーションの便宜上、背景にさまざまな画像を適用することもできます。具体的なインターフェイスのスタイルは、デザインのスキルによって異なります。
/*配色 1*/
#one .t_l{背景:青;}
#one .t_r{背景:青;}
#one .t_m{背景:オレンジ;}
#one .m_l{背景:オレンジ;}
#one .m_r{背景:オレンジ;}
#one .b_l{背景:青;}
#one .b_r{背景:青;}
#one .b_m スパン{背景:オレンジ;}
#1 .context{背景:#666;}
/*配色 2*/
#2 .t_l{背景:赤;}
#2 .t_r{背景:赤;}
#two .t_m{背景:黒;}
#two .m_l{背景:黒;}
#two .m_r{背景:黒;}
#two .b_l{背景:赤;}
#2 .b_r{背景:赤;}
#two .b_m スパン{背景:黒;}
#2 .context{背景:#999;}