第6章　「リサイズの処理」

jQuery UIにはリサイズ処理を行なう機能も用意されています。リサイズは対象となるエレメントにresizable()を指定するだけです。ただし、スタイルシートが正しく設定されていない場合はリサイズ処理を行なうことができません。標準ではfloraフォルダ内にあるflora.all.cssをリンクすることで自動的にリサイズのためのスタイルシートが設定されます。
サンプル1ではID名myAreaをリサイズするように設定しています。（サンプル1を実行する）

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/flora/flora.all.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/ui/ui.mouse.js"></script>
<script type="text/javascript" src="js/ui/ui.resizable.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p>jQuery UIの処理</p>
<div id="myArea">ここがリサイズできます</div>
</body>
</html>


【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}
#myArea {
background-color:yellow;
width:240px;
height:160px;
}


【JavaScript】
$(function(){
$("#myArea").resizable();
});


通常、リサイズ処理はドラッグ処理と一体となって行なわれることが多くあります。ドラッグ＆リサイズを同時に行なうには、対象となるエレメントにresizable().draggable()のように設定します。また、使用する外部JavaScriptファイルもリサイズ用のものとドラッグ用に必要となるファイルを読み込ませておく必要があります。
サンプル2ではID名myAreaをドラッグとリサイズの両方をを行なえるように設定しています。（サンプル2を実行する）

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/flora/flora.all.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/ui/ui.mouse.js"></script>
<script type="text/javascript" src="js/ui/ui.resizable.js"></script>
<script type="text/javascript" src="js/ui/ui.draggable.js"></script>
<script type="text/javascript" src="js/ui/ui.draggable.ext.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p>jQuery UIの処理</p>
<div id="myArea">ここがドラッグ＆リサイズできます</div>
</body>
</html>


【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}
#myArea {
background-color:yellow;
width:240px;
height:160px;
}


【JavaScript】
$(function(){
$("#myArea").resizable().draggable();
});

[目次へ]