Jqueryui-selectable

提供：Dev Guides
移動先:案内、検索

JqueryUI-選択可能

jQueryUIは、DOM要素を個別にまたはグループで選択するselectable（）メソッドを提供します。 この方法では、要素上でマウスを使用してボックス（なげなわとも呼ばれる）をドラッグすることで要素を選択できます。 また、Ctrl/Metaキーを押しながらクリックまたはドラッグして要素を選択できるため、複数の（連続しない）選択が可能です。

構文

  • selectable（）*メソッドは2つの形式で使用できます-
  • link：/jqueryui/jqueryui_selectable＃selectable_options [$（selector、context）.selectable（options）]メソッド
  • link：/jqueryui/jqueryui_selectable＃selectable_methods [$（selector、context）.selectable（ "action"、params）]メソッド

[selectable_options]#

$（セレクター、コンテキスト）.selectable（オプション）メソッド

_selectable（options）_メソッドは、HTML要素に選択可能な項目が含まれていることを宣言します。 _options_パラメーターは、選択時に関係する要素の動作を指定するオブジェクトです。

構文

$(selector, context).selectable (options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。 提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します- 

$(selector, context).selectable({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-

Sr.No. Option & Description
1

appendTo

このオプションは、選択ヘルパー（なげなわ）を追加する要素を示します。 デフォルトでは、その値は body です。

  • オプション-appendTo *

このオプションは、選択ヘルパー（なげなわ）を追加する要素を示します。 デフォルトでは、その値は body です。

構文 

$( ".selector" ).selectable({ appendTo: "#identifier" });
2

autoRefresh

このオプションを_true_に設定すると、選択可能な各アイテムの位置とサイズは、選択操作の開始時に計算されます。 デフォルトでは、その値は true です。

  • オプション-autoRefresh *

このオプションを_true_に設定すると、選択可能な各アイテムの位置とサイズは、選択操作の開始時に計算されます。 デフォルトでは、その値は true です。 多数のアイテムがある場合、これを_false_に設定し、_refresh（）_メソッドを手動で呼び出すことができます。

構文 

$( ".selector" ).selectable({ autoRefresh: false });
3

cancel

このオプションは、要素の選択を開始する場合、選択を禁止します。 デフォルトでは、その値は input、textarea、button、select、option です。

オプション-キャンセル

このオプションは、要素の選択を開始する場合、選択を禁止します。 デフォルトでは、その値は input、textarea、button、select、option です。

構文 

$( ".selector" ).selectable({ cancel: "a,.cancel" });
4

delay

このオプションは、ミリ秒単位で時間を設定し、選択を開始するタイミングを定義するために使用されます。 これは、不要な選択を防ぐために使用できます。 デフォルトでは、その値は 0 です。

オプション-遅延

このオプションは、ミリ秒単位で時間を設定し、選択を開始するタイミングを定義するために使用されます。 これは、不要な選択を防ぐために使用できます。 デフォルトでは、その値は 0 です。

構文 

$( ".selector" ).selectable({ delay: 150 });
5

disabled

このオプションをtrueに設定すると、選択メカニズムが無効になります。 ユーザーは、選択可能（「有効」）命令を使用してメカニズムが復元されるまで要素を選択できません。 デフォルトでは、その値は false です。

オプション-無効

このオプションをtrueに設定すると、選択メカニズムが無効になります。 ユーザーは、選択可能（「有効」）命令を使用してメカニズムが復元されるまで要素を選択できません。 デフォルトでは、その値は false です。

構文 

$( ".selector" ).selectable({ disabled: true });
6

distance

このオプションは、進行中の選択を考慮するためにマウスが移動する必要がある距離（ピクセル単位）です。 これは、たとえば、単純なクリックがグループ選択として解釈されるのを防ぐのに役立ちます。 デフォルトでは、その値は 0 です。

オプション-距離

このオプションは、進行中の選択を考慮するためにマウスが移動する必要がある距離（ピクセル単位）です。 これは、たとえば、単純なクリックがグループ選択として解釈されるのを防ぐのに役立ちます。 デフォルトでは、その値は 0 です。

構文 

$( ".selector" ).selectable({ distance: 30 });
7

filter

このオプションは、選択の一部にできる要素を示すセレクターです。 デフォルトでは、その値は***です。

オプション-フィルター

このオプションは、選択の一部にできる要素を示すセレクターです。 デフォルトでは、その値は***です。

構文 

$( ".selector" ).selectable({ filter: "li" });
8

tolerance

このオプションは、選択ヘルパー（なげなわ）がアイテムを選択するかどうかをテストするために使用するモードを指定します。 デフォルトでは、その値は touch です。

オプション-公差

このオプションは、選択ヘルパー（なげなわ）がアイテムを選択するかどうかをテストするために使用するモードを指定します。 デフォルトでは、その値は touch です。

これはタイプにすることができます-

  • フィット-このタイプは、ドラッグ選択が選択されるために要素を完全に包含しなければならないことを示します。
  • touch -このタイプは、ドラッグ長方形が選択可能なアイテムのどの部分とも交差する必要があることを示します。

構文 

$( ".selector" ).selectable({ tolerance: "fit" });

次のセクションでは、選択可能な機能のいくつかの実用例を示します。

デフォルトの機能

次の例は、* selectable（）*メソッドにパラメーターを渡さない、選択可能な機能の簡単な例を示しています。 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-1</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #selectable-1 .ui-selecting { background: #707070 ; }
         #selectable-1 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-1 { list-style-type: none; margin: 0;
            padding: 0; width: 20%; }
         #selectable-1 li { margin: 3px; padding: 0.4em;
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-1" ).selectable();
         });
      </script>
   </head>

   <body>
      <ol id = "selectable-1">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

上記のコードをHTMLファイル selectableexample に保存し、JavaScriptをサポートする標準のブラウザーで開くと、次の出力が表示されます。 今、あなたは結果で遊ぶことができます-

製品をクリックして、CTRLSキーを使用して複数の製品を選択してください。

遅延と距離の使用

次の例は、JqueryUIの選択可能な関数で2つのオプション delay および distance を使用する方法を示しています。 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Selectable</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #selectable-2 .ui-selecting,#selectable-3 .ui-selecting {
            background: #707070 ; }
         #selectable-2 .ui-selected,#selectable-3 .ui-selected {
            background: #EEEEEE; color: #000000; }
         #selectable-2,#selectable-3 { list-style-type: none; margin: 0;
            padding: 0; width: 20%; }
         #selectable-2 li,#selectable-3 li { margin: 3px; padding: 0.4em;
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>

      <script>
         $(function() {
            $( "#selectable-2" ).selectable({
               delay : 1000
            });
            $( "#selectable-3" ).selectable({
               distance : 100
            });
         });
      </script>
   </head>

   <body>
      <h3>Starts after delay of 1000ms</h3>
      <ol id = "selectable-2">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
      </ol>
      <h3>Starts after mouse moves distance of 100px</h3>
      <ol id = "selectable-3">
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

上記のコードをHTMLファイル selectableexample に保存し、JavaScriptをサポートする標準のブラウザーで開くと、次の出力が表示されます。 今、あなたは結果で遊ぶことができます-

製品をクリックして、CTRLキーを使用して複数の製品を選択してください。 製品1、製品2、および製品3の選択は、1000ミリ秒の遅延後に開始されます。 製品4、製品5、製品6、および製品7を個別に選択することはできません。 マウスが100pxの距離を移動した後にのみ、選択が開始されます。

フィルターの使用

次の例は、JqueryUIの選択可能な関数で2つのオプション delay および distance を使用する方法を示しています。 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-4</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #selectable-4 .ui-selecting { background: #707070 ; }
         #selectable-4 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-4 { list-style-type: none; margin: 0;
            padding: 0; width: 20%; }
         #selectable-4 li { margin: 3px; padding: 0.4em;
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>

      <script>
         $(function() {
            $( "#selectable-4" ).selectable({
               filter : "li:first-child"
            });
         });
      </script>
   </head>

   <body>
      <ol id = "selectable-4">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

上記のコードをHTMLファイル selectableexample に保存し、JavaScriptをサポートする標準のブラウザーで開くと、次の出力が表示されます。 今、あなたは結果で遊ぶことができます-

製品をクリックしてみてください。 最初の製品のみを選択できます。

[selectable_methods]#

$（セレクター、コンテキスト）.selectable（ "action"、params）メソッド

_selectable（ "action"、params）_メソッドは、選択可能な機能の防止など、選択可能な要素に対してアクションを実行できます。 アクションは、最初の引数に文字列として指定されます（たとえば、選択を停止するには「無効」）。 次の表で、渡すことができるアクションを確認してください。

構文

$(selector, context).selectable ("action", params);;

次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-

Sr.No. Action & Description
1

destroy

このアクションにより、要素の選択可能な機能が完全に削除されます。 要素は初期化前の状態に戻ります。

アクション-破壊

このアクションにより、要素の選択可能な機能が完全に削除されます。 要素は初期化前の状態に戻ります。

構文 

$( ".selector" ).selectable("destroy");
2

disable

このアクションは、要素の選択可能な機能を無効にします。 このメソッドは引数を取りません。

アクション-無効

このアクションにより、要素の選択可能な機能が完全に削除されます。 要素は初期化前の状態に戻ります。

構文 

$( ".selector" ).selectable("disable");
3

enable

このアクションにより、要素の選択可能な機能が有効になります。 このメソッドは引数を取りません。

アクション-有効

このアクションにより、要素の選択可能な機能が有効になります。 このメソッドは引数を取りません。

構文 

$( ".selector" ).selectable("enable");
4

option( optionName )

このアクションは、指定された_optionName_に現在関連付けられている値を取得します。

アクション-option（optionName）

このアクションは、指定された_optionName_に現在関連付けられている値を取得します。

構文 

var isDisabled = $( ".selector" ).selectable( "option", "disabled" );
5

option()

このアクションは、現在の選択可能なオプションのハッシュを表すキー/値のペアを含むオブジェクトを取得します。

アクション-option（）

このアクションは、現在の選択可能なオプションのハッシュを表すキー/値のペアを含むオブジェクトを取得します。

構文 

var options = $( ".selector" ).selectable( "option" );
6

option( optionName, value )

このアクションは、指定された_optionName_に関連付けられた選択可能なオプションの値を設定します。 引数_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。

アクション-option（optionName、value）

このアクションは、指定された_optionName_に関連付けられた選択可能なオプションの値を設定します。 引数_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。

構文 

$( ".selector" ).selectable( "option", "disabled", true );
7

option( options )

このアクションは、選択可能の1つ以上のオプションを設定します。 引数_options_は、設定するオプションと値のペアのマップです。

アクション-オプション（オプション）

このアクションは、選択可能の1つ以上のオプションを設定します。 引数_options_は、設定するオプションと値のペアのマップです。

構文 

$( ".selector" ).selectable( "option", { disabled: true } );
8

refresh

このアクションにより、選択可能な要素のサイズと位置が更新されます。 主に_autoRefresh_オプションが無効になっている（_false_に設定されている）ときに使用されます。 このメソッドは引数を取りません。

アクション-更新

このアクションにより、選択可能な要素のサイズと位置が更新されます。 ほとんどの場合、_autoRefresh_オプションが無効になっています。 このメソッドは引数を取りません。

構文 

$( ".selector" ).selectable("refresh");
9

widget

このアクションは、選択可能な要素を含むjQueryオブジェクトを返します。 このメソッドは引数を取りません。

アクション-ウィジェット

このアクションは、選択可能な要素を含むjQueryオブジェクトを返します。 このメソッドは引数を取りません。

構文 

var widget = $( ".selector" ).selectable( "widget" );

例

ここで、上の表のアクションを使用した例を見てみましょう。 次の例は、_disable（）_および_option（optionName、value）_メソッドの使用方法を示しています。 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Selectable</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #selectable-5 .ui-selecting,#selectable-6 .ui-selecting {
            background: #707070 ; }
         #selectable-5 .ui-selected,#selectable-6 .ui-selected {
            background: #EEEEEE; color: #000000; }
         #selectable-5,#selectable-6 {
            list-style-type: none; margin: 0; padding: 0; width: 20%; }
         #selectable-5 li,#selectable-6 li {
            margin: 3px; padding: 0.4em; font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>

      <script>
         $(function() {
            $( "#selectable-5" ).selectable();
            $( "#selectable-5" ).selectable('disable');
            $( "#selectable-6" ).selectable();
            $( "#selectable-6" ).selectable( "option", "distance", 1 );
         });
      </script>
   </head>

   <body>
      <h3>Disabled using disable() method</h3>
      <ol id = "selectable-5">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
      </ol>
      <h3>Select using method option( optionName, value )</h3>
      <ol id = "selectable-6">
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

上記のコードをHTMLファイル selectableexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力が表示されます-

製品をクリックして、CTRLキーを使用して複数の製品を選択してください。 製品1、製品2、および製品3が無効になっていることがわかります。 製品4、製品5、製品6、および製品7の選択は、マウスが1ピクセルの距離を移動した後に行われます。

選択可能な要素のイベント管理

前のセクションで見た選択可能（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。 これらのイベントメソッドは以下のとおりです-

Sr.No. Event Method & Description
1

create(event, ui)

このイベントは、選択可能な要素が作成されるとトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-create（event、ui）

このイベントは、選択可能な要素が作成されるとトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

構文 

$( ".selector" ).selectable({
   create: function( event, ui ) {}
});
2

selected(event, ui)

このイベントは、選択される要素ごとにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-選択（イベント、UI）

このイベントは、選択される要素ごとにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • selected -これは、選択された選択可能な項目を指定します。

構文 

$( ".selector" ).selectable({
   selected: function( event, ui ) {}
});
3

selecting(event, ui)

このイベントは、選択されようとしている選択可能な要素ごとにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-選択（イベント、UI）

このイベントは、選択されようとしている選択可能な要素ごとにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • selecting -これは、選択されようとしている要素への参照を指定します。

構文 

$( ".selector" ).selectable({
   selecting: function( event, ui ) {}
});
4

start(event, ui)

このイベントは、選択操作の開始時にトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-start（event、ui）

このイベントは、選択操作の開始時にトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

構文 

$( ".selector" ).selectable({
   start: function( event, ui ) {}
});
5

stop(event, ui)

このイベントは、選択操作の終了時にトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-停止（イベント、UI）

このイベントは、選択操作の終了時にトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

構文 

$( ".selector" ).selectable({
   stop: function( event, ui ) {}
});
6

unselected(event, ui)

このイベントは、選択されなくなった各要素の選択操作の終了時にトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-未選択（イベント、UI）

このイベントは、選択されなくなった各要素の選択操作の終了時にトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • unselected -選択解除された要素への参照を含む要素。

構文 

$( ".selector" ).selectable({
   unselected: function( event, ui ) {}
});
7

unselecting(event, ui)

このイベントは、選択解除されようとしている選択された各要素の選択操作中にトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-選択解除（イベント、UI）

このイベントは、選択解除されようとしている選択された各要素の選択操作中にトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • unselecting -選択解除されようとしている要素への参照を含む要素。

構文 

$( ".selector" ).selectable({
   unselecting: function( event, ui ) {}
});

例

次の例は、選択可能な機能中のイベントメソッドの使用方法を示しています。 この例は、_selected_イベントの使用方法を示しています。 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-7</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #selectable-7 .ui-selecting { background: #707070 ; }
         #selectable-7 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-7 { list-style-type: none; margin: 0;
            padding: 0; width: 20%; }
         #selectable-7 li { margin: 3px; padding: 0.4em;
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>

      <script>
         $(function() {
            $( "#selectable-7" ).selectable({
               selected: function() {
                  var result = $( "#result" ).empty();
                  $( ".ui-selected", this ).each(function() {
                     var index = $( "#selectable-7 li" ).index( this );
                     result.append( " #" + ( index + 1 ) );
                  });
               }
            });
         });
      </script>
   </head>

   <body>
      <h3>Events</h3>
      <ol id = "selectable-7">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
      <span class = "resultarea">Selected Product</span>>
      <span id = result class = "resultarea"></span>
   </body>
</html>

上記のコードをHTMLファイル selectableexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力が表示されます-

製品をクリックして、CTRLキーを使用して複数の製品を選択してください。 選択した製品番号が下部に印刷されていることがわかります。

「https://www.finddevguides.com/index.php?title=Jqueryui-selectable&oldid=2348」から取得
Powered by MediaWiki