ページの特定の領域だけで Foundation 4 を初期化できますか?
たとえば、2 つの div がある場合、foundation("#div2") を呼び出して、すべての CSS および JavaScript イベントを div#2 内にのみ適用できますか?
1000ありがとう!
ページの特定の領域だけで Foundation 4 を初期化できますか?
たとえば、2 つの div がある場合、foundation("#div2") を呼び出して、すべての CSS および JavaScript イベントを div#2 内にのみ適用できますか?
1000ありがとう!
通常、影響はありません。たとえば、グリッド システムは主に CSS によって制御されます。フォームの場合、クラスをフォームに適用しない限りcustom
、フォーム要素の js は機能しません。これを説明するために、以下の 2 つのフォームの 1 つにはcustom
クラスがあり、もう 1 つにはありません。Foundation が 2 つのアンカー タグとcustom
クラス付きフォームの順序付けられていないリストを追加することに注意してください。
<form id="form1">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
<form id="form2" class="custom">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
これが実際の動作を確認するためのフィドルです。
更新: 一般的な「セクションの書式設定」については、ページの一部のセクションに基盤を適用できます。ただし、グリッドが対象のセクションの外にある場合でも、グリッド システムは引き続き適用されることに注意してください。繰り返しますが、これは主に CSS によって制御されているためです。別の例を次に示します。
<h1>The Grid System will still be applied to this</h1>
<div class="row1">
<div class="large-5 large-centered columns">
<p class="panel">Centered Div</p>
</div>
</div>
<div id="foundationArea">
<h1>Only apply Foundation here</h1>
<form id="form1" class="custom">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
<div class="row">
<div class="large-6 columns panel">
<p>Test</p>
</div>
</div>
</div>
<h1>Foundation is not allowed here</h1>
<form id="form2" class="custom">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
ここで与えられた更新された例を示すために、この更新されたフィドルを参照してください。