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. Shuffle Images

    JavaScript

    画像をシャッフルすることができるjQueryプラグイン「Shuffle Images」

    Shuffle ImagesというjQueryプラグインを使えば、画像…

  2. Hero slider

    JavaScript

    レスポンシブで横幅フルサイズのスライダーを実装できる「Hero slider」

    Hero sliderはレスポンシブに対応した横幅フルサイズのスライダ…

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

    JavaScript

    jQueryのeachと$.eachの簡単な使い方のメモ

    jQueryのeachと$.eachの使い方のメモです。あんまり深い知…

  4. Tilt.js

    JavaScript

    パララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」

    Tilt.jsはパララックスとチルトの動きを兼ね備えた滑らかなホバーエ…

  5. hop

    JavaScript

    Webページ上の好きな場所をハイライトできる「hop」

    hopはオーバーレイされたWebページ上の好きな場所をハイライトするこ…

  6. notifier

    JavaScript

    Webサイトにシンプルな通知を表示させるjQueryプラグイン「notifier」

    notifierはWebサイトにシンプルな通知を表示させることができる…

コメント

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

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

最近の記事

  1. CITTA TT5.0
  2. Kindle Oasis
  3. OWL-WDDESK01
  4. ワンタッチ着脱フィルターキット

アーカイブ

PAGE TOP