jQuery UIのインタラクションを使ってみよう

jQuery UI／プラグインの活用（1）

リサイズ

　次は、要素のサイズを変更してみましょう（リスト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 実行結果（実行後）