2012年に最も役だったjQuery Pluginでご紹介した中からgridsterの使い方。

まずはサンプル

では、htmlを見てみます。

headでCSSの読み込み

<link rel="stylesheet" type="text/css" href="./gridster.js_files/jquery.gridster.min.css">
<link rel="stylesheet" href="./gridster.js_files/style.css">

レイアウト部分

<div class="gridster">
<ul style="height: 640px; position: relative;">
<li data-row="1" data-col="2" data-sizex="2" data-sizey="1" class="gs_w"></li>
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1" class="gs_w"></li>

<li data-row="4" data-col="2" data-sizex="2" data-sizey="1" class="gs_w"></li>
<li data-row="2" data-col="3" data-sizex="2" data-sizey="2" class="gs_w"></li>

<li class="try gs_w" data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
<li data-row="3" data-col="1" data-sizex="2" data-sizey="1" class="gs_w"></li>
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1" class="gs_w"></li>

<li data-row="1" data-col="6" data-sizex="1" data-sizey="1" class="gs_w"></li>
<li data-row="2" data-col="5" data-sizex="1" data-sizey="1" class="gs_w"></li>

<li data-row="2" data-col="2" data-sizex="1" data-sizey="1" class="gs_w player-revert" style="position: absolute;"></li>
<li data-row="2" data-col="6" data-sizex="1" data-sizey="2" class="gs_w"></li>
</ul>
</div>

とりあえず<div class=”gridster”>は必須。
<li>の中にclass=”gs_w”も必須。
<li>の「data-row=”1″」で表示される行の初期位置（上から1,2,3）
<li>の「data-col=”2″」で表示される列の初期位置（左から1,2,3）
<li>の「 data-sizex=”2″」でobjectのサイズ（横）
<li>の「 data-sizey=”2″」でobjectのサイズ（縦）

最近はこの傾向が強いです。フッタでjavascriptの読み込み。
必要なjavascritpとjqueryファイルの読み込み

<script type="text/javascript" src="./gridster.js_files/jquery-1.7.2.min.js"></script>
<script src="./gridster.js_files/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>

gridsterの設定をするスクリプト

<script type="text/javascript">
var gridster;

$(function(){

gridster = $(".gridster > ul").gridster({
widget_margins: [10, 10],
widget_base_dimensions: [140, 140],
min_cols: 6
}).data('gridster');

});
</script>

widget_margins: [10, 10]はmarginの設定
意味はwidget_margins: [右,下]
widget_base_dimensions: [140, 140]はobejctの基本サイズ
意味はwidget_base_dimensions: [横, 縦]
ここで設定したものを元に<li>の「 data-sizex=”2″」等で何個分という設定
min_cols: 6はなぞです。
文字から考えて最低6列はある？とか
っと考えていじっても何も起きない・・・。

っとまあ、基本はこんな感じのようです。

この他にも
widget_selector: “&gt li”はセレクタを指定。（この場合はli）
max_size_x: 6で横幅の最大値を設定
max_size_y: 6で縦幅の最大値を設定
などなど、色々とカスタマイズできるようでうす。

しかし、根本的な問題として、これはcookieかなんかに並べ替えたレイアウトを記憶させといて、再度アクセスしたときにそのレイアウトで並ぶというような発想はなかったんでしょうか？
何かそこまでできないと完成じゃないと思うのです。でないと、半分ぐらい作る側の自己満足で終わってしまいますね。
まあ、作った人にしてみればそこまでやるんなら自分でやってくださいっと言ったところなんでしょう！

サンプルのダウンロードが意味分からないファイルだったので作りました。
http://source-marine.net/css-mania/download/gridster.zip

« 前の記事

次の記事 »