JQuery
gridster.jsで遊ぶ
はち
更新日:2021/08/11
はちです。オリックスの5位が見えてきました。
さて。突然ですが。
Webページのレイアウトをユーザーさんに可変に組ませたい時ってないですか？
事の始まり
あるシステムを作る時でした。
(´-｀).oO「こういう時はこういうレイアウトで、こういう時はこういう感じに枠を組んで…」
(´-｀).oO「ついでにその状態を保存できて、公開まで出来るといいなぁ…。」
って思った時がありました。
そういう時に、予めレイアウトを決めた大枠を何種類も用意しておき、状況に応じてユーザに選ばせるのも1つの手段だと思いますが、どうせなら「ユーザー毎にレイアウトを自由に組ませたい」なあーと思った時、たまたまこのgridsterを見つけました。
gridsterとは…
ドラッグ&ドロップで、パネル(ボックス)をスイスイ動かせるライブラリです。
サイズも自由に変更できるし、グリッドレイアウトが組めるので、比較的スッキリしたデザインを直ぐ作成できます。
■Demoはここから：http://gridster.net/demos/adding-widgets-dynamically.html
※弊社でも実はとあるシステムで、このgridsterが採用されております。
つかいかた
■ダウンロードはここから：http://gridster.net/#download
1) まず最初にライブラリを読み込ませます。
|
1 2 |
<script type="text/javascript" src="libs/jquery.js"></script> <script type="text/javascript" src="jquery.gridster.js"></script> |
2) 今回はサンプルなので、あらかじめ基礎となる枠を少しだけ用意しておきます。
|
1 2 3 4 5 6 7 8 9 |
<div class="gridster"> <ul> <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">0</li> <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">1</li> <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">2</li> <li data-row="1" data-col="2" data-sizex="2" data-sizey="1">3</li> <li data-row="2" data-col="2" data-sizex="2" data-sizey="2">4</li> </ul> </div> |
- 表示する位置 → 縦(data-row) 横(data-col)
- 要素のサイズ → 縦(data-sizey) 横(data-sizex)
これらの要素を組み合わせて表示位置とサイズを固定します。(少しコツがいります (^v^;
3) グリッドに対して間隔やサイズをJavascriptで設定します
|
1 2 3 4 |
$(".gridster ul").gridster({ widget_margins: [10, 10], //グリッドごとの間隔 widget_base_dimensions: [50, 50] //グリッドの大きさをpxで指定 }); |
このままだとグリッドのリサイズも出来ます。
グリッドのリサイズを封じるには、widget_base_dimensionsの下行に
|
1 |
resize: {enabled: false} |
を追記してみてください。
また、要素全体をgridster.jsを使用してレイアウティングしたいが、要素を動かされたくない場合は
|
1 |
$(".gridster ul").gridster().data('gridster').disable() |
を追記することで、指定クラスをdisabledに出来ます。これで、動かされることもなくなります。
4) 座標値(シリアル値)を取得して保存したい
|
1 2 |
var s = gridster.serialize(); $('#log').val(JSON.stringify(s)); |
gridster.serializeで座標値を取得出来るので、
その値をJSON.stringifyでJSON文字列に変換しておいて、テキストボックス等に代入しておいて保存するとかしましょう。
JSON.parseで分解してもいいですし、独自にsplitしつつ値を保存するでもいいんじゃないかと思います。
番外編) 座標値を取得するときに、要素のIDを同時に取得したい
gridster.jsの中身を少しいじればIDも取得できます。
760行目あたりにある
|
1 2 3 4 5 6 7 |
serialize_params: function($w, wgd) { return { col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y }; |
のreturn内に
|
1 |
id: $w.prop('id'), |
を追記することで、serialize()処理を走らせた際に要素のIDを取得することが出来ます。
描画する際にIDがあると、処理が組みやすいと思うのでIDを保持するようにしておいたほうが良いかなと思います。
さいごに
今回は紹介していませんが、add.widget()で要素を追加出来たり、remove.widget()で要素削除したり、
ドラッグしている最中に処理を走らせたりとか色々出来るので、
パネルをうにょうにょさせたい時があったら使ってみると楽しいことがおこるかもしれません:)
