การใช้งาน jQuery UI Selectable
ประเภทโค้ด: JavaScript
jQuery UI Selectable เป็นส่วนหนึ่งของไลบรารี jQuery UI ที่ช่วยให้คุณสร้างการเลือกไอเท็มในหน้าเว็บได้อย่างง่ายดาย โดยให้ผู้ใช้สามารถเลือกหลายไอเท็มพร้อมกันได้ด้วยการลากเมาส์หรือการคลิก และสามารถนำผลลัพธ์ที่ได้มาใช้งานต่อได้ตามต้องการการทำงานของ jQuery UI Selectable จะเกิดขึ้นกับกลุ่มของไอเท็มที่กำหนดให้เป็นเลือกได้ (selectable items) โดยใช้ตัวเลือก (selector) เพื่อระบุตำแหน่งหรือคลาสของไอเท็มที่ต้องการให้สามารถเลือกได้ ผู้ใช้สามารถเลือกหรือไม่เลือกไอเท็มโดยการคลิกที่ไอเท็มหรือลากเมาส์เพื่อสร้างพื้นที่ที่ต้องการเลือก
การติดตั้งและเริ่มต้นใช้งาน jQuery UI มีขั้นตอนดังนี้
- ดาวน์โหลดไฟล์ jQuery UI: เข้าสู่เว็บไซต์ jquery ui เพื่อดาวน์โหลดไฟล์ jQuery UI ล่าสุด คุณสามารถเลือกดาวน์โหลดเวอร์ชันที่มี jQuery UI Selectable และคุณลักษณะอื่นๆ ที่ต้องการได้เลย
- เพิ่มไฟล์ jQuery UI ลงในโปรเจ็กต์ของเรา และแตกไฟล์ที่ดาวน์โหลดไว้และคัดลอกไฟล์ที่จำเป็น เช่น jquery-ui.js หรือ jquery-ui.min.js และ jquery-ui.css ไปวางในโฟลเดอร์ที่คุณต้องการในโปรเจ็กต์ของเรา
- เพิ่มการเรียกใช้งานไลบรารี jQuery UI: เปิดไฟล์ HTML ที่ต้องการใช้งาน jQuery UI Selectable และเพิ่มส่วนที่เรียกใช้งานไลบรารี jQuery UI ดังนี้
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery UI Selectable</title> <link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/jquery-ui.min.css"> </head> <body> <script src="/js/jquery-3.7.0.min.js"></script> <script src="/js/jquery-ui.min.js"></script> </body> </html>
การใช้งานและการกำหนดค่าของ jQuery UI Selectable ในการเลือกไอเท็มที่ต้องการบนหน้าเว็บ รวมถึงวิธีการกำหนดค่าต่าง ๆ
- เลือกไอเท็ม เมื่อคลิกที่ไอเท็มหรือลากเมาส์บนไอเท็ม เฟรมสี่เหลี่ยมกล่องที่เราเลือกจะปรากฏขึ้น เมื่อปล่อยการคลิกหรือการลาก เฟรมสี่เหลี่ยมกล่องจะยุบและไอเท็มที่ถูกเลือกจะมีสถานะที่ส่งกลับมา
- กำหนดเงื่อนไขในการเลือกไอเท็ม สามารถกำหนดเงื่อนไขในการเลือกหรือไม่เลือกไอเท็มตามความต้องการได้ โดยใช้ตัวกรอง (filter) หรือเงื่อนไขการเลือกที่เฉพาะเจาะจง เช่น การกำหนดคลาสหรือตำแหน่งของไอเท็ม
$("#selectable").selectable({ filter: "li:not(.not-selectable)", // เลือกเฉพาะไอเท็มที่ไม่มีคลาส not-selectable cancel: ".cancel-select" // ยกเลิกการเลือกเมื่อคลิกที่องค์ประกอบที่มีคลาส cancel-select }); - การเข้าถึงไอเท็มที่ถูกเลือก: เมื่อมีการเลือกไอเท็ม ซึ่งสามารถเข้าถึงไอเท็มที่ถูกเลือกได้ด้วยตัวช่วยของ Event หรือเมธอด เช่น selected และ unselected ซึ่งจะใช้สำหรับการดำเนินการต่อไป เช่น การแสดงข้อมูลหรือการปรับแต่งรูปแบบ
$("#selectable").selectable({ selected: function(event, ui) { // เมื่อมีการเลือกไอเท็ม var selectedItem = $(ui.selected); // ทำสิ่งที่คุณต้องการกับไอเท็มที่ถูกเลือก }, unselected: function(event, ui) { // เมื่อยกเลิกการเลือกไอเท็ม var unselectedItem = $(ui.unselected); // ทำสิ่งที่คุณต้องการกับไอเท็มที่ไม่ถูกเลือก } }); - ปรับแต่งรูปแบบการเลือก ซึ่งสามารถปรับแต่งรูปแบบการเลือกของไอเท็มที่ถูกเลือกได้ โดยใช้ CSS หรือเพิ่มสไตล์ให้กับไอเท็ม
$("#selectable").selectable({ selected: function(event, ui) { $(ui.selected).addClass("custom-selected"); // เพิ่มคลาสสำหรับไอเท็มที่ถูกเลือก }, unselected: function(event, ui) { $(ui.unselected).removeClass("custom-selected"); // ลบคลาสสำหรับไอเท็มที่ไม่ถูกเลือก } });
ตัวอย่างการใช้งาน jQuery UI Selectable
การเลือกรายการรายชื่อ ในกรณีที่มีรายการรายชื่อและต้องการให้ผู้ใช้สามารถเลือกไอเท็มในรายการได้ เช่น เพื่อทำการลบหรือดำเนินการอื่น ๆ ซึ่งสามารถใช้ jQuery UI Selectable ในการจัดการเหตุการณ์การเลือกและยกเลิกการเลือกของรายการรายชื่อ
ตัวอย่าง
<ul id="name-list" class="ul-list">
<li>John</li>
<li>Jane</li>
<li>Bob</li>
</ul>
<script>
jQuery(function($) {
$("#name-list").selectable({
selected: function(event, ui) {
var selectedItem = $(ui.selected);
selectedItem.remove();
}
});
});
</script>ผลลัพธ์ที่ได้
ประโยชน์ของ jQuery UI Selectable ในการพัฒนาเว็บไซต์มีหลายด้าน ดังนี้
- การทำงานกับรายการหรือตารางข้อมูล: jQuery UI Selectable ช่วยให้ผู้ใช้สามารถเลือกรายการหรือเซลล์ในตารางข้อมูลได้ง่ายดาย ซึ่งมีประโยชน์ในการดำเนินการกับข้อมูลหรือกระบวนการทางธุรกิจ เช่น การลบหรือแก้ไขข้อมูลที่ถูกเลือก
- การเลือกกลุ่มองค์ประกอบ: คุณสามารถใช้ jQuery UI Selectable เพื่อเลือกกลุ่มขององค์ประกอบหรือวัตถุต่างๆ บนหน้าเว็บ เช่น รูปภาพ, กล่องข้อความ, หรือวิดเจ็ตต่างๆ และนำผลลัพธ์ที่ได้มาใช้งานต่อได้ตามต้องการ เช่น การลบหรือการปรับเปลี่ยนลักษณะของกลุ่มองค์ประกอบที่ถูกเลือก
- การสร้างประสบการณ์ผู้ใช้ที่ดีขึ้น: การใช้งาน jQuery UI Selectable สามารถเพิ่มประสบการณ์ในการเรียกดูหรือจัดการกับข้อมูลขนาดใหญ่ โดยช่วยให้ผู้ใช้สามารถเลือกหลายไอเท็มในขณะเดียวกัน ซึ่งเป็นวิธีที่สะดวกและรวดเร็วในการดำเนินการ
- ความสามารถในการปรับแต่ง: jQuery UI Selectable มีตัวเลือกและการกำหนดค่าหลากหลายเพื่อให้คุณสามารถปรับแต่งการเลือกไอเท็มตามความต้องการของคุณ เช่น การกำหนดเงื่อนไขในการเลือก, การกำหนดสไตล์และตำแหน่งของพื้นที่เลือก, หรือการเพิ่มฟังก์ชันพิเศษในการจัดการเหตุการณ์
ดังนั้น การใช้งาน jQuery UI Selectable ช่วยให้คุณสร้างประสบการณ์ผู้ใช้ที่สะดวกและมีประสิทธิภาพในการเลือกและจัดการกับไอเท็มในเว็บไซต์ของเรา ทั้งนี้โดยมีความสามารถในการปรับแต่งและประยุกต์ใช้ตามความต้องการของโปรเจค
อ้างอิง
jQuery UI คืออะไร ,[ออนไลน์], เข้าถึงได้จาก https://www.mindphp.com/forums/viewtopic.php?t=40769
jQuery UI example - select (Selectable) ,[ออนไลน์], เข้าถึงได้จาก https://www.w3big.com/jqueryui/example-selectable.html#gsc.tab=0
JqueryUI - Selectable ,[ออนไลน์], เข้าถึงได้จาก https://www.tutorialspoint.com/jqueryui/jqueryui_selectable.htm
