ある要素の拡大縮小をしたいなと思っていたのですが、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); });
jQuery UI便利ですね。本もあるみたいだし、ちょっと読んでみてもいいかもしれない。

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)
- 作者: Bear Bibeault,Yehuda Katz,吉川邦夫
- 出版社/メーカー: 翔泳社
- 発売日: 2011/08/31
- メディア: 大型本
- 購入: 7人 クリック: 282回
- この商品を含むブログ (15件) を見る