jQuery の matchHeight プラグインの使い方サンプル
2016/05/17JavaScriptjQuery
jQuery のプラグイン matchHeight が便利です。 横並びに並んだ要素の高さを自動的にいい感じに合わせてくれます。
デモはこちら。
特定のクラスを持つ要素の高さを合わせたい場合には、単純に .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 のスター数も多く、同種のツールの中では最も広く使われているようなので、安心して利用できます。