การสร้างองค์ประกอบที่เลือกได้ใน AJAX สำหรับ HTML5 และ CSS3 การเขียนโปรแกรม - Dummies

คุณอาจมีสถานการณ์ที่คุณต้องการให้ผู้ใช้เลือกจากรายการขององค์ประกอบ AJAX อนุญาตให้โปรแกรมเมอร์ HTML5 และ CSS3 เป็นตัวเลือก วิดเจ็ตที่เลือกได้เป็นวิธีที่ยอดเยี่ยมในการสร้างฟังก์ชันการทำงานนี้จากรายการธรรมดา ผู้ใช้สามารถลากหรือ Ctrl + คลิกที่รายการเพื่อเลือกได้ คลาส CSS พิเศษจะถูกนำมาใช้โดยอัตโนมัติเพื่อระบุว่ารายการกำลังถูกพิจารณาสำหรับการเลือกหรือเลือก

ทำตามขั้นตอนต่อไปนี้เพื่อสร้างองค์ประกอบที่สามารถเลือกได้:

1. เริ่มต้นด้วยรายการที่ไม่มีการจัดเรียง

   สร้างรายการที่เรียงลำดับตามมาตรฐานใน HTML ของคุณ ให้ ul ID เพื่อให้สามารถระบุได้ว่าเป็นโหนด jQuery:

   
   เลือก
   
   alpha
   beta
   gamma
   delta
   
   
   
   
   
   
   
   
   

2. เพิ่มชั้น CSS สำหรับการเลือกและสถานะที่เลือก

   หากต้องการให้รายการที่เลือกสามารถเปลี่ยนแปลงลักษณะที่ปรากฏได้เมื่อเลือกรายการหรือถูกเลือกแล้วให้เพิ่มคลาส CSS ตามที่แสดง บางคลาสพิเศษ (ui-selection และ ui-selected) จะถูกกำหนดไว้ล่วงหน้าและจะถูกเพิ่มเข้าไปในองค์ประกอบในเวลาที่เหมาะสม:

   h1 {text-align: center;} #selectable ui-selection {background-color: gray;} #selectable ui-selected {background-color: สีดำ; color: white;}
   

3. ในฟังก์ชัน init () ให้ระบุรายการเป็นโหนดที่สามารถเลือกได้

   ใช้ไวยากรณ์ jQuery มาตรฐาน: selectable ()

   $ ("# เลือก") เลือก ();
   

คลาสจะแนบกับองค์ประกอบทั้งหมดเมื่อได้รับการเลือก อย่าลืมเพิ่ม CSS บางประเภทในคลาสนี้หรือคุณจะไม่สามารถบอกได้ว่าได้เลือกรายการไว้แล้ว

ถ้าคุณต้องการทำอะไรกับไอเท็มทั้งหมดที่เลือกไว้เพียงแค่สร้างกลุ่มขององค์ประกอบ jQuery ด้วยคลาส ui-selected:

var selectedItems = $ (". ui-selected");