仙台のホームページ制作・システム開発・ウェブコンサルティングはアド・エータイプへ。

タイル状に表示させるリストなどに便利!要素の高さを揃えるjQueryプラグイン「jquery.tile.js」

公開日:

jQuery

タイル状に表示させるリストなどに便利!要素の高さを揃えるjQueryプラグイン「jquery.tile.js」

 

リストなどをタイル状に並べて要素の高さをそろえたいときに困ったことはありませんか?(´・ω・`)

 

テキストの長さが変わったり、画像があったりなかったりなど、要素の高さが異なる場合にずれて表示されてしまうことがあります。

 

今回は要素の高さを揃えるjQueryプラグイン「jquery.tile.js」をご紹介します。

それではどうぞ!

 

 

「jquery.tile.js」プラグインの使用方法

ファイル読込

下記から「jquery.tile.js」をダウンロードします。

 

「jquery.tile.js」
http://urin.github.io/jquery.tile.js/

 

以下のようにダウンロードしたファイルを読み込みます。

 

 

HTML

今回はliタグに指定していますが、divでも問題ありません。

 

 

JS

.tile()の()内には「列の数」を指定します。
数値を指定しなくても動きますが、以下の点で指定するかしないかを判断します。

 

・列の個数を指定しない場合
 全てのリストの中から最大の高さを出力するので、全てのリストの最大の高さが同じになる

・列の個数を指定した場合
 列を指定すると、1行ごとのリストの中から最大の高さを出力するので、行ごとに高さは異なる

 

また、中に画像を入れていた場合は画像を読み込む前にJSが動くため崩れてしまいます。
そのときはこのように記述します。

 

 

サンプル

「jquery.tile.js」を使用したデモページを用意しました。

デモ1が「列の個数を指定しない場合」、デモ2が「列の個数を指定した場合」です。

「jquery.tile.js」プラグインを使用したデモページ

 

 

 

まとめ

以上、要素の高さを揃えるjQueryプラグイン「jquery.tile.js」をご紹介しました。

 

要素の高さを揃えるjQueryプラグインはいくつかありますが、軽量で簡単なことがjquery.tile.jsのメリットです。簡単、キレイに並べることが出来るのでとっても便利ですよね(*´ω`*)

ブログ作成者4
  • このエントリーをはてなブックマークに追加

ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください!

お気軽にご相談ください。
022-716-3883
営業時間 平日9:30~18:00