Можно ли инициализировать 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 для форм не сработают. Чтобы проиллюстрировать это, одна из двух форм ниже имеет класс custom
, а другая - нет. Обратите внимание, что Foundation добавит два тега привязки и неупорядоченный список для формы с классом 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>
Посмотрите эту обновленную скрипту, чтобы показать приведенный здесь обновленный пример.