Может ли Foundation 4 иметь масштаб?

Можно ли инициализировать Foundation 4 только в определенных областях страницы?

Например, если у меня есть 2 div, могу ли я вызвать Foundation("#div2") и все события CSS и javascript применяются только внутри div#2?

Спасибо 1000!


person nkkollaw    schedule 12.04.2013    source источник
comment
Вы просто беспокоитесь о системе сетки?   -  person von v.    schedule 12.04.2013
comment
Привет нет, в основном о компонентах Javascript. CSS легко исправить путем перекомпиляции SASS, но я не знаю, предоставляют ли они что-то подобное для JS, не смог найти в документации...   -  person nkkollaw    schedule 12.04.2013


Ответы (1)


Как правило, это не повлияет на вас. Например, система сетки в основном контролируется 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>

Посмотрите эту обновленную скрипту, чтобы показать приведенный здесь обновленный пример.

person von v.    schedule 12.04.2013
comment
Спасибо за Fiddle и ответ, фон В. В принципе, я хотел бы узнать, могу ли я это сделать: $('#sidebar').foundation(), и Foundation будет работать только внутри #sidebar. - person nkkollaw; 12.04.2013
comment
На самом деле, я отредактировал скрипт (впервые использовал его :-p), и, похоже, он работает: jsfiddle. net/fDUxV/1 Интересно, почему я не смог найти эту функцию в документации... Что ж, спасибо! Я продолжу экспериментировать. - person nkkollaw; 12.04.2013
comment
Пожалуйста. См. мой обновленный ответ и обновленную скрипку, которая идет с ним, чтобы дополнительно проиллюстрировать, что вам нужно. - person von v.; 12.04.2013
comment
Спасибо 1000! Похоже, все работает так, как я и ожидал. Фонд потрясающий. :-) - person nkkollaw; 12.04.2013
comment
Да, это так. Мы использовали его с версии v2, и с тех пор они достаточно хорошо повзрослели. Рад, что смог помочь :) - person von v.; 12.04.2013