Resizable

解説

要素の大きさをマウスで変更できるようにします。

書式

jQuery_Object.resizable([options]);

依存ファイル

• jquery.ui.core.js
• jquery.ui.widget.js
• jquery.ui.mouse.js
• jquery.ui.resizable.js

引数

• optionsオプション
  String: "disable"、 "enable"、"destroy" のいずれか。
  

  値	説明
  "disable"	一時的にリサイズ機能を無効にします。
  "enable"	リサイズ機能を有効にします。
  "destroy"	リサイズ機能を完全に破棄します。

  
  Object: 指定したオプションで、要素にリサイズ機能を追加します。（キーと値のハッシュ）
  

  プロパティ	型	初期値	説明
  animate	Boolean	false	アニメーションしながら、サイズを変更するようにします。
  autoHide	Boolean	false	マウスカーソルがResizable要素の上から外れた場合、自動的に枠を非表示にします。
  aspectRatio	Boolean, Number	false	アスペクト比を指定します。trueを指定すると、現在のアスペクト比を保ったままリサイズします。 数値は、 高さ / 横幅 の値を指定します。 （Shiftキーを押しながら枠をドラッグすると、aspectRatioにtrueを指定したときと同じようにリサイズします。）
  containment	Element, Selector	なし	リサイズの範囲を制限します。指定した要素内でのみリサイズが可能になります。"parent"（親要素内）、"document"（ドキュメント内）、DOM要素、jQueryセレクタを指定できます。
  ghost	Boolean	false	ghostエフェクトhelperを使用します。
  grid	[Integer x, Integer y]	なし	指定したx, y座標毎にhelperが動くようにします。
  handles	{n, e, s, w, ne, se, sw, nw, all}	"e,s,se"	ドラッグできる位置を指定します。ドラッグできる位置には枠が表示されます。 "n,e,s"のように、位置をカンマで区切った文字列で指定します。 "all"を指定すると、全ての箇所がドラッグ可能になります。 handlesパラメータと位置の対応表
  helper	String	なし	リサイズ中に適用するCSSのクラスを指定します。 リサイズが終了すると、元の要素を表示します。
  maxHeight	Integer	なし	リサイズできる最大の高さを指定します。
  maxWidth	Integer	なし	リサイズできる最大の幅を指定します。
  minHeight	Integer	10	リサイズできる最小の高さを指定します。
  minWidth	Integer	10	リサイズできる最小の幅を指定します。
  proportionallyResize	Array	なし	この要素がリサイズされたときに、比例してリサイズされる要素を配列で指定します。配列の要素には、jQueryセレクタ、もしくはDOM要素を指定します。
  transparent	Boolean	false	ドラッグ枠を表示しないようにします。
  start	Function(e, ui)	なし	リサイズが開始されるときに呼び出されるイベントハンドラ関数を指定します。
  resize	Function(e, ui)	なし	枠をドラッグして、リサイズしているときに呼び出されるイベントハンドラ関数を指定します。
  stop	Function(e, ui)	なし	リサイズが終了したときに呼び出されるイベントハンドラ関数を指定します。

  
  

  イベントハンドラ関数

  イベントハンドラ関数(start,stop,resize)には2つの引数が渡されます。
  第1引数には、イベントオブジェクトが渡されます。
  第2引数には、以下のプロパティを持ったオブジェクトが渡されます。

  プロパティ	説明
  options	Resizable要素に指定したオプションです。
  axis	ドラッグしている枠線の位置をhandlesの値で返します。

戻り値

• jQuery: jQueryオブジェクト

例

例1:様々なオプションで、Resizableな要素を生成します。（オプションと動きを確認してください。）

/* --- CSS --- */
.blue-helper {background:#f0f8ff; border:5px solid #4169E1;}

  handles: "ne,se,sw,nw",
  ghost: true,
  grid: [30,30]

  helper: "blue-helper",
  autoHide: true,
  aspectRatio: 0.5

  maxHeight: 300,
  maxWidth: 350,
  minHeight: 100,
  minWidth: 150

  handles: "all",
  ghost: true,
  animate: true

  resize: function(e, ui) {
    $(".resize")
      .show()
      .fadeOut(1000);
  }

Resizable要素に付与されるクラス

Resizable要素には、状態に応じて以下のクラスが設定されます。

クラス	状態
ui-resizeable	Droppable要素
ui-resizable-autohide	autoHideがtrue
ui-resizable-knob	knobHandlesがtrue
ui-resizeable-disabled	ドロップ無効

ドラッグ枠には、以下のクラスが設定されます。

クラス	状態
ui-resizable-handle	ドラッグ枠
ui-resizable-handle-n	ドラッグ枠（上）
ui-resizable-handle-e	ドラッグ枠（右）
ui-resizable-handle-s	ドラッグ枠（下）
ui-resizable-handle-w	ドラッグ枠（左）
ui-resizable-handle-ne	ドラッグ枠（右上）
ui-resizable-handle-se	ドラッグ枠（右下）
ui-resizable-handle-sw	ドラッグ枠（左下）
ui-resizable-handle-nw	ドラッグ枠（左上）

helperには、以下のクラスが設定されます。

クラス	状態
helperClass	helperに指定したクラス
proxy	ghostがtrue
ui-resizable-ghost	ghostがtrueの場合、helperのdiv子要素に設定

例）resizable("disable")を呼び出され、リサイズ無効状態のResizable要素

<resizable要素 class="ui-resizable ui-resizable-disabled" />

例）ドラッグ枠（上）

<div class="ui-resizable-handle ui-resizable-n" />

ページトップヘ

ページトップヘ