JqueryUI - เลือกได้

jQueryUI มีวิธีการ selectable () เพื่อเลือกองค์ประกอบ DOM ทีละรายการหรือในกลุ่ม ด้วยองค์ประกอบวิธีนี้สามารถเลือกได้โดยการลากกล่อง (บางครั้งเรียกว่าบ่วงบาศ) ด้วยเมาส์เหนือองค์ประกอบ นอกจากนี้ยังสามารถเลือกองค์ประกอบได้โดยคลิกหรือลากในขณะที่กดปุ่ม Ctrl / Meta ค้างไว้ทำให้สามารถเลือกได้หลายรายการ (ไม่ติดกัน)

ไวยากรณ์

selectable() วิธีการสามารถใช้ได้สองรูปแบบ -

$ (ตัวเลือกบริบท) .selectable (ตัวเลือก)วิธีการ
$ (ตัวเลือกบริบท) .selectable ("action", params) Method

$ (ตัวเลือกบริบท) .selectable (ตัวเลือก) วิธีการ

เลือก (ตัวเลือก)วิธีการบอกว่าองค์ประกอบ HTML มีรายการที่เลือก ตัวเลือกพารามิเตอร์เป็นวัตถุที่ระบุพฤติกรรมขององค์ประกอบที่เกี่ยวข้องเมื่อมีการเลือก

ไวยากรณ์

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

คุณสามารถระบุตัวเลือกได้ครั้งละหนึ่งตัวเลือกโดยใช้วัตถุ Javascript หากมีให้เลือกมากกว่าหนึ่งตัวเลือกคุณจะแยกตัวเลือกโดยใช้ลูกน้ำดังนี้ -

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

ตารางต่อไปนี้แสดงรายการตัวเลือกต่างๆที่สามารถใช้ได้กับวิธีนี้ -


$( ".selector" ).selectable({ appendTo: "#identifier" });
$( ".selector" ).selectable({ autoRefresh: false });
$( ".selector" ).selectable({ cancel: "a,.cancel" });
$( ".selector" ).selectable({ delay: 150 });
$( ".selector" ).selectable({ disabled: true });
$( ".selector" ).selectable({ distance: 30 });
$( ".selector" ).selectable({ filter: "li" });
$( ".selector" ).selectable({ tolerance: "fit" });

ซีเนียร์	ตัวเลือกและคำอธิบาย
1	ภาคผนวก ตัวเลือกนี้จะบอกว่าองค์ประกอบใดที่ตัวช่วยการเลือก (เชือก) ควรต่อท้าย โดยค่าเริ่มต้นคือbody. Option - appendTo ตัวเลือกนี้จะบอกว่าองค์ประกอบใดที่ตัวช่วยการเลือก (เชือก) ควรต่อท้าย โดยค่าเริ่มต้นคือbody. Syntax `$( ".selector" ).selectable({ appendTo: "#identifier" });`
2	autoRefresh ตัวเลือกนี้หากตั้งค่าเป็นจริงตำแหน่งและขนาดของแต่ละรายการที่เลือกได้จะถูกคำนวณที่จุดเริ่มต้นของการดำเนินการที่เลือก โดยค่าเริ่มต้นคือtrue. Option - autoRefresh ตัวเลือกนี้หากตั้งค่าเป็นจริงตำแหน่งและขนาดของแต่ละรายการที่เลือกได้จะถูกคำนวณที่จุดเริ่มต้นของการดำเนินการที่เลือก โดยค่าเริ่มต้นคือtrue. หากคุณมีหลายรายการคุณอาจต้องการตั้งค่านี้เป็นเท็จและเรียกใช้เมธอด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	ปิดการใช้งาน ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงปิดใช้งานกลไกการเลือก ผู้ใช้ไม่สามารถเลือกองค์ประกอบได้จนกว่ากลไกจะถูกเรียกคืนโดยใช้คำสั่ง ("enable") ที่เลือกได้ โดยค่าเริ่มต้นคือfalse. Option - disabled ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงปิดใช้งานกลไกการเลือก ผู้ใช้ไม่สามารถเลือกองค์ประกอบได้จนกว่ากลไกจะถูกเรียกคืนโดยใช้คำสั่ง ("enable") ที่เลือกได้ โดยค่าเริ่มต้นคือ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.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณจะเห็นผลลัพธ์ต่อไปนี้ ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -

ลองคลิกที่ผลิตภัณฑ์ใช้ปุ่ม CTRLS เพื่อเลือกผลิตภัณฑ์หลายรายการ

การใช้ความล่าช้าและระยะทาง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้สองตัวเลือก 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>

ลองคลิกที่ผลิตภัณฑ์ใช้ปุ่ม CTRL เพื่อเลือกผลิตภัณฑ์หลายรายการ คุณจะสังเกตเห็นว่าการเลือกผลิตภัณฑ์ 1 ผลิตภัณฑ์ 2 และผลิตภัณฑ์ 3 เริ่มต้นหลังจากล่าช้าไป 1,000 มิลลิวินาที การเลือกผลิตภัณฑ์ 4 ผลิตภัณฑ์ 5 ผลิตภัณฑ์ 6 และผลิตภัณฑ์ 7 ไม่สามารถทำได้ทีละรายการ การเลือกจะเริ่มต้นหลังจากที่เมาส์เลื่อนไปเป็นระยะทาง 100px เท่านั้น

การใช้ตัวกรอง

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

ลองคลิกดูสินค้า คุณจะสังเกตเห็นว่าสามารถเลือกได้เฉพาะผลิตภัณฑ์แรกเท่านั้น

$ (ตัวเลือกบริบท) .selectable ("action", params) Method

เลือก ( "การกระทำ" params)วิธีการสามารถดำเนินการในองค์ประกอบที่เลือก, เช่นการป้องกันการทำงานที่เลือก การดำเนินการถูกระบุเป็นสตริงในอาร์กิวเมนต์แรก (เช่น "ปิดใช้งาน" เพื่อหยุดการเลือก) ตรวจสอบการดำเนินการที่สามารถส่งผ่านได้ในตารางต่อไปนี้

ไวยากรณ์

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

ตารางต่อไปนี้แสดงการดำเนินการต่างๆที่สามารถใช้ได้กับวิธีนี้ -


$( ".selector" ).selectable("destroy");
$( ".selector" ).selectable("disable");
$( ".selector" ).selectable("enable");
var isDisabled = $( ".selector" ).selectable( "option", "disabled" );
var options = $( ".selector" ).selectable( "option" );
$( ".selector" ).selectable( "option", "disabled", true );
$( ".selector" ).selectable( "option", { disabled: true } );
$( ".selector" ).selectable("refresh");
var widget = $( ".selector" ).selectable( "widget" );

ซีเนียร์	การดำเนินการและคำอธิบาย
1	ทำลาย การดำเนินการนี้จะลบฟังก์ชันที่เลือกได้ขององค์ประกอบทั้งหมด องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น Action - destroy การดำเนินการนี้จะลบฟังก์ชันที่เลือกได้ขององค์ประกอบทั้งหมด องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น Syntax `$( ".selector" ).selectable("destroy");`
2	ปิดการใช้งาน การดำเนินการนี้จะปิดใช้งานฟังก์ชันที่เลือกได้ขององค์ประกอบ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - disable การดำเนินการนี้จะลบฟังก์ชันที่เลือกได้ขององค์ประกอบทั้งหมด องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น Syntax `$( ".selector" ).selectable("disable");`
3	เปิดใช้งาน การดำเนินการนี้เปิดใช้งานฟังก์ชันที่เลือกได้ขององค์ประกอบ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - enable การดำเนินการนี้เปิดใช้งานฟังก์ชันที่เลือกได้ขององค์ประกอบ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$( ".selector" ).selectable("enable");`
4	ตัวเลือก (optionName) การดำเนินการนี้ได้รับค่าเชื่อมโยงกับที่ระบุOptionName Action - option( optionName ) การดำเนินการนี้ได้รับค่าเชื่อมโยงกับที่ระบุOptionName Syntax `var isDisabled = $( ".selector" ).selectable( "option", "disabled" );`
5	ตัวเลือก () การดำเนินการนี้ได้รับออบเจ็กต์ที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชตัวเลือกที่เลือกได้ในปัจจุบัน Action - option() การดำเนินการนี้ได้รับออบเจ็กต์ที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชตัวเลือกที่เลือกได้ในปัจจุบัน Syntax `var options = $( ".selector" ).selectable( "option" );`
6	ตัวเลือก (optionName ค่า) การกระทำนี้จะตั้งค่าของตัวเลือกที่เลือกที่เกี่ยวข้องกับการระบุOptionName อาร์กิวเมนต์optionNameคือชื่อของตัวเลือกที่จะตั้งค่าและค่าคือค่าที่จะกำหนดให้กับอ็อพชัน Action - option( optionName, value ) การกระทำนี้จะตั้งค่าของตัวเลือกที่เลือกที่เกี่ยวข้องกับการระบุOptionName อาร์กิวเมนต์optionNameคือชื่อของตัวเลือกที่จะตั้งค่าและค่าคือค่าที่จะกำหนดให้กับอ็อพชัน Syntax `$( ".selector" ).selectable( "option", "disabled", true );`
7	option (ตัวเลือก) การดำเนินการนี้เป็นการตั้งค่าตัวเลือกอย่างน้อยหนึ่งรายการสำหรับสิ่งที่เลือกได้ ตัวเลือกอาร์กิวเมนต์คือแผนที่ของคู่ค่าตัวเลือกที่จะตั้งค่า Action - option( options ) การดำเนินการนี้เป็นการตั้งค่าตัวเลือกอย่างน้อยหนึ่งรายการสำหรับสิ่งที่เลือกได้ ตัวเลือกอาร์กิวเมนต์คือแผนที่ของคู่ค่าตัวเลือกที่จะตั้งค่า Syntax `$( ".selector" ).selectable( "option", { disabled: true } );`
8	รีเฟรช การดำเนินการนี้ทำให้ขนาดและตำแหน่งขององค์ประกอบที่เลือกได้ถูกรีเฟรช ใช้เป็นส่วนใหญ่เมื่อปิดใช้งานตัวเลือกautoRefresh (ตั้งค่าเป็นเท็จ ) วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - refresh การดำเนินการนี้ทำให้ขนาดและตำแหน่งขององค์ประกอบที่เลือกได้ถูกรีเฟรช ใช้เป็นส่วนใหญ่เมื่อปิดใช้งานตัวเลือกautoRefresh วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$( ".selector" ).selectable("refresh");`
9	วิดเจ็ต การดำเนินการนี้ส่งคืนวัตถุ jQuery ที่มีองค์ประกอบที่เลือกได้ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - widget การดำเนินการนี้ส่งคืนวัตถุ jQuery ที่มีองค์ประกอบที่เลือกได้ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `var widget = $( ".selector" ).selectable( "widget" );`

ตัวอย่าง

ตอนนี้ให้เราดูตัวอย่างโดยใช้การดำเนินการจากตารางด้านบน ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ปิดการใช้งาน ()และ ตัวเลือก (OptionName ค่า) วิธีการ

<!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 และเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณจะเห็นผลลัพธ์ต่อไปนี้ -

ลองคลิกที่ผลิตภัณฑ์ใช้ปุ่ม CTRL เพื่อเลือกผลิตภัณฑ์หลายรายการ คุณจะสังเกตเห็นว่าผลิตภัณฑ์ 1 ผลิตภัณฑ์ 2 และผลิตภัณฑ์ 3 ถูกปิดใช้งาน การเลือกผลิตภัณฑ์ 4 ผลิตภัณฑ์ 5 ผลิตภัณฑ์ 6 และผลิตภัณฑ์ 7 เกิดขึ้นหลังจากเมาส์เลื่อนระยะทาง 1px

การจัดการเหตุการณ์เกี่ยวกับองค์ประกอบที่เลือกได้

นอกเหนือจากวิธีการ (ตัวเลือก) ที่เลือกได้ซึ่งเราเห็นในส่วนก่อนหน้านี้ JqueryUI ยังมีวิธีการเหตุการณ์ที่จะเรียกใช้สำหรับเหตุการณ์หนึ่ง ๆ วิธีการจัดกิจกรรมเหล่านี้แสดงไว้ด้านล่าง -


$( ".selector" ).selectable({
   create: function( event, ui ) {}
});
$( ".selector" ).selectable({
   selected: function( event, ui ) {}
});
$( ".selector" ).selectable({
   selecting: function( event, ui ) {}
});
$( ".selector" ).selectable({
   start: function( event, ui ) {}
});
$( ".selector" ).selectable({
   stop: function( event, ui ) {}
});
$( ".selector" ).selectable({
   unselected: function( event, ui ) {}
});
$( ".selector" ).selectable({
   unselecting: function( event, ui ) {}
});

ซีเนียร์	วิธีการและคำอธิบายเหตุการณ์
1	สร้าง (เหตุการณ์, UI) เหตุการณ์นี้จะถูกทริกเกอร์เมื่อสร้างองค์ประกอบที่เลือกได้ ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Event - create(event, ui) เหตุการณ์นี้จะถูกทริกเกอร์เมื่อสร้างองค์ประกอบที่เลือกได้ ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Syntax `$( ".selector" ).selectable({ create: function( event, ui ) {} });`
2	เลือก (เหตุการณ์, UI) เหตุการณ์นี้จะถูกทริกเกอร์สำหรับแต่ละองค์ประกอบที่ถูกเลือก ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Event - selected(event, ui) เหตุการณ์นี้จะถูกทริกเกอร์สำหรับแต่ละองค์ประกอบที่ถูกเลือก ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ ค่าที่เป็นไปได้ของUIคือ - selected - เป็นการระบุรายการที่เลือกได้ที่เลือก .. Syntax `$( ".selector" ).selectable({ selected: function( event, ui ) {} });`
3	การเลือก (เหตุการณ์, UI) เหตุการณ์นี้จะถูกทริกเกอร์สำหรับแต่ละองค์ประกอบที่เลือกได้ซึ่งกำลังจะถูกเลือก ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Event - selecting(event, ui) เหตุการณ์นี้จะถูกทริกเกอร์สำหรับแต่ละองค์ประกอบที่เลือกได้ซึ่งกำลังจะถูกเลือก ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ ค่าที่เป็นไปได้ของUIคือ - selecting - ระบุการอ้างอิงถึงองค์ประกอบที่กำลังจะถูกเลือก Syntax `$( ".selector" ).selectable({ selecting: function( event, ui ) {} });`
4	เริ่มต้น (เหตุการณ์, UI) เหตุการณ์นี้ถูกทริกเกอร์ที่จุดเริ่มต้นของการดำเนินการเลือก ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Event - start(event, ui) เหตุการณ์นี้ถูกทริกเกอร์ที่จุดเริ่มต้นของการดำเนินการเลือก ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Syntax `$( ".selector" ).selectable({ start: function( event, ui ) {} });`
5	หยุด (เหตุการณ์, UI) เหตุการณ์นี้จะถูกทริกเกอร์เมื่อสิ้นสุดการดำเนินการเลือก ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Event - stop(event, ui) เหตุการณ์นี้จะถูกทริกเกอร์เมื่อสิ้นสุดการดำเนินการเลือก ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Syntax `$( ".selector" ).selectable({ stop: function( event, ui ) {} });`
6	ไม่ได้เลือก (เหตุการณ์, UI) เหตุการณ์นี้ถูกทริกเกอร์เมื่อสิ้นสุดการดำเนินการเลือกสำหรับแต่ละองค์ประกอบที่ไม่ถูกเลือก ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Event - unselected(event, ui) เหตุการณ์นี้ถูกทริกเกอร์เมื่อสิ้นสุดการดำเนินการเลือกสำหรับแต่ละองค์ประกอบที่ไม่ถูกเลือก ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ ค่าที่เป็นไปได้ของUIคือ - unselected - องค์ประกอบที่มีการอ้างอิงถึงองค์ประกอบที่ไม่ได้เลือก Syntax `$( ".selector" ).selectable({ unselected: function( event, ui ) {} });`
7	การยกเลิกการเลือก (เหตุการณ์, UI) เหตุการณ์นี้จะถูกทริกเกอร์ระหว่างการดำเนินการเลือกสำหรับแต่ละองค์ประกอบที่เลือกซึ่งกำลังจะถูกยกเลิกการเลือก ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Event - unselecting(event, ui) เหตุการณ์นี้จะถูกทริกเกอร์ระหว่างการดำเนินการเลือกสำหรับแต่ละองค์ประกอบที่เลือกซึ่งกำลังจะถูกยกเลิกการเลือก ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ ค่าที่เป็นไปได้ของ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>

ลองคลิกที่ผลิตภัณฑ์ใช้ปุ่ม CTRL เพื่อเลือกผลิตภัณฑ์หลายรายการ คุณจะสังเกตเห็นว่าหมายเลขผลิตภัณฑ์ที่เลือกพิมพ์อยู่ที่ด้านล่าง