JqueryUI - Có thể lựa chọn

jQueryUI cung cấp phương thức selectable () để chọn phần tử DOM riêng lẻ hoặc trong một nhóm. Với phương pháp này, các phần tử có thể được chọn bằng cách kéo một hộp (đôi khi được gọi là lasso) bằng chuột qua các phần tử. Ngoài ra, các phần tử có thể được chọn bằng cách nhấp hoặc kéo trong khi giữ phím Ctrl / Meta, cho phép nhiều lựa chọn (không liền kề).

Cú pháp

Các selectable() phương pháp có thể được sử dụng ở hai dạng:

  • $ (bộ chọn, ngữ cảnh) .selectable (tùy chọn) Phương thức

  • $ (selector, ngữ cảnh) .selectable ( "hành động", params) Phương pháp

$ (bộ chọn, ngữ cảnh) .selectable (tùy chọn) Phương thức

Phương thức có thể chọn (tùy chọn) khai báo rằng một phần tử HTML chứa các mục có thể chọn. Các tùy chọn tham số là một đối tượng mà quy định cụ thể các hành vi của các yếu tố có liên quan khi lựa chọn.

Cú pháp

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

Bạn có thể cung cấp một hoặc nhiều tùy chọn cùng một lúc bằng cách sử dụng đối tượng Javascript. Nếu có nhiều tùy chọn được cung cấp, thì bạn sẽ phân tách chúng bằng dấu phẩy như sau:

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

Bảng sau liệt kê các tùy chọn khác nhau có thể được sử dụng với phương pháp này:

Sr.No. Tùy chọn & Mô tả
1 appendTo

Tùy chọn này cho biết phần tử nào mà trình trợ giúp lựa chọn (lasso) nên được thêm vào. Theo mặc định, giá trị của nó làbody.

Option - appendTo

Tùy chọn này cho biết phần tử nào mà trình trợ giúp lựa chọn (lasso) nên được thêm vào. Theo mặc định, giá trị của nó làbody.

Syntax

$( ".selector" ).selectable({ appendTo: "#identifier" });
2 tự động làm mới

Tùy chọn này nếu được đặt thành true , vị trí và kích thước của mỗi mục có thể chọn được tính khi bắt đầu thao tác chọn. Theo mặc định, giá trị của nó làtrue.

Option - autoRefresh

Tùy chọn này nếu được đặt thành true , vị trí và kích thước của mỗi mục có thể chọn được tính khi bắt đầu thao tác chọn. Theo mặc định, giá trị của nó làtrue. Nếu bạn có nhiều mục, bạn có thể muốn đặt giá trị này thành false và gọi phương thức refresh () theo cách thủ công.

Syntax

$( ".selector" ).selectable({ autoRefresh: false });
3 hủy bỏ

Tùy chọn này cấm chọn nếu bạn bắt đầu chọn các phần tử. Theo mặc định, giá trị của nó làinput,textarea,button,select,option.

Option - cancel

Tùy chọn này cấm chọn nếu bạn bắt đầu chọn các phần tử. Theo mặc định, giá trị của nó làinput,textarea,button,select,option.

Syntax

$( ".selector" ).selectable({ cancel: "a,.cancel" });
4 sự chậm trễ

Tùy chọn này được sử dụng để đặt thời gian tính bằng mili giây và xác định thời điểm bắt đầu lựa chọn. Điều này có thể được sử dụng để ngăn các lựa chọn không mong muốn. Theo mặc định, giá trị của nó là0.

Option - delay

Tùy chọn này được sử dụng để đặt thời gian tính bằng mili giây và xác định thời điểm bắt đầu lựa chọn. Điều này có thể được sử dụng để ngăn các lựa chọn không mong muốn. Theo mặc định, giá trị của nó là0.

Syntax

$( ".selector" ).selectable({ delay: 150 });
5 tàn tật

Tùy chọn này khi được đặt thành true, sẽ tắt cơ chế lựa chọn. Người dùng không thể chọn các phần tử cho đến khi cơ chế được khôi phục bằng lệnh có thể chọn ("bật"). Theo mặc định, giá trị của nó làfalse.

Option - disabled

Tùy chọn này khi được đặt thành true, sẽ tắt cơ chế lựa chọn. Người dùng không thể chọn các phần tử cho đến khi cơ chế được khôi phục bằng lệnh có thể chọn ("bật"). Theo mặc định, giá trị của nó làfalse.

Syntax

$( ".selector" ).selectable({ disabled: true });
6 khoảng cách

Tùy chọn này là khoảng cách (tính bằng pixel) chuột phải di chuyển để xem xét lựa chọn đang diễn ra. Điều này rất hữu ích, chẳng hạn, để ngăn các nhấp chuột đơn giản được hiểu là lựa chọn nhóm. Theo mặc định, giá trị của nó là0.

Option - distance

Tùy chọn này là khoảng cách (tính bằng pixel) chuột phải di chuyển để xem xét lựa chọn đang diễn ra. Điều này rất hữu ích, chẳng hạn, để ngăn các nhấp chuột đơn giản được hiểu là lựa chọn nhóm. Theo mặc định, giá trị của nó là0.

Syntax

$( ".selector" ).selectable({ distance: 30 });
7 bộ lọc

Tùy chọn này là một bộ chọn cho biết phần tử nào có thể là một phần của vùng chọn. Theo mặc định, giá trị của nó là*.

Option - filter

Tùy chọn này là một bộ chọn cho biết phần tử nào có thể là một phần của vùng chọn. Theo mặc định, giá trị của nó là*.

Syntax

$( ".selector" ).selectable({ filter: "li" });
số 8 lòng khoan dung

Tùy chọn này chỉ định chế độ nào sẽ sử dụng để kiểm tra xem trình trợ giúp lựa chọn (lasso) có nên chọn một mục hay không. Theo mặc định, giá trị của nó làtouch.

Option - tolerance

Tùy chọn này chỉ định chế độ nào sẽ sử dụng để kiểm tra xem trình trợ giúp lựa chọn (lasso) có nên chọn một mục hay không. Theo mặc định, giá trị của nó làtouch.

Điều này có thể thuộc loại -

  • fit - Kiểu này cho biết vùng chọn kéo phải bao gồm hoàn toàn một phần tử để nó được chọn.

  • touch - Kiểu này cho biết hình chữ nhật kéo chỉ cần cắt bất kỳ phần nào của mục có thể chọn.

Syntax

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

Phần sau đây sẽ cho bạn thấy một vài ví dụ hoạt động về chức năng có thể chọn.

Chức năng mặc định

Ví dụ sau minh họa một ví dụ đơn giản về chức năng có thể chọn, không chuyển tham số nào cho selectable() phương pháp.

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

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML selectableexample.htmvà mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Cố gắng nhấp vào sản phẩm, sử dụng phím CTRLS để chọn nhiều sản phẩm.

Sử dụng độ trễ và khoảng cách

Ví dụ sau minh họa việc sử dụng hai tùy chọn delay và distance trong chức năng có thể chọn của 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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML selectableexample.htmvà mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Cố gắng nhấp vào sản phẩm, sử dụng phím CTRL để chọn nhiều sản phẩm. Bạn sẽ nhận thấy rằng lựa chọn Sản phẩm 1, Sản phẩm 2 và Sản phẩm 3 bắt đầu sau độ trễ 1000 mili giây. Việc lựa chọn Sản phẩm 4, Sản phẩm 5, Sản phẩm 6 và Sản phẩm 7 không thể được thực hiện riêng lẻ. Vùng chọn chỉ bắt đầu sau khi chuột di chuyển một khoảng cách 100px.

Sử dụng bộ lọc

Ví dụ sau minh họa việc sử dụng hai tùy chọn delay và distance trong chức năng có thể chọn của 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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML selectableexample.htmvà mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Cố gắng nhấp vào sản phẩm. Bạn sẽ nhận thấy rằng chỉ có thể chọn sản phẩm đầu tiên.

Phương thức $ (selector, context) .selectable ("action", params)

Phương thức có thể chọn ("hành động", tham số) có thể thực hiện một hành động trên các phần tử có thể chọn, chẳng hạn như ngăn chặn chức năng có thể chọn. Hành động được chỉ định dưới dạng một chuỗi trong đối số đầu tiên (ví dụ: "vô hiệu hóa" để dừng lựa chọn). Kiểm tra các hành động có thể được thông qua, trong bảng sau.

Cú pháp

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

Bảng sau liệt kê các hành động khác nhau có thể được sử dụng với phương pháp này:

Sr.No. Mô tả hành động
1 hủy hoại

Hành động này sẽ loại bỏ hoàn toàn chức năng có thể chọn của một phần tử. Các phần tử trở lại trạng thái pre-init của chúng.

Action - destroy

Hành động này sẽ loại bỏ hoàn toàn chức năng có thể chọn của một phần tử. Các phần tử trở lại trạng thái pre-init của chúng.

Syntax

$( ".selector" ).selectable("destroy");
2 vô hiệu hóa

Hành động này vô hiệu hóa chức năng có thể chọn của một phần tử. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - disable

Hành động này sẽ loại bỏ hoàn toàn chức năng có thể chọn của một phần tử. Các phần tử trở lại trạng thái pre-init của chúng.

Syntax

$( ".selector" ).selectable("disable");
3 kích hoạt

Hành động này kích hoạt chức năng có thể chọn của một phần tử. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - enable

Hành động này kích hoạt chức năng có thể chọn của một phần tử. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

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

Hành động này nhận giá trị hiện được liên kết với optionName được chỉ định .

Action - option( optionName )

Hành động này nhận giá trị hiện được liên kết với optionName được chỉ định .

Syntax

var isDisabled = $( ".selector" ).selectable( "option", "disabled" );
5 Lựa chọn()

Hành động này nhận một đối tượng chứa các cặp khóa / giá trị đại diện cho hàm băm các tùy chọn có thể chọn hiện tại.

Action - option()

Hành động này nhận một đối tượng chứa các cặp khóa / giá trị đại diện cho hàm băm các tùy chọn có thể chọn hiện tại.

Syntax

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

Hành động này đặt giá trị của các tùy chọn có thể lựa chọn liên quan đến việc xác định optionName . Đối số optionName là tên của tùy chọn được đặt và giá trị là giá trị được đặt cho tùy chọn.

Action - option( optionName, value )

Hành động này đặt giá trị của các tùy chọn có thể lựa chọn liên quan đến việc xác định optionName . Đối số optionName là tên của tùy chọn được đặt và giá trị là giá trị được đặt cho tùy chọn.

Syntax

$( ".selector" ).selectable( "option", "disabled", true );
7 option (tùy chọn)

Hành động này đặt một hoặc nhiều tùy chọn cho có thể chọn. Các tùy chọn đối số là một bản đồ của các cặp tùy chọn-giá trị được đặt.

Action - option( options )

Hành động này đặt một hoặc nhiều tùy chọn cho có thể chọn. Các tùy chọn đối số là một bản đồ của các cặp tùy chọn-giá trị được đặt.

Syntax

$( ".selector" ).selectable( "option", { disabled: true } );
số 8 Làm tươi

Hành động này làm cho kích thước và vị trí của các phần tử có thể chọn được làm mới. Sử dụng chủ yếu khi autoRefresh tùy chọn bị vô hiệu hóa (thiết lập để sai ). Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - refresh

Hành động này làm cho kích thước và vị trí của các phần tử có thể chọn được làm mới. Sử dụng chủ yếu khi autoRefresh tùy chọn được vô hiệu hóa. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$( ".selector" ).selectable("refresh");
9 phụ tùng

Hành động này trả về một đối tượng jQuery có chứa phần tử có thể chọn. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - widget

Hành động này trả về một đối tượng jQuery có chứa phần tử có thể chọn. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

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

Thí dụ

Bây giờ chúng ta hãy xem một ví dụ sử dụng các hành động từ bảng trên. Ví dụ sau minh họa việc sử dụng các phương thức disable () và 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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML selectableexample.htm và mở nó trong một trình duyệt tiêu chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau:

Cố gắng nhấp vào sản phẩm, sử dụng phím CTRL để chọn nhiều sản phẩm. Bạn sẽ nhận thấy rằng Sản phẩm 1, Sản phẩm 2 và Sản phẩm 3 bị vô hiệu hóa. Lựa chọn Sản phẩm 4, Sản phẩm 5, Sản phẩm 6 và Sản phẩm 7 xảy ra sau khi chuột di chuyển khoảng cách 1px.

Quản lý sự kiện trên các yếu tố có thể chọn

Ngoài phương thức có thể chọn (tùy chọn) mà chúng ta đã thấy trong các phần trước, JqueryUI cung cấp các phương thức sự kiện được kích hoạt cho một sự kiện cụ thể. Các phương thức sự kiện này được liệt kê bên dưới -

Sr.No. Phương pháp & Mô tả Sự kiện
1 tạo (sự kiện, ui)

Sự kiện này được kích hoạt khi phần tử có thể chọn được tạo. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - create(event, ui)

Sự kiện này được kích hoạt khi phần tử có thể chọn được tạo. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Syntax

$( ".selector" ).selectable({
   create: function( event, ui ) {}
});
2 đã chọn (sự kiện, ui)

Sự kiện này được kích hoạt cho mỗi phần tử được chọn. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - selected(event, ui)

Sự kiện này được kích hoạt cho mỗi phần tử được chọn. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • selected - Điều này chỉ định mục có thể chọn đã được chọn ..

Syntax

$( ".selector" ).selectable({
   selected: function( event, ui ) {}
});
3 lựa chọn (sự kiện, ui)

Sự kiện này được kích hoạt cho từng phần tử có thể chọn sắp được chọn. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - selecting(event, ui)

Sự kiện này được kích hoạt cho từng phần tử có thể chọn sắp được chọn. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • selecting - Điều này chỉ định một tham chiếu đến phần tử sắp được chọn.

Syntax

$( ".selector" ).selectable({
   selecting: function( event, ui ) {}
});
4 bắt đầu (sự kiện, ui)

Sự kiện này được kích hoạt khi bắt đầu thao tác chọn. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - start(event, ui)

Sự kiện này được kích hoạt khi bắt đầu thao tác chọn. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Syntax

$( ".selector" ).selectable({
   start: function( event, ui ) {}
});
5 dừng lại (sự kiện, ui)

Sự kiện này được kích hoạt khi kết thúc thao tác chọn. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - stop(event, ui)

Sự kiện này được kích hoạt khi kết thúc thao tác chọn. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Syntax

$( ".selector" ).selectable({
   stop: function( event, ui ) {}
});
6 không được chọn (sự kiện, ui)

Sự kiện này được kích hoạt khi kết thúc thao tác chọn cho mỗi phần tử trở thành không được chọn. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - unselected(event, ui)

Sự kiện này được kích hoạt khi kết thúc thao tác chọn cho mỗi phần tử trở thành không được chọn. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • unselected - Một phần tử có chứa tham chiếu đến phần tử đã không được chọn.

Syntax

$( ".selector" ).selectable({
   unselected: function( event, ui ) {}
});
7 không chọn (sự kiện, ui)

Sự kiện này được kích hoạt trong thao tác chọn đối với từng phần tử đã chọn sắp không được chọn. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - unselecting(event, ui)

Sự kiện này được kích hoạt trong thao tác chọn đối với từng phần tử đã chọn sắp không được chọn. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • unselecting - Một phần tử có chứa tham chiếu đến phần tử sắp bị bỏ chọn.

Syntax

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

Thí dụ

Ví dụ sau minh họa việc sử dụng phương thức sự kiện trong chức năng có thể chọn. Ví dụ này minh họa việc sử dụng sự kiện đã chọn .

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

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML selectableexample.htm và mở nó trong một trình duyệt tiêu chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau:

Cố gắng nhấp vào sản phẩm, sử dụng phím CTRL để chọn nhiều sản phẩm. Bạn sẽ nhận thấy rằng số sản phẩm đã chọn được in ở dưới cùng.

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