Полезные плагины Foundation

Эквалайзер Базовый

Чтобы настроить группу эквалайзеров, вам понадобится контейнер, который имеет атрибут data-equalizer, а затем ряд дочерних элементов, которые имеют атрибут data-equalizer-watch. Все дочерние элементы будут изменены таким образом, чтобы иметь одинаковую высоту.


<div class="grid-x grid-margin-x" data-equalizer data-equalize-on="medium" id="test-eq">
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/square-1.jpg">
    </div>
  </div>
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch>
      <p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
    </div>
  </div>
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/rectangle-1.jpg">
    </div>
  </div>
</div>​

Pellentesque habitant morbi tristique senectus et netus et, ante.


Nesting - Гнездование

Чтобы использовать один эквалайзер внутри другого, каждому контейнеру требуется уникальный идентификатор, присвоенный атрибутом data-equalizer. Затем каждый элемент data-equalizer-watch должен иметь значение, соответствующее его родительскому элементу.

В приведенном ниже примере первый набор элементов эквалайзера имеет значение foo, в то время как внутренние элементы имеют строку значений. В живом примере мы также установили параметр equalizer On на "средний" для родительских элементов, а дочерний эквалайзер, содержащийся в первом div, выравнивается по стеку и поддерживает равную высоту.


<div class="grid-x" data-equalizer="foo">
  <div class="cell medium-4" data-equalizer-watch="foo">
    <div class="callout" data-equalizer-watch="foo" data-equalizer="bar">
      <h3>Parent panel</h3>
      <div class="callout" data-equalizer-watch="bar"></div>
      <div class="callout" data-equalizer-watch="bar"></div>
      <div class="callout" data-equalizer-watch="bar"></div>
    </div>
  </div>
  <div class="cell medium-4">
    <div class="callout panel" data-equalizer-watch="foo"></div>
  </div>
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch="foo"></div>
  </div>
</div>​

Parent panel

The three callouts in this panel will equalize, even when stacked.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Where these panels will not equalize on stack, and instead equalize on medium up.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.


Выравнивание По Рядам

Если у вас есть галерея элементов, которые переносятся несколько раз, эквалайзер можно настроить так, чтобы он соответствовал элементам каждой строки по высоте. Отлично работает с блочной сеткой!


Under the Hood:

Equalizer splits the data-equalizer-watch elements into groups by checking their vertical offsets, and grouping ones with the same offset into a "row".

Be aware on what you set data-equalizer-watch, if the top position is different, Equalizer will interpret that as a new "row" and equalize accordingly.


<div class="grid-x grid-padding-x small-up-1 medium-up-2 large-up-4" data-equalizer data-equalize-by-row="true">
  <div class="cell" data-equalizer-watch></div>
  <div class="cell" data-equalizer-watch></div>
  <div class="cell" data-equalizer-watch></div>
  <!-- ... -->
</div>​

Lorem ipsum dolor sit amet

 

Lorem ipsum dolor sit amet

 

Lorem ipsum dolor sit amet

 

Lorem ipsum dolor sit amet

 

Lorem ipsum dolor sit amet

 

Lorem ipsum dolor sit amet

 

Lorem ipsum dolor sit amet

 

Lorem ipsum dolor sit amet

 

Lorem ipsum dolor sit amet

 

Lorem ipsum dolor sit amet

 

Lorem ipsum dolor sit amet

 

Lorem ipsum dolor sit amet

 

Lorem ipsum dolor sit amet

 

Lorem ipsum dolor sit amet

 


Interchange на JavaScript

Interchange использует медиа-запросы для динамической загрузки адаптивного контента, подходящего для устройства пользователя.

Для работы с изображениями

Пропускная способность очень ценна в мобильных сетях, поэтому она помогает обслуживать пользователей на меньших экранах меньшим изображением. Используя Interchange, вы можете подавать определенные изображения для пользователей в зависимости от их размера экрана. Запросы css media используются для определения размера устройства пользователя и того, какое изображение должно быть подано.

В приведенном ниже примере мы имеем три различных размера изображения: один для маленьких экранов, один для средних и один для больших. Используйте приведенный ниже формат для настройки адаптивного изображения. Изображение будет изменяться автоматически по мере изменения размера браузера.


<img data-interchange="[assets/img/interchange/small.jpg, small], [assets/img/interchange/medium.jpg, medium], [assets/img/interchange/large.jpg, large]">

 



Показ скрытие блоков

data-toggle, data-close, и data-open атрибуты можно использовать несколько элементов! Синтаксис прост - просто передайте разделенный пробелом список в атрибут data-x следующим образом:

<button class="button" data-toggle="foo bar baz">Toggle things</button>​


Показ и скрытие блоков
Показ и скрытие блоков
Показ и скрытие блоков

Плавная прокрутка

Чтобы включить плавную прокрутку по внутренним ссылкам, просто добавьте атрибут data-smooth-scroll в родительский контейнер, как в нашем меню. Обратите внимание,что каждый раздел должен иметь уникальный идентификатор


<ul class="menu" data-smooth-scroll>
  <li><a href="#first">First Arrival</a></li>
  <li><a href="#second">Second Arrival</a></li>
  <li><a href="#third">Third Arrival</a></li>
</ul>
<div class="sections">
  <section id="first">First Section</section>
  <section id="second">Second Section</section>
  <section id="third">Third Section</section>
</div>​