Selectable

解説

要素をマウスで選択できるようにします。

書式

jQuery_Object.selectable([options]);

依存ファイル

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

引数

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

  値	説明
  "disable"	一時的に選択機能を無効にします。
  "enable"	選択機能を有効にします。
  "refresh"	選択要素の状態（位置、サイズ、選択状態）を再計算します。
  "toggle"	選択機能の有効／無効を切り替えます。
  "destroy"	選択機能を完全に破棄します。 ＊選択状態は破棄されません。

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

  プロパティ	型	初期値	説明
  autoRefresh	Boolean	true	選択要素の状態（位置、サイズ、選択状態）を自動的に計算するかどうかを指定します。 trueを指定すると自動的に再計算します。 falseを指定すると、selectable("refresh")を呼び出すまで計算されません。 たとえば、非常に多くの選択要素がある場合、falseを指定して、自動的に選択要素の状態の計算をしないようにし、必要な時点でselectable("refresh")を呼び出し再計算するようなときに使います。
  filter	String	"*"	Selectable要素の子孫要素のうち、どの要素を選択可能にするかを指定します。
  tolerance	String	"touch"	要素が選択されたと判定する方法を指定します。 パラメータ 意味 "fit" 要素が選択領域に完全に入った "touch" 要素が選択領域と接触した
  start	Function(e, ui)	なし	選択を開始したときに呼び出されるイベントハンドラ関数を指定します。
  stop	Function(e, ui)	なし	選択が終了したときに呼び出されるイベントハンドラ関数を指定します。
  selecting	Function(e, ui)	なし	選択可能な要素を選択中に呼び出されるイベントハンドラ関数を指定します。
  selected	Function(e, ui)	なし	選択可能な要素が選択済みになったときに呼び出されるイベントハンドラ関数を指定します。
  unselecting	Function(e, ui)	なし	選択可能な要素の選択が解除されるときに呼び出されるイベントハンドラ関数を指定します。
  unselected	Function(e, ui)	なし	選択可能な要素の選択が解除されたとに呼び出されるイベントハンドラ関数を指定します。

  
  

  イベントハンドラ関数

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

  プロパティ	説明
  options	Selectable要素に指定したオプションです。
  selectable	Selectable要素です。startイベントハンドラ関数、stopイベントハンドラ関数に渡されます。
  selecting	選択中の選択可能な要素です。selectingイベントハンドラ関数のみに渡されます。
  selected	選択済みの選択可能な要素です。selectedイベントハンドラ関数のみに渡されます。
  unselecting	選択を解除中の選択可能な要素です。unselectingイベントハンドラ関数のみに渡されます。
  unselected	選択を解除された選択可能な要素です。unselectedイベントハンドラ関数のみに渡されます。

戻り値

• jQuery: jQueryオブジェクト

例

例1:Selectable要素を生成します。

/* --- CSS --- */
// 選択中
.ui-selecting {border:1px dotted green; background-color: #f0fff0;}
// 選択済み
.ui-selected {border:1px solid green; background-color: #98fb98;}

// ul要素を選択可能にする
$("#test_result ul").selectable();

// 選択無効 → 選択可能にする
$("#enable").click(function(){$("#test_result ul").selectable("enable");});
// 選択可能 → 選択無効にする
$("#disable").click(function(){$("#test_result ul").selectable("disable");});
// 選択有効／無効状態を切り替える
$("#toggle").click(function(){$("#test_result ul").selectable("toggle");});
// 選択機能を破棄する
$("#destroy").click(function(){$("#test_result ul").selectable("destroy");});

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

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

クラス	状態
ui-selectable	Selectable要素
ui-selectable-disabled	選択無効

例）選択無効状態のSelectable要素

<Selectable要素 class="ui-selectable ui-selectable-disabled" />

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

クラス	状態
ui-selectee	選択可能な要素
ui-selecting	選択中
ui-selected	選択済み
ui-unselecting	選択解除中

例）選択中の選択可能な要素

<選択可能な要素 class="ui-selectee ui-selecting" />

.ui-selecting {border:1px dotted green; background-color: #f0fff0;}

$.data(選択可能な要素, "selectable-item");

selecting: function(e, ui) {
    var state = $.data(ui.selecting, "selectable-item");

    state.top;    // 要素のtop位置

}

ページトップヘ

ページトップヘ