トップ  >  2014年  >  2014.04.15 [jQuery] タイル表示
features [jQuery] タイル表示
2014.04.15記
ブロックを要素をタイル表示し、行毎に高さを揃えるjQueryのプラグインを試してみます。
http://urin.github.io/posts/2013/release-jquery-tile-js/

1-1
1-2
1-2
1-2
1-3
1-4
2-1
2-2
2-3
2-3
2-3
2-3
2-4
3-1
3-2
3-3
3-4
3-4
4-1
4-1
4-1
4-1
4-1
4-2
4-3
4-4
5-1
5-2
5-3
5-4
5-4
5-4
5-4
5-4
5-4
5-4

HTML


<div class="tile">1-1</div>
<div class="tile">1-2<br>1-2<br>1-2</div>
<div class="tile">1-3</div>
<div class="tile">1-4</div>

<div class="tile">2-1</div>
<div class="tile">2-2</div>
<div class="tile">2-3<br>2-3<br>2-3<br>2-3</div>
<div class="tile">2-4</div>

<div class="tile">3-1</div>
<div class="tile">3-2</div>
<div class="tile">3-3</div>
<div class="tile">3-4<br>3-4</div>

<div class="tile">4-1<br>4-1<br>4-1<br>4-1<br>4-1</div>
<div class="tile">4-2</div>
<div class="tile">4-3</div>
<div class="tile">4-4</div>

<div class="tile">5-1</div>
<div class="tile">5-2</div>
<div class="tile">5-3</div>
<div class="tile">5-4<br>5-4<br>5-4<br>5-4<br>5-4<br>5-4<br>5-4</div>

CSS


<style type="text/css">
.tile { 
    border:1px solid #999; 
    background:#f0f0f0; 
    float:left; 
    width:130px; 
    margin:0 10px 10px 0; 
}
</style>

JavaScript


<script src="jquery-2.1.0.min.js"></script>
<script src="jquery.tile.js"></script>
<script type="text/javascript">
$(function(){
  $('.tile').tile(4);
});
</script>

このプラグイン「jquery.tile.js」簡単でよいです。

次回にはこのタイルをドラッグ&ドロップで並べ替えるっていうのがやれるようにしたと思います。
前
2014.05.15 [jQuery] タイルをドラッグ&ドロップ
カテゴリートップ
2014年
次
2014.03.15 MVNO(2)

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999-2018 keibunsya all right reserved.