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. zingtouch

    JavaScript

    タッチジェスチャーをカスタマイズできるJSライブラリ「zingtouch」

    Zingtouchは、タッチ対応のデバイスにおける基本的なジェスチャー…

  2. Notyf

    JavaScript

    シンプルでレスポンシブ対応のカッコイイ通知を表示できる「Notyf」

    Notyfはシンプルでレスポンシブに対応したカッコイイ通知を表示させる…

  3. desoSlide

    JavaScript

    サムネイル付きのナビが素敵なスライダーを実装できるjQueryプラグイン「desoSlide」

    desoSlideというjQueryプラグインを使えば、サムネイル付き…

  4. gridstack.js

    JavaScript

    ウィジェットレイアウトを作成できるjQueryプラグイン「gridstack.js」

    gridstack.jsはドラッグ&ドロップでウィジェットレイアウトを…

  5. no-image

    JavaScript

    水平スクロールができることを示唆してくれる「ScrollHint」

    ScrollHintは水平スクロールができることをポインタアイコンを使…

  6. Shave

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

コメント

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

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

最近の記事

  1. RICOH THETA SC2
  2. 簡易アクセス
  3. SOUNDLINK MINI II Special Edition

アーカイブ

PAGE TOP