マウスで個別、またはグループで選択できる要素にします。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable();
});
</script>
</head>
<body>
<ol id="selectable">
<li class="ui-widget-content">項目 1</li>
<li class="ui-widget-content">項目 2</li>
<li class="ui-widget-content">項目 3</li>
<li class="ui-widget-content">項目 4</li>
<li class="ui-widget-content">項目 5</li>
<li class="ui-widget-content">項目 6</li>
<li class="ui-widget-content">項目 7</li>
</ol>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Display as grid</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable();
});
</script>
</head>
<body>
<ol id="selectable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ol>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Serialize</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
</script>
</head>
<body>
<p id="feedback">
<span>選択項目:</span> <span id="select-result">無し</span>.
</p>
<ol id="selectable">
<li class="ui-widget-content">項目 1</li>
<li class="ui-widget-content">項目 2</li>
<li class="ui-widget-content">項目 3</li>
<li class="ui-widget-content">項目 4</li>
<li class="ui-widget-content">項目 5</li>
<li class="ui-widget-content">項目 6</li>
</ol>
</body>
</html>
jQuery UI Selectableプラグインは、ドラッグによるボックスでの要素選択(投げ縄とも呼ばれます)の機能を提供します。
また、ctrl、metaキーを押しながらのクリックまはたドラッグで、離れた場所の複数の要素の選択をすることも可能です。
このウィジットはいくつかの機能的なCSSを必要とします。
このCSSが読み込めないと機能しないため、最初に必要とするCSSを読み込むようにしてください。
| オプション |
説明 |
| appendTo |
型：Selector
初期値："body"
選択ヘルパー(投げ縄)を挿入する要素を指定します。
$( ".selector" ).selectable({ appendTo: "#someElem" });
// getter
var appendTo = $( ".selector" ).selectable( "option", "appendTo" );
// setter
$( ".selector" ).selectable( "option", "appendTo", "#someElem" );
|
| autoRefresh |
型：Boolean
初期値：true
各選択操作を開始した際に、選択要素の位置・サイズをリフレッシュ(再計算)するかどうかを決定します。
多くの選択要素が存在する場合、このオプションをfalseに指定して、手動でrefresh()メソッドを呼び出すことをおすすめします。
|
| cancel |
型：Selector
初期値："input,textarea,button,select,option"
選択操作で対象となっても、選択状態になることをキャンセルする要素を
セレクターで指定します。
|
| delay |
型：Integer
初期値：0
選択操作を開始する時間をミリ秒単位で指定します。
要素をクリックしたときに不要な選択を防ぐのに役立ちます。
|
| disabled |
型：Boolean
初期値：false
trueを指定すると、選択機能を無効化します。
|
| distance |
型:Number
初期値:1
選択が開始されるまで、マウスを動かす必要のある距離をピクセル単位で指定します。
要素をクリックしたときに不要な選択を防ぐのに役立ちます。
|
| filter |
型:Selector
初期値:"*"
選択される子要素をセレクターによってフィルタリングします。
|
| tolerance |
型:String
初期値:"touch"
選択ボックス(投げ縄)と各選択対象要素が、どういった状況で選択状態になるか
モードを指定します。
- "fit"
-
完全に重なったら、選択状態にする。
- "touch"
-
少しでも重なったら、選択状態にする。
|
| メソッド | 説明 |
| destroy() |
選択機能を完全に削除します。
$( ".selector" ).droppable( "destroy" );
|
| disable() |
選択機能を無効化します。
|
| enable() |
選択機能を有効にします。
|
| option( optionName ) |
戻り値：Object
optionNameに指定したオプションの現在の値を取得します。
- optionName
-
型：
String
取得したいオプションの名前を指定します。
|
| option() |
戻り値：PlainObject
オプションの各キーと値がペアとなったオブジェクトを返します。
|
| option( optionName, value ) |
引数のoptionNameのオプションに値を設定します。
- optionName
-
型：
String
設定したいオプションの名前を指定します。
- value
-
型：
Object
設定したい値を指定します。
|
| option( options ) |
オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。
- option
-
型：
Object
設定したいオプションのキーと名前のペアを指定します。
|
| refresh() |
各選択要素の位置とサイズをリフレッシュ(再計算)します。
このオプションはautoRefreshオプションをfalseにして、手動で各選択要素の
位置とサイズの再計算をしたい場合に有用です。
|
| widget() |
戻り値：Object
選択機能を含めたjQueryオブジェクトを返します。
|
| イベント |
説明 |
| create( event, ui ) |
型：selectablecreate
ドロップ受け入れ要素が生成された際にトリガされます。
$( ".selector" ).selectable({
create: function( event, ui ) {}
});
$( ".selector" ).on( "selectablecreate", function( event, ui ) {} );
|
| selected( event, ui ) |
型：selectableselected
各要素が選択要素に加えられ、選択操作が完了した際にトリガされます。
- ui.selected
-
型:
Element
選択された要素です。
|
| selecting( event, ui ) |
型：selectableselecting
各要素が選択要素に加えられる、選択操作中にトリガされます。
- ui.selecting
-
型:
Element
選択された要素です。
|
| start( event, ui ) |
型：selectablestart
選択操作を開始する際にトリガされます。
|
| stop( event, ui ) |
型：selectablestop
選択操作を終了する際にトリガされます。
|
| unselected( event, ui ) |
型：selectableunselected
各要素が選択要素から外され、選択操作が完了した際にトリガされます。
- ui.unselected
-
型:
Element
非選択になった要素です。
|
| unselecting( event, ui ) |
型：selectableunselecting
各要素が選択要素から外される、選択操作中にトリガされます。
- ui.unselecting
-
型:
Element
非選択にされた要素です。
|
Back to top
© 2010 - 2017 STUDIO KINGDOM