読者です 読者をやめる 読者になる 読者になる

$shibayu36->blog;

株式会社はてなでエンジニアをしています。プログラミングや読書のことなどについて書いています。

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);
});

 jQuery UI便利ですね。本もあるみたいだし、ちょっと読んでみてもいいかもしれない。

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)