5.1さらうどん

リスト要素を3DSのホームメニューっぽくするjQueryプラグイン『jquery.3dsmenu.js』書きました

JavaScript, Game | 11:30 |

3DSのホーム画面の列数を変更できるUIがカッコ良かったから作った。

デモはこちら

jquery.3dsmenu.js - jsdo.it - Share JavaScript, HTML5 and CSS

フルスクリーン版

jquery.3dsmenu.js - jsdo.it - share JavaScript, HTML5 and CSS

3DSのトップ画面を忠実に再現しており、列の数を自由に指定したり、長押しドラッグで、各セルを並び替えることが出来ます。

使い方は、リスト要素に対して以下のように書くだけ！（要jQuery, jQueryUI）

$(document).ready(function(){
  $('ul').dsmenu();
});

ソースコードや詳しい使い方はgithubをご覧ください！

giginet/jquery-3dsmenu - GitHub

オプション

オプション名	説明	デフォルト
animation	ソートや列数を変えるときのアニメーションありなしを設定します	true
animationDuration	アニメーション時の速度をミリ秒かslow/normal/fastで指定します	'normal'
margin	各セル同士のマージンを、[x, y]の配列で指定します	[3, 3]
maxSize	要素の最大サイズを数字か[width, height]の配列で指定します。falseの場合は領域いっぱいまで広がります	false
row	列の初期数、最小数、最大数を含んだオブジェクトを指定します	{initial : 3, min : 1, max : 6}
sortable	各要素のソートができるかどうかを設定します	true

メソッド

メソッドは

$(document).ready(function(){
  $('ul').dsmenu('methodname', arg1, arg2);
});

といったような感じで呼び出します。

メソッド	引数	説明
contract	なし	列数をデクリメントします。最小列数未満にはなりません
expand	なし	列数をインクリメントします。最大列数より大きくはなりません
init	options(object)	要素を初期化します。$('ul').dsmenu(options);と同じです
row	なし	現在の列数を取り出します
setRow	row(number), [animation(boolean)]	列数を任意の列数に変更します。animationが指定されていると、アニメーションありなしを指定できます。指定しない場合optionsの値に依存します

その他

Safariではソーティングが出来ない不具合が発生しております。

GoogleChromeかFirefoxの最新版推奨。他はノーサポートです。

どうぞご利用ください。

ツイートする