jQuery UI Resizable

今回は、jQuery UIの「Resizable」について書きます。

「Resizable」は、要素のサイズを変更可能にするものです。

このように使います。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>jQuery ui</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>

	<div class="box">box</div>

<style>
.box{
	width: 50px;
	height: 50px;
	background: red;
}
</style>

<script>
$(function(){
	$('.box').resizable();
});
</script>
</body>
</html>

実行結果↓
f:id:gupuru:20140208150309p:plain

実行結果の赤いボックス(box)の右端あたりをクリックしたまま、動かすとボックスの大きさが変わります。

Resizableには、他にも機能があります。

こんな感じに、draggable()と併用することも出来ます。
また、「handles: 'all'」とすると、全方向から大きさを変えることができます。（デフォルトでは、右端だけです。）

$(function(){
	$('.box').draggable().resizable({
		handles:  'all'
	});
});

「aspectRatio: true」とすると、縦横比を自動で調整してくれます。

$(function(){
	$('.box').draggable().resizable({
		handles:  'all',
		aspectRatio: true
	});
});

「stop」とすると、サイズ調整が終了後のイベント処理ができます。
今回は、サイズ調整、終了後にコンソールにボックスの大きさを表示するようにしています。

$(function(){
	$('.box').draggable().resizable({
		handles:  'all',
		aspectRatio: true,
		stop:function(event,ui){
			console.log(ui.size.height,ui.size.width)
		}
	});	
});