JavaScript

高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「equalize.js」

高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「equalize.js」を使ってみました。記述もシンプルでとても使いやすいプラグインです。デフォルトではheight(高さ)を揃えてくれるんですが、他にもouterHeight、innerHeight、width、outerWidth、innerWidthのいずれかを指定することで揃えることもできます。

[ads_center]

使い方

jQueryとダウンロードしたプラグインを読み込みます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="js/equalize.js" type="text/javascript"></script>

不揃いの要素群を内包している親要素をセレクタに指定してあげます。

<script type='text/javascript'>
$(function(){
    $('#sample').equalize();
});
</script>

HTMLはこんな感じで。

<div id="sample">
    <div>sample</div>
    <div>sample text</div>
    <div>sample text sample text</div>
    <div>sample text</div>
    <div>sample</div>
    <div>sample text</div>
    <div>sample text sample text</div>
    <div>sample text</div>
    <div>sample</div>
    <div>sample text</div>
    <div>sample text sample text</div>
    <div>sample text</div>
</div>

このように、とても簡単に高さを均一に表示させることができます。

高さを均一にする

また、幅を均一にしたい場合には以下のように width を指定します。

<script type='text/javascript'>
$(function(){
    $('#sample').equalize('width');
});
</script>

すると、こんな感じで幅を均一にすることができます。

幅を均一にする

というわけで、不揃いな高さや幅を簡単に均一に表示させたいといった場合には、このプラグインを使えば一瞬にして揃えることができます。使い方もシンプルなのでオススメです。

ダウンロードは以下からどうぞ。

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのbindメソッドとliveメソッドの簡単な違いや使い方

    bindとliveの違いがちょっとわかりずらかったのでまとめてみました…

  2. PopSelect

    JavaScript

    タグ形式のセレクトボックスをポップオーバーで表示させる「PopSelect」

    PopSelectはタグ付けするような感覚のセレクトボックスをポップオ…

  3. Turntable.js

    JavaScript

    画像を使ってストップモーション動画のような効果を実装できる「Turntable.js」

    Turntable.jsは複数の画像を使ってストップモーション動画のよ…

  4. Responsive Multi Menu
  5. TwentyTwenty

    JavaScript

    2枚の画像を見比べれるjQueryプラグイン「TwentyTwenty」

    TwentyTwentyは2枚の画像を見比べれる便利なjQueryプラ…

  6. SweetAlert2

    JavaScript

    カスタマイズ性が高くアクセシビリティ(WAI ARIA)に優れたアラート実装「SweetAlert2…

    SweetAlert2は、レスポンシブ対応でカスタマイズ性が高くアクセ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP