gridster.jsを利用してModern UI Styleみたいな画面レイアウトを作ってみる

デモ

ソース

javascript

$(function(){
    $(".gridster ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [100, 100]
    });
    var gridster = $(".gridster ul").gridster().data('gridster');
    $("#add").click(function(){
        var dataSizex = parseInt(1 + Math.random() * 2);
        var dataSizey = parseInt(1 + Math.random() * 2 );
        var tileColor    = parseInt(1 + Math.random() * 3)
        gridster.add_widget('<li class="new tile0' + tileColor + '"'>'</li>', dataSizex , dataSizey);
        gridster.remove_widget( $('.gridster li').eq(1) );
    });
});

HTML

<div class="alignC">
<button class="btn btn-primary" id="add">追加・削除</button>
</div>

<hr />

<div class="gridster">
<ul class="unstyled">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" class="tile01"></li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1" class="tile01"></li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="tile01"></li>
<li data-row="1" data-col="2" data-sizex="2" data-sizey="1" class="tile02"></li>
<li data-row="2" data-col="2" data-sizex="2" data-sizey="2" class="tile03"></li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1" class="tile01"></li>
<li data-row="2" data-col="4" data-sizex="2" data-sizey="1" class="tile02"></li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1" class="tile01"></li>
</ul>
</div>

CSS

div.gridster{
  background-color:#CCCCCC;
}
li.tile01{
  background-color:#FFCCCC;
}
li.tile02{
  background-color:#CCFFCC;
}
li.tile03{
  background-color:#CCCCFF;
}
li.tile04{
  background-color:#CCFFFF;
}