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


ピックアップ記事

javascriptでGETパラメータを取得する

2012年02月02日 jQuery・javascript
javascriptでGETパラメータを受信するには以下の関数を使うと簡単です。 関数を定義する 以下のコードをコピペしてください。 [php]function getUrlVars() { var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?')…
「javascriptでGETパラメータを取得する」をはてなブックマークに追加

jQueryのfadeInを使ってみる

2011年06月15日 jQuery・javascript
jQueryのfadeInを使って、適当なdiv要素なんかをfadeInを使ってフェードインさせてみます。 サンプルを設置していますので、動作を確認してみてください。…
「jQueryのfadeInを使ってみる」をはてなブックマークに追加

jQuery Ratyでレーティング(評価)表示

2013年10月21日 WordPressjQuery・javascriptphp
jQuery Ratyでレーティング(評価)表示
ホームページやブログの記事なんかにスター評価を表示させたい場合は、jQuery Ratyで簡単に設定出来ます。 jQuery Raty - A Star Rating Plugin ダウンロード まずは、必要なファイルを以下からダウンロードします。ダウンロードしたファイルを解凍して、jquery.raty.min.jsとimgフォルダ(星の画像)を任意の場所にアップロー…
「jQuery Ratyでレーティング(評価)表示」をはてなブックマークに追加

WordPressで記事本文にjavascriptを使う

2011年06月15日 WordPressjQuery・javascript
WordPressには、投稿する記事を自動整形する機能があるんで、勝手に改行とかを入れてくれて便利なのですが、こいつが時々邪魔をします。 これを簡単に解決する方法がありましたので、投稿しておきます。…
「WordPressで記事本文にjavascriptを使う」をはてなブックマークに追加

jQueryのイベントが重複される場合の対応

2020年01月27日 jQuery・javascript
参考サイト : https://hodalog.com/how-to-prevent-the-event-from-being-executed-twice/…
「jQueryのイベントが重複される場合の対応」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy