レスポンシブWebデザインに対応した「jquery.heightLine.js」
多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。
heightLine.jsとの違いとしては、
- jQueryプラグイン化したのでjQueryが必要です
- 高さを揃えたい要素をclassではなくjQueryのセレクタで指定します
- レスポンシブWebデザインに対応、特定のウィンドウ幅の場合のみ高さを揃えます
- destroyとrefreshメソッドを追加、高さ揃えの無効化や再揃えが簡単にできます
などがあります。
利用方法
まずは、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に登録する»