JqueryUI-選択可能

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

構文

ザ・ selectable() メソッドは2つの形式で使用できます-

  • $（selector、context）.selectable（options）メソッド

  • $（selector、context）.selectable（ "action"、params）メソッド

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

選択可能（オプション）メソッドは、HTML要素が選択可能な項目が含まれていることを宣言します。オプション時に選択要素の振る舞いが関与指定するオブジェクトであるパラメータ。

構文

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

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

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

次の表に、この方法で使用できるさまざまなオプションを示します。

シニア番号 オプションと説明
1 appendTo

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

Option - appendTo

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

Syntax

$( ".selector" ).selectable({ appendTo: "#identifier" });
2 自動更新

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

Option - autoRefresh

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

Syntax

$( ".selector" ).selectable({ autoRefresh: false });
3 キャンセル

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

Option - cancel

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

Syntax

$( ".selector" ).selectable({ cancel: "a,.cancel" });
4 ディレイ

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

Option - delay

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

Syntax

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

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

Option - disabled

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

Syntax

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

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

Option - distance

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

Syntax

$( ".selector" ).selectable({ distance: 30 });
7 フィルタ

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

Option - filter

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

Syntax

$( ".selector" ).selectable({ filter: "li" });
8 許容範囲

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

Option - tolerance

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

これはタイプの可能性があります-

  • fit −このタイプは、ドラッグ選択が選択される要素を完全に包含する必要があることを示します。

  • touch −このタイプは、ドラッグ長方形が選択可能なアイテムの任意の部分と交差するだけでよいことを示します。

Syntax

$( ".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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

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

遅延と距離の使用

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

<!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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

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

フィルターの使用

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

<!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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

製品をクリックしてみてください。最初の製品のみを選択できることに気付くでしょう。

$（selector、context）.selectable（ "action"、params）メソッド

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

構文

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

次の表に、この方法で使用できるさまざまなアクションを示します。

シニア番号 アクションと説明
1 破壊

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

Action - destroy

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

Syntax

$( ".selector" ).selectable("destroy");
2 無効にする

このアクションは、要素の選択可能な機能を非アクティブにします。このメソッドは引数を受け入れません。

Action - disable

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

Syntax

$( ".selector" ).selectable("disable");
3 有効にする

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

Action - enable

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

Syntax

$( ".selector" ).selectable("enable");
4 option（optionName）

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

Action - option( optionName )

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

Syntax

var isDisabled = $( ".selector" ).selectable( "option", "disabled" );
5 オプション（）

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

Action - option()

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

Syntax

var options = $( ".selector" ).selectable( "option" );
6 option（optionName、value）

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

Action - option( optionName, value )

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

Syntax

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

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

Action - option( options )

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

Syntax

$( ".selector" ).selectable( "option", { disabled: true } );
8 リフレッシュ

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

Action - refresh

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

Syntax

$( ".selector" ).selectable("refresh");
9 ウィジェット

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

Action - widget

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

Syntax

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.htm javascriptをサポートする標準のブラウザで開くと、次の出力が表示されます-

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

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

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

シニア番号 イベントの方法と説明
1 create（event、ui）

このイベントは、選択可能な要素が作成されたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。

Event - create(event, ui)

このイベントは、選択可能な要素が作成されたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。

Syntax

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

このイベントは、選択される要素ごとにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。

Event - selected(event, ui)

このイベントは、選択される要素ごとにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。

  • selected −これは選択された選択可能なアイテムを指定します。

Syntax

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

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

Event - selecting(event, ui)

このイベントは、選択されようとしている選択可能な要素ごとにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。

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

Syntax

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

このイベントは、選択操作の開始時にトリガーされます。ここで、eventはEvent型であり、uiはObject型です。

Event - start(event, ui)

このイベントは、選択操作の開始時にトリガーされます。ここで、eventはEvent型であり、uiはObject型です。

Syntax

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

このイベントは、選択操作の最後にトリガーされます。ここで、eventはEvent型であり、uiはObject型です。

Event - stop(event, ui)

このイベントは、選択操作の最後にトリガーされます。ここで、eventはEvent型であり、uiはObject型です。

Syntax

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

このイベントは、選択解除された各要素の選択操作の最後にトリガーされます。ここで、eventはEvent型であり、uiはObject型です。

Event - unselected(event, ui)

このイベントは、選択解除された各要素の選択操作の最後にトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。

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

Syntax

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

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

Event - unselecting(event, ui)

このイベントは、選択解除されようとしている選択された各要素の選択操作中にトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。

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

Syntax

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

例

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

<!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.htm javascriptをサポートする標準のブラウザで開くと、次の出力が表示されます-

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

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved