jquery.tile.js (タイル状に配置)

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 17:12:49 | 最終更新:2015-02-12 (木) 10:53:20

jquery.tile.js
要素をタイル状に並べてくれるプラグイン。

説明サイト
URIN HACK:要素の高さを揃える超軽量なjQueryプラグイン jquery.tile.js

【環境】
jQuery:1.11.2, 2.1.3
jQuery UI:1.11.2
JS

jquery.tile.js
こちらからソースをコピペして

jquery.tile.js

を作成して配置。
 

HTML
JavaScript 部分
  1. <script src="jquery.tile.js"></script>
  2. <script type="text/javascript">
  3. $(function(){
  4.   $('.tile').tile();
  5. });
  6. </script>

4行目、titl メソッドの引数に数値を入れると、列数を指定できる。

というわけではなく、x列毎に同じ高さに揃える という指定らしく

  1. $('.tile').tile(4);

このように設定して、表示エリアを5列分取ったら、高さがずれたw

つまり、列数を指定するときは、表示幅もそれに合わせて指定する必要がある
 

要素部分
  1. <div class="tile">1</div>
  2. <div class="tile">2</div>
  3. <div class="tile">3</div>
  4. <div class="tile">4</div>
  5. <div class="tile">5</div>

綺麗に並んだ~♪
 

CSS

お好みに応じて設定。

  1. .tile {
  2.     border:1px solid #999;
  3.     background:#f0f0f0;
  4.     float:left;
  5.     width:130px;
  6.     margin:0 10px 10px 0;
  7. }

啓文社:[jQuery] タイル表示
CSS は、こちらのサイトの例をいただいてきた。
こちらのサイトのおかげで、このプラグインに出会うことができました~

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 17:12:49 | 最終更新:2015-02-12 (木) 10:53:20

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment