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. stickyNavbar.js
  2. Morphext

    JavaScript

    複数テキストをアニメーションで切り替えていくjQueryプラグイン「Morphext」

    MorphextというjQueryプラグインを使えば、複数テキストをア…

  3. CSS3 3D Text Plugin for jQuery
  4. slideSpeed

    JavaScript

    スライドアップ・ダウンを設定された速度で制御できる「slideSpeed」

    slideSpeedは、特定の要素のスライドアップ・スライドダウンを設…

  5. JavaScript

    文字の半分をスタイルすることができるjQueryプラグイン「Splitchar」

    SplitcharというjQueryプラグインを使えば、文字の半分をス…

  6. Vimeo Carousel Gallery

コメント

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

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

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP