gotohayato.com

moon indicating dark mode
sun indicating light mode

jQuery の matchHeight プラグインの使い方サンプル

2016/05/17JavaScriptjQuery

jQuery のプラグイン matchHeight が便利です。 横並びに並んだ要素の高さを自動的にいい感じに合わせてくれます。

  • jquery.matchHeight.js - a responsive equal heights plugin for jQuery

デモはこちら。

特定のクラスを持つ要素の高さを合わせたい場合には、単純に .matchHeight() メソッドを呼び出せば OK です。

/**
* @file
* .parent 内の . item の高さを揃える。
*/
$(function () {
var $target = $('.parent .item');
$target.matchHeight();
});

特定の要素の高さを別の要素に合わせたい場合は .matchHeight() にオブジェクトを渡しその中で target プロパティを指定します。

$target.matchHeight({target: $anotherTarget});

その設定をリセットする場合は remove プロパティをセットするだけで OK です。

$target.matchHeight({remove: true});

次の例は画面幅が広い場合ときだけメインコンテンツ部とサイドバーの高さをあわせるサンプルです。

/**
* @file
* メインとサイドバーの高さを合わせる(画面幅が広いときのみ)。
*/
$(function () {
// 設定値
var config = {
// サイドバーがメインの横に配置される最小の画面幅
widthThreashold: 1000,
// メインとサイドバーのラッパー
mainWrapper: '#main',
sideBarWrapper: '.sidebar'
};
// 必要な jQuery オブジェクトを取得
var $window = $(window),
$body = $('body'),
$sidebar = $(config.mainWrapper),
$mainWrapper = $(config.sideBarWrapper);
// ページロード時間の処理を実行
init();
/**
* ページロード時の初期化処理を行う
*/
function init() {
// サイドバーの高さ調整を画面読み込み時に 1 度行う
adjustSidebarHeight();
// 画面リサイズ時にサイドバーの高さ調整が起こるようにする
$window.resize(adjustSidebarHeight);
}
/**
* サイドバーの高さを調整する
*
* 画面幅が広い(サイドバーがメインコンテンツの横に並ぶ)ときは
* サイドバーの高さをメインにあわせる。
* そうでない場合はサイドバーの高さ調整をリセットする。
*/
function adjustSidebarHeight() {
if (isWindowWide()) {
$sidebar.matchHeight({target: $mainWrapper});
}
else {
$sidebar.matchHeight({remove: true});
}
}
/**
* 画面幅が広いかどうか(サイドバーがメインの横につくかどうか)を調べる
*/
function isWindowWide() {
return $body.width() >= config.widthThreashold;
}
});

以上です。

シンプル API で使いやすいですね。 GitHub のスター数も多く、同種のツールの中では最も広く使われているようなので、安心して利用できます。

参考


hg
後藤隼人
個人事業でウェブ開発やマーケティングをしています。
GitHub