jQuery UI - 可選擇元素

上一頁
下一頁

jQuery UI 提供 selectable() 方法來單獨或分組選擇 DOM 元素。使用此方法，可以透過滑鼠拖動方框（有時稱為套索）在元素上選擇元素。此外，還可以透過單擊或在按住 Ctrl/Meta 鍵的同時拖動來選擇元素，從而允許多個（非連續）選擇。

語法

selectable() 方法可以兩種形式使用：

$(selector, context).selectable (options) 方法

selectable (options) 方法宣告 HTML 元素包含可選擇的專案。options 引數是一個物件，用於指定選擇時所涉及元素的行為。

語法

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

您可以使用 Javascript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔，如下所示：

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

下表列出了可與此方法一起使用的不同options：

序號 選項及描述
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。

選項 - cancel

如果您開始選擇元素，此選項將禁止選擇。預設值為input,textarea,button,select,option。

語法

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

此選項用於設定毫秒數的時間，並定義何時應開始選擇。這可以用來防止不需要的選擇。預設值為0。

選項 - delay

此選項用於設定毫秒數的時間，並定義何時應開始選擇。這可以用來防止不需要的選擇。預設值為0。

語法

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

將此選項設定為 true 時，將停用選擇機制。在使用 selectable ("enable") 指令恢復機制之前，使用者無法選擇元素。預設值為false。

選項 - disabled

將此選項設定為 true 時，將停用選擇機制。在使用 selectable ("enable") 指令恢復機制之前，使用者無法選擇元素。預設值為false。

語法

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

此選項是滑鼠必須移動的距離（以畫素為單位），才能認為選擇正在進行中。例如，這對於防止簡單的點選被解釋為組選擇非常有用。預設值為0。

選項 - distance

此選項是滑鼠必須移動的距離（以畫素為單位），才能認為選擇正在進行中。例如，這對於防止簡單的點選被解釋為組選擇非常有用。預設值為0。

語法

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

此選項是一個選擇器，指示哪些元素可以是選擇的一部分。預設值為*。

選項 - filter

此選項是一個選擇器，指示哪些元素可以是選擇的一部分。預設值為*。

語法

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

此選項指定用於測試選擇輔助工具（套索）是否應選擇專案的模式。預設值為touch。

選項 - tolerance

此選項指定用於測試選擇輔助工具（套索）是否應選擇專案的模式。預設值為touch。

這可以是以下型別：

  • fit - 此型別表示拖動選擇必須完全包含一個元素才能被選中。

  • 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>

讓我們將上述程式碼儲存在一個名為selectableexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果：

嘗試點選產品，使用CTRLS鍵選擇多個產品。

使用延遲和距離

以下示例演示了在 jQuery UI 的 selectable 函式中使用兩個選項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>

讓我們將上述程式碼儲存在一個名為selectableexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果：

嘗試點選產品，使用 CTRL 鍵選擇多個產品。您會注意到，產品 1、產品 2 和產品 3 的選擇會在 1000 毫秒的延遲後開始。產品 4、產品 5、產品 6 和產品 7 無法單獨選擇。只有在滑鼠移動 100 畫素的距離後，選擇才會開始。

使用過濾器

以下示例演示了在 jQuery UI 的 selectable 函式中使用兩個選項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>

讓我們將上述程式碼儲存在一個名為selectableexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果：

嘗試點選產品。您會注意到，只能選擇第一個產品。

$(selector, context).selectable ("action", params) 方法

selectable ("action", params) 方法可以在可選元素上執行操作，例如阻止可選擇功能。操作在第一個引數中指定為字串（例如，“disable”以停止選擇）。查看下錶中可以傳遞的操作。

語法

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

下表列出了可與此方法一起使用的不同actions：

序號 操作及描述
1 destroy

此操作完全刪除元素的可選擇功能。元素恢復到其初始化前的狀態。

操作 - destroy

此操作完全刪除元素的可選擇功能。元素恢復到其初始化前的狀態。

語法

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

此操作停用元素的可選擇功能。此方法不接受任何引數。

操作 - disable

此操作完全刪除元素的可選擇功能。元素恢復到其初始化前的狀態。

語法

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

此操作啟用元素的可選擇功能。此方法不接受任何引數。

操作 - 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 )

此操作為可選擇元素設定一個或多個選項。引數options是要設定的選項-值對的對映。

操作 - option( options )

此操作為可選擇元素設定一個或多個選項。引數options是要設定的選項-值對的對映。

語法

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

此操作使可選擇元素的大小和位置重新整理。主要在autoRefresh 選項被停用（設定為false）時使用。此方法不接受任何引數。

操作 - refresh

此操作使可選擇元素的大小和位置重新整理。主要在autoRefresh 選項被停用時使用。此方法不接受任何引數。

語法

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

此操作返回一個包含可選擇元素的 jQuery 物件。此方法不接受任何引數。

操作 - widget

此操作返回一個包含可選擇元素的 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>

讓我們將上述程式碼儲存在一個名為selectableexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出：

嘗試點選產品，使用 CTRL 鍵選擇多個產品。您會注意到，產品 1、產品 2 和產品 3 被停用了。在滑鼠移動 1 畫素的距離後，產品 4、產品 5、產品 6 和產品 7 的選擇才會發生。

可選擇元素上的事件管理

除了我們在上一節中看到的 selectable (options) 方法外，jQuery UI 還提供事件方法，這些方法會在特定事件觸發時被觸發。這些事件方法列在下面：

序號 事件方法及描述
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。

事件 - selected(event, ui)

為每個被選中的元素觸發此事件。其中event 的型別為Event，ui 的型別為Object。ui 的可能值為：

  • selected - 指定已被選中的可選擇專案。

語法

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

為即將被選中的每個可選擇元素觸發此事件。其中event 的型別為Event，ui 的型別為Object。

事件 - selecting(event, 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。

事件 - stop(event, ui)

在選擇操作結束時觸發此事件。其中event 的型別為Event，ui 的型別為Object。

語法

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

在選擇操作結束時，為每個被取消選中的元素觸發此事件。其中event 的型別為Event，ui 的型別為Object。

事件 - unselected(event, ui)

在選擇操作結束時，為每個被取消選中的元素觸發此事件。其中event 的型別為Event，ui 的型別為Object。ui 的可能值為：

  • unselected - 包含對已取消選中元素的引用的元素。

語法

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

在選擇操作期間，為每個即將被取消選中的選中元素觸發此事件。其中event 的型別為Event，ui 的型別為Object。

事件 - unselecting(event, ui)

在選擇操作期間，為每個即將被取消選中的選中元素觸發此事件。其中event 的型別為Event，ui 的型別為Object。ui 的可能值為：

  • 取消選擇 − 包含即將取消選擇的元素引用的元素。

語法

$( ".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>

讓我們將上述程式碼儲存在一個名為selectableexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出：

嘗試點選產品，使用CTRL鍵選擇多個產品。您會注意到底部列印了所選的產品編號。

列印頁面
上一頁
下一頁
廣告
© . All rights reserved.