บทความนี้ส่วนใหญ่เรียนรู้กล่องปลั๊กอิน JavaScript
กรณี
เพิ่มการซ้อนทับขนาดเล็กลงในเนื้อหาหน้าเช่นเอฟเฟกต์บน iPad เพิ่มข้อมูลเพิ่มเติมลงในองค์ประกอบหน้า
มาดูการเรนเดอร์เคสแบบสแตติกแบบง่าย ๆ
เอฟเฟกต์นั้นค่อนข้างง่ายส่วนใหญ่เป็นรูปแบบเล็ก ๆ ที่ปรากฏขึ้นแบบคงที่แบ่งออกเป็นชื่อของฟอร์มชื่อและเนื้อหาแบบฟอร์ม
<div> <div> <div> </div> <h3> Popover Top </h3> <div> <p> sed posuere consectetur est ที่ lobortis Aenean Eu Leo Quam Pellentesque Ornare sem lacinia quam venenatis vestibulum. </p> </div> <div> <div> </div> <h3> popover ขวา </h3> <div> <p> Aenean Eu Leo Quam PELLENTESQUE ORNARE SEM LACINIA QUAM VENENATIS. </p> </div> <div> <div> </div> <h3> popover ขวา </h3> <p> <p> sed posuere consectetur est ที่ lobortis Aenean Eu Leo Quam Pellentesque Ornare sem lacinia quam venenatis vestibulum. </p> </div> <div> <div> </div> <h3> ด้านล่างป๊อปโอเวอร์ </h3> <div> <p> Aenean Eu Leo Quam Pellentesque Ornare sem lacinia quam venenatis vestibulum. </p> </div> <div> <div> </div> <h3> popover ซ้าย </h3> <div> <p> Aenean Eu Leo Quam PELLENTESQUE ORNARE SEM LACINIA QUAM VENENATIS. </p> </div> <div> <div> </div> <h3> popover ซ้าย </h3> <p> <p> Aenean Eu Leo Quam Pellentesque Ornare sem lacinia quam venenatis vestibulum. </p> </div> </div> <div> </div>
แต่เรายังต้องตั้งเค้าโครงพื้นฐานอย่างง่ายสำหรับองค์ประกอบ
<style type = "text/css">. bs-example-popover .popover {ตำแหน่ง: สัมพัทธ์; แสดง: บล็อก; ลอย: ซ้าย; ความกว้าง: 240px; ระยะขอบ: 20px;} </style>การสาธิตแบบไดนามิก
มาดูการเรนเดอร์ก่อน
ปุ่มจะปรากฏขึ้นเมื่อคุณคลิกปุ่ม
จริงๆแล้วมันง่ายมากที่จะอ่านรหัส
[รหัส] <a id = "a2" data-placement = "Right" data-content = "นั่นคือเพื่อแสดงความดูถูกเหยียดหยามพฤติกรรมและความคิดที่น่าตกใจที่มีลักษณะเฉพาะเช่นสั้น ๆ , อ้วน, น่าเกลียด, น่าเกลียด, โง่, และ masturbation" slly " ของพวกเขาจากครอบครัวที่น่าสงสารเช่นชนบทในชนบทหรือหลายครัวเรือนในระดับต่ำสุดในเมืองโดยไม่มีภูมิหลังมากขึ้นโรงเรียนมัธยมหลายแห่งที่ถูกพักโรงเรียนไปที่เมืองเพื่อทำงานหรือกลายเป็นพนักงานเสิร์ฟร้านอาหารหรือผู้บริหารอินเทอร์เน็ตอินเทอร์เน็ต href = "#" data-original-title = "ความหมายดั้งเดิมของผ้าไหม"> กรุณาคลิกเพื่อสลับ popover </a> [รหัส]
มันเป็นเพียงฉลาก แต่ให้คลาสสไตล์ของปุ่มแล้วให้คุณลักษณะหลายอย่างซึ่งส่วนใหญ่ใช้เพื่อแสดงกล่องป๊อปอัพ:
คนแรก: data-original-title-ชื่อเรื่อง
ประการที่สอง: เนื้อหาเนื้อหาเนื้อหา
ประการที่สาม: ตำแหน่งการวางตำแหน่ง (ขึ้น, ด้านล่าง, ซ้าย, ขวา, ขวา)
แต่ตอนนี้ถ้าคุณเรียกใช้ปุ่มมีและกล่องป๊อปอัพเมื่อคุณคลิกปุ่มจะไม่ปรากฏขึ้น มันกลายเป็นเรื่องง่ายมากนั่นคือเรายังไม่ได้เริ่มต้นมันเช่นเดียวกับคำแนะนำเครื่องมือในส่วนก่อนหน้า
เพียงเพิ่มรหัส JavaScript ง่าย ๆ
<script type = "text/javascript"> $ ("#a1"). popover (); </script>สี่ทิศทาง
<div style = "margin-left: 200px; margin-top: 100px; margin-bottom: 200px;"> <div> <button type = "ปุ่ม" data-container = "body" data-toggle = "popover" data-placement = "left" type = "button" data-container = "body" data-toggle = "popover" data-placement = "top" data-content = "Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-togle "data-togle Sagittis lacus vel augue laoreet rutrum faucibus. "> กล่องป๊อปอัพล่าง </button> <button type =" ปุ่ม "data-container =" body "data-toggle =" popover "data-placement =" ขวา "
จากนั้นใช้ JavaScript เพื่อเปิดใช้งาน
<script type = "text/javascript"> $ ("#a1"). popover (); $ ("[data-toggle = popover]"). popover (); </script>ฟังก์ชั่นการเลือกเพิ่มเติม
สำหรับการพิจารณาประสิทธิภาพ API ของคุณลักษณะข้อมูลของคำแนะนำเครื่องมือและส่วนประกอบป๊อปอัพจะถูกเพิ่มเข้ามาซึ่งหมายความว่าคุณต้องเริ่มต้นด้วยตัวเอง
จำเป็นต้องมีการตั้งค่าเพิ่มเติมเมื่อใช้กล่องป๊อปอัพในกลุ่มปุ่มและกลุ่มกล่องอินพุต
เมื่อมีการใช้กล่องพรอมต์ร่วมกับ. btn-group หรือ. input-Group คุณต้องระบุตัวเลือกคอนเทนเนอร์: 'body' (ดูเอกสารด้านล่าง) เพื่อหลีกเลี่ยงผลข้างเคียงที่ไม่พึงประสงค์ (ตัวอย่างเช่นเมื่อกล่องป๊อปอัพปรากฏขึ้น
เมื่อใช้กล่องป๊อปอัพในองค์ประกอบหน้าต้องห้ามคุณต้องเพิ่มองค์ประกอบพิเศษเพื่อห่อมัน
ในการเพิ่มกล่องป๊อปอัปลงในองค์ประกอบที่ปิดใช้งานหรือ. disabled ให้ห่อองค์ประกอบหน้าเว็บที่ต้องเพิ่มลงในกล่องป๊อปอัพใน <div> จากนั้นใช้กล่องป๊อปอัปกับองค์ประกอบ <div> นี้
การใช้งาน
เปิดใช้งานกล่องป๊อปอัพผ่าน JavaScript:
$ ('#ตัวอย่าง'). popover (ตัวเลือก)
ตัวเลือก
ตัวเลือกสามารถส่งผ่านคุณสมบัติข้อมูลหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูลคุณต้องใส่ชื่อตัวเลือกหลังจาก data- ตัวอย่างเช่น data-animation = ""
วิธี
$ (). popover (ตัวเลือก)
เริ่มต้นกล่องป๊อปอัพสำหรับชุดขององค์ประกอบ
$ ('#element'). popover ('show')
แสดงกล่องป๊อปอัพ
$ ('#element'). popover ('ซ่อน')
ซ่อนกล่องป๊อปอัพ
$ ('#element'). popover ('สลับ')
แสดงหรือซ่อนกล่องป๊อปอัพ
$ ('#element'). popover ('ทำลาย')
ซ่อนและทำลายกล่องป๊อปอัพ
เหตุการณ์
$ ('[data-toggle = popover]'). on ('shown.bs.popover', function () {Alert (1);})หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript