« 画像を使用しないで、ボックスの影をcss表現する方法 その2解説 | トップページ | IEでCanvasを使えるようにするライブラリ「ExplorerCanvas」 »

2011年2月 7日 (月)

カラムの高さを調節するjQueryのプラグイン

カラムの高さを調節してくれるプラグインは色々ありますが、今回はスクリプトを実行する事でカラムの高さを調節するjQueryプラグイン「jQuery Equal Column Heights」をご紹介いたします。
デモページ

「Example one」の利用方法をご説明します。
ソースはデモページをご参照ください。

使用するリソース
jquery-1.5.min.js
jquery.equalHeightColumns.min.js

head要素への記入
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.equalHeightColumns.min.js"></script>
<script type="text/javascript">
 $(function ()
 {
 $('#example-one a').click
  (
   function ()
    {
     $('#example-one .left, #example-one .center, #example-one .right').equalHeightColumns();
    return false;
   }
 );
});
揃えたいボックスのID名 クラス名を記入します。
Example twoの場合は
$('#example-one .left, #example-one .center, #example-one .right').equalHeightColumns();

$('#example-two').equalHeightColumns
({
 children : ':not(h2,p)',
 speed : 1000
});
に書き換えるとアニメーションする用になります。アニメーション速度はspeedの値で設定しています。
Example threeも同様に
$('#example-three').equalHeightColumns
({
 children : ':not(h2, p)',
 speed : 1000,
 height : 800
});
と書き換えます。高さを指定した値まで広げます。高さはheightで指定します。

cssの設定

揃えたいボックスの大きさはcssで指定します。また、揃えたいボックスを親ボックスが囲みます。
.example(親ボックス)
{
  overflow:hidden;
  width:760px;
  padding:15px
}

.left,
.center,
.right(揃えたいボックス)
{
  float:left;
  width:211px;
  padding:10px;
  margin:10px 10px 0;
  border:1px solid #f00
}
以上で設定が完了しました。

|

« 画像を使用しないで、ボックスの影をcss表現する方法 その2解説 | トップページ | IEでCanvasを使えるようにするライブラリ「ExplorerCanvas」 »

jQuery」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/38733756

この記事へのトラックバック一覧です: カラムの高さを調節するjQueryのプラグイン:

« 画像を使用しないで、ボックスの影をcss表現する方法 その2解説 | トップページ | IEでCanvasを使えるようにするライブラリ「ExplorerCanvas」 »