Equalizer

JavaScript

Equalizer 讓您可以輕鬆地讓多個項目等高。

基本

若要設定 Equalizer 群組，您需要一個容器，該容器會取得屬性 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.

巢狀

要在另一個 Equalizer 內使用 Equalizer，每個容器都需要一個唯一的 ID，並透過 data-equalizer 屬性指定。每個 data-equalizer-watch 元素都應該有一個值，與其父元素相符。

在以下範例中，第一組 Equalizer 元素的值為 foo，而內部元素的值為 bar。在實際範例中，我們也已將父元素的 equalizeOn 選項設定為「中」，而包含在第一個 div 中的子 Equalizer 則會等化堆疊，並維持等高。

<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>

父面板

此面板中的三個標示會等化，即使堆疊時也是如此。

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.

按列等化

如果您有一個多次換行的項目圖庫，Equalizer 可設定為將每一列的項目高度設為相同。與區塊格線搭配使用效果極佳！

觀看影片中的這一段

技術原理

Equalizer 會透過檢查 `data-equalizer-watch` 元素的垂直偏移量，將其分組為群組，並將偏移量相同的群組歸類為「列」。

請注意您設定 `data-equalizer-watch` 的內容，如果頂部位置不同，Equalizer 會將其解讀為新的「列」，並據此等化。

<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

JavaScript 參考

初始化

您的 JavaScript 中必須包含以下檔案才能使用此外掛程式

foundation.core.js
foundation.equalizer.js
- 使用工具程式庫 foundation.util.mediaQuery.js
- 使用工具程式庫 foundation.util.imageLoader.js

Foundation.Equalizer

建立 Equalizer 的新執行個體。

var elem = new Foundation.Equalizer(element, options);

觸發這些事件： Equalizer#event:init

名稱	類型	描述
`element`	物件	要加入觸發器的 jQuery 物件。
`options`	物件	覆寫預設外掛程式設定。

外掛程式選項

使用這些選項自訂 Equalizer 的執行個體。外掛程式選項可設定為個別資料屬性、一個結合的 data-options 屬性，或作為傳遞至外掛程式建構函式的物件。深入了解 JavaScript 外掛程式初始化方式。

名稱	類型	預設	描述
`data-equalize-on-stack`	`布林值`	`false`	在較小的螢幕上堆疊時啟用高度等化。
`data-equalize-by-row`	`布林值`	`false`	逐行啟用高度等化。
`data-equalize-on`	`字串`	`''`	表示外掛程式應等化高度的最小斷點大小的字串。

事件

這些事件將從附加了 Equalizer 外掛程式的任何元素觸發。

名稱	描述
`preequalized.zf.equalizer`	在套用高度之前觸發
`postequalized.zf.equalizer`	在套用高度時觸發
`preequalizedrow.zf.equalizer`	在套用每行的高度之前觸發
`postequalizedrow.zf.equalizer`	在套用每行的高度時觸發

方法

getHeights

$('#element').foundation('getHeights', cb);

找出包含在 Equalizer 父層中的子項目的外部高度，並將它們以陣列方式傳回

名稱	類型	描述
`cb`	函式	用於傳回高度陣列的非選用回呼。

getHeightsByRow

$('#element').foundation('getHeightsByRow', cb);

找出包含在 Equalizer 父層中的子項目的外部高度，並將它們以陣列方式傳回

名稱	類型	描述
`cb`	函式	用於傳回高度陣列的非選用回呼。

applyHeight

$('#element').foundation('applyHeight', heights);

變更 Equalizer 父層中每個子項目的 CSS 高度屬性，以符合最高的高度

觸發這些事件： Equalizer#event:preequalized Equalizer#event:postequalized

名稱	類型	描述
`heights`	陣列	Equalizer 容器中子項目的高度陣列

applyHeightByRow

$('#element').foundation('applyHeightByRow', groups);

變更 Equalizer 父層中每個子項目的 CSS 高度屬性，以符合每行的最高高度

觸發這些事件： Equalizer#event:preequalized Equalizer#event:preequalizedrow Equalizer#event:postequalizedrow Equalizer#event:postequalized

名稱	類型	描述
`groups`	陣列	Equalizer 容器中子項目的高度陣列，依行分組，最後一個子項目為元素、高度和最大值

_destroy

$('#element').foundation('_destroy');

銷毀 Equalizer 的執行個體。