レスポンシブWebデザインに対応した「jquery.heightLine.js」

多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。

heightLine.jsとの違いとしては、

などがあります。

ダウンロード / サンプル / GitHub

利用方法

まずは、jQueryとjquery.heightLine.jsをページ内で読み込みます。

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="../jquery.heightLine.js"></script>

次に基本的な使い方は高さを揃えたい要素をセレクタで指定して実行します。

$(".box0>div").heightLine();

これで指定したい要素の高さが揃えられます。

オプションで様々な指定が可能です。

maxWidthオプション

ウィンドウ幅640px以下の場合のみ高さを揃えたい場合はmaxWidthオプションを指定します。

$(".box1>div").heightLine({
    maxWidth:640
});

minWidthオプション

ウィンドウ幅640px以上の場合のみ高さを揃えたい場合はminWidthオプションを指定します。

$(".box2>div").heightLine({
    minWidth:640
});

maxWidthオプション / minWidthオプション

ウィンドウ幅500px以上、700px以下の場合のみ高さを揃えたい場合はminWidthオプションとmaxWidthオプションの両方を指定します。

$(".box3>div").heightLine({
    maxWidth:700,
    minWidth:500
});

fontSizeCheckオプション

fontSizeCheckオプションを指定するとフォントサイズが変更された際も高さを再設定します。

$(".box4>div").heightLine({
    fontSizeCheck:true
});

destroyメソッド

設定されたheightLineを取り除きたい場合はdestroyメソッドを利用します。

$(".box0>div").heightLine("destroy");

refreshメソッド

コンテンツの内部が変更された場合などはrefreshメソッドで再度高さの設定が可能です。

$(".box0>div").heightLine("refresh");

関連エントリー

スクロールストップイベントを実装するjQueryプラグイン「jquery.scrollstop.js」
CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」
PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」
iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」
ページ内リンクをスマートにするsmoothScroll.js

スポンサードリンク

«iOSにおけるviewportの指定方法による細かい違い | メイン | JavaScriptライブラリをbowerに登録する»