jQuery UI逆引きリファレンス
リサイズ可能なパネルを生成するには？
指定の要素を（画像、テキストにかかわらず）マウスのドラッグ操作でリサイズできるようにするResizableウィジェットの基本的な使い方を説明する。
jQuery UIとは？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザー・インターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。
Resizableウィジェットを利用することで、指定の要素を（画像、テキストにかかわらず）マウスのドラッグ操作でリサイズできるようになります。
さっそく、具体的な例を見てみましょう。以下は、あらかじめ用意した画像をResizableウィジェットでリサイズ可能にするサンプルです。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Resizableウィジェット</title>
<link type="text/css" rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
// resizableメソッドを呼び出す①
$('.ham').resizable({
});
});
</script>
</head>
<body>
<div>
<img src="images/ham1.jpg" class="ham" />
<img src="images/ham2.jpg" class="ham" />
<img src="images/ham3.jpg" class="ham" />
</div>
</body>
</html>
|
リサイズ対象の要素に対してresizableメソッドを呼び出し、拡大／縮小機能を適用するだけです（1）。
テキスト・パネルの場合も同様です。
|
<script type="text/javascript">
$(function() {
$( "#resizable" ).resizable({
autoHide: true
});
});
</script>
……中略……
<div id="resizable" class="ui-widget-content" style="overflow: hidden;">
<p>jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザー・インターフェイス（UI）に関わる機能を提供します。<br />
jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。
</p>
<p>Resizableウィジェットを利用することで、指定の要素を（画像であると、テキストであるとに関わらず）マウスのドラッグ操作でリサイズできるようになります。<br />
さっそく、具体的な例を見てみましょう。
</p>
</div>
|
ただし、そのままでは、「パネル・サイズがテキストの内容よりも小さくなった」場合に、テキストがパネルの外にあふれてしまいます。そこで、パネルのoverflowプロパティを「hidden」（＝領域からあふれたコンテンツは隠す）としています。
Resizableウィジェットのパラメーター
resizableメソッドには、ハッシュ形式で以下のようなパラメーターを指定できます。
（1）maxHeight／maxWidth、minHeight／minWidthパラメーター
リサイズ可能な最大／最小の幅／高さを表します。指定のサイズを超えてリサイズすることはできません。minHeight／minWidthパラメーターのデフォルト値はいずれも「10」です（maxHeight／maxWidthパラメーターは無指定）。
|
<script type="text/javascript">
$(function() {
$('.ham').resizable({
maxHeight: 200,
maxWidth: 200,
minHeight: 100,
minWidth: 100
});
});
</script>
|
containmentパラメーターを指定することで、特定の要素（セレクター）の範囲内でリサイズを制限することもできます。
|
<style type="text/css">
#content { width: 300px; height: 350px; border-style: solid; }
</style>
……中略……
<script type="text/javascript">
$(function() {
$('.ham').resizable({
containment: "#content"
});
});
</script>
……中略……
<div id="content">
<img src="images/ham1.jpg" class="ham" />
</div>
|
（2）エフェクト関連のパラメーター
エフェクト関連のパラメーターとしては、以下のようなものがあります。
| パラメーター名 | 概要 | デフォルト値 |
|---|---|---|
| animate | エフェクトを有効にするか | false |
| animateDuration | エフェクトの所要時間（ミリ秒） | slow（ゆっくり） |
| delay | マウス操作からエフェクト動作開始までの遅延時間 | 0 |
| animateEasing | エフェクトによる変化の度合い | swing |
以下に、具体的な例を示します。
|
<script type="text/javascript">
$(function() {
$('.ham').resizable({
animate: true,
animateDuration: 1000,
delay: 100,
animateEasing: 'easeOutBounce'
});
});
</script>
|
animateEasingパラメーターは、「最初はゆっくり、だんだん速く」「跳ねるように」など、変化の程度を表す情報です。指定できる値については、Easingも併せて参照してください。
（3）ghost／autoHide／helperパラメーター
いずれも、リサイズする際の補助的な表示を制御するパラメーターです。まず、ghostパラメーターは、リサイズ時にリサイズ・イメージを半透明な状態でプレビュー表示します（デフォルトはfalse）。リサイズ後の状態を予測しやすくなりますので、特に画像のリサイズには便利です。
autoHideパラメーターは、リサイズのためのハンドラー（右隅の
）を自動で隠すかどうかを表します（デフォルトはfalse）。true指定で、要素にマウスポインタをあてたタイミングでのみハンドラーを表示します。
そして、helperパラメーターは、リサイズ時に補助線（＝ヘルパー）として表示する要素を表します。例えば、以下はリサイズ時に赤い点線枠を表示する例です。
|
<style type="text/css">
.helper { border: 2px dotted Red; }
</style>
……中略……
<script type="text/javascript">
$(function() {
$('.ham').resizable({
autoHide: true,
helper: "helper"
});
});
</script>
|
（4）aspectRatioパラメーター
リサイズ時の縦横比を表します。例えば、以下は幅：高さが3：2の比率を保ちながら拡大／縮小する例です。特に画像のリサイズ時によく利用します。
|
<script type="text/javascript">
$(function() {
$('.ham').resizable({
aspectRatio: 3 / 2
});
});
</script>
|
（5）gridパラメーター
リサイズする際の単位を表します。例えば以下は、横100px、縦125pxの単位でリサイズする例です。もしも縦・横ともに20pxずつのような表現をするならば、単に「grid: 100」と指定します。
|
<script type="text/javascript">
$(function() {
$('.ham').resizable({
grid: [100, 125]
});
});
</script>
|
※以下では、本稿の前後を合わせて5回分（第5回～第9回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
6. Buttonウィジェットでさまざまなボタンを生成するには？
＜button＞、＜input type=”radio”＞、＜input type=”checkbox”＞、＜input type=”submit”＞、＜a＞といった要素を、一様にボタンに整形できるButtonウィジェットの基本的な使い方を説明する。
7. 【現在、表示中】≫ リサイズ可能なパネルを生成するには？
指定の要素を（画像、テキストにかかわらず）マウスのドラッグ操作でリサイズできるようにするResizableウィジェットの基本的な使い方を説明する。
9. Accordionウィジェットでアコーディオン・パネルを生成するには？
タイトル部分をクリックすることでコンテンツが開閉するアコーディオン・パネルを実装できる「Accordionウィジェット」の基本的な使い方を説明する。
