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イベントハンドラ関数のみに渡されます。 |
戻り値
例
例1:Selectable要素を生成します。
.ui-selecting {border:1px dotted green; background-color: #f0fff0;}
.ui-selected {border:1px solid green; background-color: #98fb98;}
$("#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" />
選択可能な要素のCSS設定
選択可能な要素には、状態に応じたクラスが設定されます。
クラスに対応するCSSを設定しないと、選択状態の視覚的なフィードバックはありません。
例)選択中の選択可能な要素のCSSを設定する
.ui-selecting {border:1px dotted green; background-color: #f0fff0;}
選択可能な要素が持つ内部データ
autoRefreshがtrueの場合や、selectable("refresh")を呼び出して計算される値は、次の呼び出しで取得することが出来ます。
$.data(選択可能な要素, "selectable-item");
上記呼び出しが返すオブジェクトは、次のプロパティを保持します。
プロパティ | 説明 |
element | 選択可能な要素 |
top | 要素のtop位置 |
left | 要素のleft位置 |
right | 要素のright位置 |
bottom | 要素のbottom位置 |
selected | 選択済みかどうか |
selecting | 選択中かどうか |
unselecting | 選択が解除中かどうか |
たとえば、selectingイベントハンドラ関数では、以下のようにして選択要素の状態を取得することができます。
selecting: function(e, ui) {
var state = $.data(ui.selecting, "selectable-item");
state.top;
}
|