リサイズ
次は、要素のサイズを変更してみましょう（リスト4）。リサイズは、例えばメニューや百科事典など写真と本文が対になっているコンテンツで、写真をもっと大きく見たい、見せたい場合に利用することが考えられます。
［リスト4］リサイズの使用例（jQueryUI_resize.html）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リサイズサンプル</title>
<style type="text/css">
.square {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
// 1. テーマのスタイルシートの指定
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<script type="text/javascript">
//
<!--
// 2. resizableメソッドの使用例
$(function () {
$(".square").resizable(
{
ghost:true,
animate:true,
minWidth:100,
minHeight: 200,
maxWidth:300,
maxHeight:400
}
);
});
//-->
</script>
</head>
<body>
<h1 id="title">リサイズサンプル</h1>
<div id="square" class="square">図形の四隅をマウスでドラッグし、リサイズさせてください</div>
</body>
</html>
サイズを変更するには、resizableメソッドを使用します（2）。また、テーマのスタイルシートの指定を忘れないようにしましょう（1）。サイズの変更には、表4のようなオプションがあります。
表4：droppableオブジェクトの設定
| オプション名 | 概要 |
| ghost | 残像の有無を指定（bool）する |
| minWidth/minHeight | 最小サイズを指定（整数）する |
| maxWidth/maxHeight | 最大サイズを指定（整数）する |
図7 実行結果（実行前）
図8 実行結果（実行途中）
図9 実行結果（実行後）
