วันนี้มาสรุปแอปพลิเคชันของวิดเจ็ตของ bootstrap ตกลงอย่าพูดเรื่องไร้สาระมาถึงจุด
1. บทนำสู่บริบท
ข้อกำหนดอย่างหนึ่ง: การสั่งซื้อแถวตารางรองรับการสั่งซื้อหลายแบบเลือกและสามารถเลือกได้หลายแบบต่อเนื่อง หมายความว่าอย่างไร? มาดูการเรนเดอร์ที่จำเป็นต้องดำเนินการ:
ข้อกำหนดคือ: จำเป็นต้องย้ายบรรทัดที่ 6, 8 และ 9 ที่เลือกระหว่างแถวที่ 2 และแถว 3 การแยกธุรกิจออกจากมุมมองทางเทคนิคหากคุณต้องการใช้การดำเนินการน้อยที่สุดเพื่อให้ได้เอฟเฟกต์ข้างต้นบล็อกเกอร์คิดฟังก์ชั่นคลิกขวา หากคุณสามารถคลิกขวาที่เมาส์บนบรรทัด 2 หรือบรรทัด 3 และย้ายบรรทัดที่เลือกไปยังตำแหน่งที่สอดคล้องกันผ่านฟังก์ชั่นเมนูคลิกขวานี่เป็นวิธีที่ง่ายที่สุดหรือไม่? เราแค่ทำมันดังนั้นเราจึงมองหาส่วนประกอบและค้นหา "bootstrap menu คลิกขวา" ในที่สุดเราก็พบองค์ประกอบบริบทของเรา หลังจากการศึกษาอย่างรอบคอบเรารู้สึกว่าผลกระทบก็โอเคดังนั้นเราจึงแบ่งปันที่นี่เพื่ออ้างอิงโดยชาวสวนที่ต้องการใช้มัน
ContextMenu ที่อยู่โอเพ่นซอร์ส: https://github.com/sydcanem/bootstrap-contextmenu
ContextMenu ใช้การสาธิต: http://sydcanem.com/bootstrap-contextmenu/
2. เอฟเฟกต์บริบท
เอฟเฟกต์คลิกขวาเริ่มต้น
นำไปใช้กับโครงการ
หลังจากดำเนินการฟังก์ชั่นเมนู
3. ตัวอย่างรหัสบริบท
ที่จริงแล้วมันเป็นเรื่องง่าย ๆ ลองมาดูวิธีการใช้งาน
1. อ้างอิงไฟล์ที่เกี่ยวข้อง กุญแจสำคัญคือสอง bootstrap-contextmenu.js และ prettify.js
<script src = "/scripts/jQuery-1.9.1.min.js"> </script> <script src = "/content/bootstrap/js/bootstrap.min.js"> </script> src = "http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"> </script>
2. การเตรียม HTML
<div id = "context-menu"> <ul role = "เมนู"> <li> <a tabindex = "-1" href = "#" ตัวดำเนินการ = "top"> แทรกเหนือบรรทัดนี้ </a> </li> <li> <a tabindex = "-1" href = "#" ตัวดำเนินการ
3. การเริ่มต้น JS
รหัสไม่ยากมันเป็นเพียงตรรกะของการดำเนินการแถวตาราง จะอธิบายได้ที่ไหน:
(1) หลังจากดำเนินการลบและแทรกในแถวตารางฟังก์ชั่นเมนูคลิกขวาจะต้องมีการเริ่มต้นใหม่ มิฉะนั้นหลังจากคลิกขวาหนึ่งครั้งมันจะไม่ทำงานอีกต่อไป
(2) หากมีรายการฟังก์ชั่นเมนูมากมายคุณต้องใช้การหารบรรทัดเพื่อจัดกลุ่ม เพียงเพิ่ม <li> </li> เพื่อให้เสร็จ
<div id = "context-menu2"> <ul role = "เมนู"> <li> <a tabindex = "-1"> การกระทำ </a> </li> <li> <a tabindex = "-1"> การกระทำอื่น </a> </li> <li> <a tabindex = "-1"> ลิงค์ </a> </li> </div>
(3) หากคุณต้องการย้ายเมาส์ไปยังเมนูเพื่อแสดงพื้นหลังสีน้ำเงินคุณต้องอ้างถึงไฟล์ CSS อื่น
การคัดลอกรหัสมีดังนี้: <link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel = "stylesheet">>
ผลกระทบมีดังนี้:
หากคุณยังต้องการเรียนรู้อย่างลึก
ด้านบนเป็นการใช้งานง่าย ๆ ของส่วนประกอบ bootstrap-contextmenu มันอาจจะไม่สมบูรณ์แบบ แต่สามารถแก้ไขได้ดีสำหรับข้อกำหนดเมนูคลิกขวาทั่วไป