ปลั๊กอินป๊อปอัพ bootstrap ให้มุมมองเพิ่มเติม ปลั๊กอินป๊อปอัพสร้างเนื้อหาและแท็กตามข้อกำหนด โดยค่าเริ่มต้นป๊อปอัปจะถูกวางไว้ด้านหลังองค์ประกอบทริกเกอร์
popover นั้นคล้ายกับคำแนะนำเครื่องมือให้มุมมองเพิ่มเติม ในการเปิดใช้งานกล่องป๊อปอัพผู้ใช้เพียงแค่ต้องเลื่อนเมาส์เหนือองค์ประกอบ เนื้อหาของกล่องป๊อปอัพสามารถเติมเต็มได้โดยใช้ Bootstrap Data API (Bootstrap Data API) วิธีนี้ขึ้นอยู่กับคำแนะนำเครื่องมือ
หากคุณต้องการอ้างอิงฟังก์ชั่นของปลั๊กอินแยกกันคุณต้องอ้างอิง popover.js ซึ่งขึ้นอยู่กับปลั๊กอินคำแนะนำเครื่องมือ หรือตามที่กล่าวไว้ในบทภาพรวมปลั๊กอิน Bootstrap คุณสามารถอ้างถึง bootstrap.js หรือรุ่นบีบอัดของ bootstrap.min.js
1. การใช้งาน
ปลั๊กอิน Popover สร้างเนื้อหาและแท็กตามความต้องการ โดยค่าเริ่มต้น popovers จะถูกวางไว้ด้านหลังองค์ประกอบทริกเกอร์ คุณสามารถเพิ่ม popovers ได้สองวิธี:
ผ่านคุณสมบัติ Data: เพื่อเพิ่ม popover เพียงเพิ่ม data-toggle = "popover" ไปยังป้ายกำกับ/ปุ่ม ชื่อของสมอคือข้อความของป๊อปโอเวอร์ โดยค่าเริ่มต้นปลั๊กอินตั้งค่าป๊อปโอเวอร์ที่ด้านบน
<a href = "#" data-toggle = "popover"> โปรดโฮเวอร์เหนือ </a> ของฉัน
ผ่าน JavaScript: เปิดใช้งาน popover ผ่าน JavaScript:
$ ('#identifier'). popover (ตัวเลือก)
ปลั๊กอินป๊อปโอเวอร์ไม่เหมือนเมนูแบบเลื่อนลงและปลั๊กอินอื่น ๆ ที่กล่าวถึงก่อนหน้านี้ไม่ใช่ปลั๊กอิน CSS บริสุทธิ์ ในการใช้ปลั๊กอินคุณต้องเปิดใช้งานโดยใช้ jQuery (อ่าน JavaScript) ใช้สคริปต์ต่อไปนี้เพื่อเปิดใช้งาน popovers ทั้งหมดในหน้า:
$ (function () {$ ("[data-toggle = 'popover']"). popover ();});
2. ตัวอย่าง
กล่องป๊อปอัพคือการคลิกองค์ประกอบเพื่อปรากฏขึ้นคอนเทนเนอร์ที่มีชื่อและเนื้อหา
// การใช้งานพื้นฐาน <button type = "ปุ่ม" data-toggle = "popover" data-content = "นี่คือปลั๊กอินกล่องป๊อปอัพ"> คลิกเพื่อป๊อปอัพ/ซ่อนกล่องป๊อปอัพ </button> // JavaScript เริ่มต้น $ ('ปุ่ม'). popover ();ปลั๊กอินป๊อปอัพมีคุณสมบัติมากมายในการกำหนดค่าการแสดงผลของพรอมต์ดังต่อไปนี้:
$ ('ปุ่ม'). popover ({container: 'body', viewport: {selector: '#View', padding: 10,}});มีสี่วิธีในการดำเนินการผ่าน JavaScript
// แสดง $ ('ปุ่ม'). popover ('show'); // ซ่อน $ ('ปุ่ม'). popover ('ซ่อน'); // invert show และซ่อน $ ('ปุ่ม'). popover ('สลับ'); // ซ่อนและทำลาย $ ('ปุ่ม'). popover ('ทำลาย');มีเหตุการณ์สี่ประเภทในปลั๊กอินป๊อปโอเวอร์:
// เหตุการณ์อื่น ๆ คล้ายกับ $ ('ปุ่ม') บน ('show.bs.tab', function () {Alert ('ฟรีเมื่อเรียกวิธีการแสดง!');});ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้ปลั๊กอินป๊อปอัพ bootstrap