[JS]異なる高さのパネルを高いものに揃えたり、指定した高さに揃えるスクリプト -Equal Column Heights 2.0

Post on:2013年10月22日

Equal Column Heights 2.0のデモ

デモはIE6+, Firefox4+, Chrome, Safari, Operaでご覧ください。

各デモのキャプチャにコードを添えて紹介します。

Demo 1: 最も高い要素に高さを揃えます。

Demo 2: アニメーションで高さを揃えます。

Demo 3: 指定した高さに揃えます。

Demo 4: 最小の高さ（minHeight）を決め、高さを揃えます。

Demo 5: 最大の高さ（maxHeight）を決め、高さを揃えます。

Demo 6: 各オプションを組み合わせて高さを揃えます。

Demo 7: 高さを変更する際にさまざまなスタイルを加えることができます。
ここでは背景色をグレーに変更。

jquery.jsと当スクリプトを外部ファイルとして記述します。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/equal-height-columns.js"></script>

各パネルを内包するラッパーを用意します。

<div class="hoge">
  <div>パネル</div>
  <div>パネル</div>
  <div>パネル</div>
</div>

jQueryのセレクタでラッパーを指定し、スクリプトを実行します。

$(selector).equalHeightColumns();

スクリプトのオプションでは、アニメーションのスピード、最小・最大の高さの設定ができます。