jQuery UIのResizableをちょっとだけ使ってみた

　ある要素の拡大縮小をしたいなと思っていたのですが、jQuery UIのResizableを使えば良いだけだった。

　とりあえずある要素をresizableにしたかったら、以下のようにする。すごい簡単。

$('#resizable').resizable();

　現在の要素のアスペクト比を維持したい場合以下のように書けば、大丈夫そう。

var $resizable = $('#resizable');
var width = $resizable.width();
var height = $resizable.height();

$resizable.resizable({
    aspectRatio: width / height
});

　あとはanimationしたりなどももちろん出来る。

　さらに、eventとしてcreate, resize, start, endなどがあるので、ある要素のresizeが終わったらそのwidth, heightを使ってごにょごにょするとかも可能。例えば以下はresizeが終わった時(ドラッグして手を離した瞬間)に、width, heightをconsoleに出力する例。

var $resizable = $('#resizable');
var width = $resizable.width();
var height = $resizable.height();

$resizable.resizable({
    aspectRatio: width / height
});
$resizable.live("resizestop", function (event, ui) {
    var size = ui.size;
    console.log(size.width);
    console.log(size.height);
});