【JQueryライブラリ】簡単に高さを揃えられるjquery.tile.jsを使ってみよう。

【JQueryライブラリ】簡単に高さを揃えられるjquery.tile.jsを使ってみよう。

こんばんちわ、やのっぱです(´・ω・｀)v

今回は良く利用するJQueryライブラリ、tile.jsの使い方をお話していきます。
それではやっていきましょう。

まずは設置から

まずはダウンロードし、設置をしていきます。

配布元のjquery.tile.js Demosから【Download compressed】(compressedはmin化、uncompressedは展開された状態です)を右クリックで保存、またはクリックして出てきたソースを保存またはコピペしてjquery.tile.jsの名前で保存し任意のフォルダに格納します。

次に、jQueryとjquery.tile.jsをhead内に読み込み、使用出来るようにします。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="格納場所のパスをいれます/jquery.tile.js"></script>

これでとりあえず読み込まれ使用出来る状態です。

このようなHTMLを用意してみました。
画像とテキストの入ったliですね。
これにtileを適応すると、一番高さがあるものに揃います。

<ul class="testList clearfix">
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</li>
</ul>

指定class全てに適用

使用方法は至って簡単です。
head内にこちらを記述します

<script type="application/javascript">
  $(function(){
    $(".testBox").tile();
  });
</script>

これで、class .testBoxがついている要素全てが一番高い要素の高さになります。
しかし、これだと具合がわるいこともしばしばです。
なので、グループ分けをすることもできます。

個数を指定して適用

<script type="application/javascript">
  $(function(){
    $(".testBox").tile(4);  
  });
</script>

このように.tile();の()の中に数字をいれることで数字の数ごとで揃わせることができます。
4であるならば、.testBox4つずつ揃うようになります。

テキストのみの場合はこれでOKです。
上記のHTMLのように画像が入っているとなると、多少付け足しが必要になってきます。
画像が入っていると、画像を読み込む前にtile.jsが実行されてしまうからです。
付け足したのがこちらです

画像を含む場合の記述

<script type="application/javascript">
  $(window).load(function(){
    $(".testBox").tile(4);
  });
</script>

$(function～のところを$(window).load(function～とつけたすことで、画像を読み込んでから実行となります。
これで、画像を含んだ場合でも崩れることはなくなります。
簡単な記述で実装でき、とても便利なのでぜひ使用してみてください。それではっ