2011年06月24日 jQuery・javascript
jQuery Auto Height とは、複数のボックスの高さを自動的にそろえるシンプルな jQueryプラグインです。 3カラムのデザインで高さを調整したいなんて言う場合も多いのではないでしょうか。

サンプル

複数のボックスの高さを最大値にそろえるjQueryプラグイン

ファイルのダウンロード

Downloads – jquery-auto-height – Google Code

設置方法

以下のソースをhead内にそのまま貼付けます。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryAutoHeight.js"></script>
<script type="text/javascript">
jQuery(function(jQuery){
    jQuery(揃えたいセレクタ).autoHeight();
});
</script>
例として、左カラム、センターカラム、右カラムの3つ全てを揃えたい場合は、各カラムを以下のように設定します。今回は揃えたいものに「.column」というクラスを割り当てます。
<div id="leftColumn" <strong>class="column"</strong>></div>
<div id="centerColumn" <strong>class="column"</strong>></div>
<div id="rightColumn" <strong>class="column"</strong>></div>
上記のhtmlに合わせて、スクリプトのセレクタを設定します。今回は「.column」です。 これで設定は完了です。 他にも、細かい設定が可能になっているので、今回と違う形でボックスの高さを揃えたい場合なんかは、以下のサイトさんなんかで勉強してみるといいと思います。

参考サイト

http://www.tinybeans.net/blog/download/jquery-plugin/jquery-auto-height.html

この投稿へのコメント

コメントはまだありません。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CAPTCHA


ピックアップ記事

jquery.ajaxComboBoxで重複する候補を削除する

2012年02月02日 jQuery・javascript
jquery.ajaxComboBoxとは jquery.ajaxComboBoxとは、フォームのテキスト入力の際に、候補をサジェストしてくれるjQueryプラグインです。ダウンロードおよび、使用方法は配布元のサイトからお願いします。 jquery.ajaxComboBox このプラグインをデフォルトで使っていると、指定したフィールドの値が重複している場合は、同じ候補が複数表示されてしま…
「jquery.ajaxComboBoxで重複する候補を削除する」をはてなブックマークに追加

safariでowl carouselのスライド時にフォントが細くなる現象の解決策

2015年03月19日 web関連jQuery・javascript
レスポンシブ対応でとても重宝しているowlカルーセルですが、safariでは、スライド時に、フォントが細くなったり、太くなったりして、点滅するような現象が起こっていました。 iOSのchromeでも同じ現象が起こるらしいのですが、未確認。 …
「safariでowl carouselのスライド時にフォントが細くなる現象の解決策」をはてなブックマークに追加

jQuery.autopagerプラグインで読み込まれるページにも他のjQueryを適用する

2012年02月02日 jQuery・javascript
jQuery.autopagerを使っていると追加で読み込まれたページのDOMには、headなどで指定しているjavascriptは機能しません。 それを解決するには、autopagerの設定項目の「start」で以下のように設定します。 以下のサンプルコードでは、他のプラグイン(autoheight,smartrolloverなど)が動作するように設定しています。 サンプルコード [ph…
「jQuery.autopagerプラグインで読み込まれるページにも他のjQueryを適用する」をはてなブックマークに追加

jQuery でフォームの入力チェックを実装する

2011年08月04日 jQuery・javascript
フォームに入力されたデータを受け取るときに、入力された内容をエスケープすることは、こちらの記事で触れましたが、送信される前にjQueryで入力値のチェックを行えるとページの推移もなく、便利ですよね。 …
「jQuery でフォームの入力チェックを実装する」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy