1. คำแนะนำเครื่องมือ (กล่องพรอมต์)
ไฟล์ซอร์สโค้ด:
Tooltip.js
tooltip.scss
หลักการดำเนินการ:
1. รับข้อมูลการวางตำแหน่งขององค์ประกอบที่จะแสดง (บน, ซ้าย, ล่าง, ล่าง, ขวา, ความกว้าง, ความสูง ฯลฯ )
2. คำนวณตำแหน่งของคำแนะนำเครื่องมือซึ่งเป็นหนึ่งในด้านบนซ้ายล่างและขวา
3. จากนั้นคำนวณค่าพิกัดตามค่าตำแหน่งที่คำนวณได้
4. ใช้ค่าพิกัดกับคำแนะนำเครื่องมือ
การวิเคราะห์ซอร์สโค้ด:
1. OwnerDocument: เอกสาร; มีวัตถุสองวัตถุ: <Comtype>, DocumentElement (รูทโหนด)
2. $ .Contains (DOMA, DOMB): พิจารณาว่า DOMA มีองค์ประกอบ DOMB
3. ใช้วิธีการชดเชยการตั้งค่าเซ็ตและการใช้พารามิเตอร์จะถูกส่งผ่านเพราะเมื่อตั้งค่าชดเชยจะไม่สามารถโค้งมนได้
4. $ viewport: แสดงองค์ประกอบคอนเทนเนอร์ของ Tooltipr
5. GetPosition: ฟังก์ชั่นนี้ได้รับข้อมูลที่เกี่ยวข้องกับพิกัดการวางตำแหน่งองค์ประกอบเช่น: ด้านบน, ซ้าย, ด้านล่าง, ขวา, ความกว้าง, ความสูง, เลื่อน ฯลฯ ฯลฯ
5.1. ใช้วิธี getBoundingClientRect แต่วิธีนี้สามารถเสียบความกว้างและความสูงใน IE8
5.2. หากเป็นร่างกายความกว้างและความสูงจะถูกรีเซ็ตเป็นหน้าต่าง
5.3. ซอร์สโค้ดมีดังนี้:
$ element = $ element || สิ่งนี้. $ element // หากไม่มีพารามิเตอร์ถูกส่งผ่านดังนั้น $ องค์ประกอบ (องค์ประกอบที่กระตุ้นเหตุการณ์คำแนะนำเครื่องมือ) คือค่าเริ่มต้น var el = $ องค์ประกอบ [0] var isbody = el.tagname == ดู https://github.com/twbs/bootstrap/issues/14093 elrect = $. extend ({}, elrect, {width: elrect.right - elrect.left, ความสูง: elrect.bottom - elrect.top}) {top: 0, ซ้าย: 0}: $ element.offset () var scroll = {scroll: isbody? document.documentelement.scrolltop || document.body.scrolltop: $ element.scrolltop ()} var outerdims = isbody? {width: $ (window) .width (), ความสูง: $ (หน้าต่าง) .height ()}: nullreturn $. extend ({}, elrect, scroll, outerdims, eloffset)6. GetCalculatedOffset: คำนวณค่าพิกัดของคำแนะนำเครื่องมือโดยใช้หลักการความกว้างและความสูงในการพับเพื่อนำไปใช้
6.1. เวลาต่ำสุด
6.1.1. ด้านบนคือความสูงด้านบน + ขององค์ประกอบการวางตำแหน่ง (POS)
6.1.2. ซ้ายคือความกว้างขององค์ประกอบการวางตำแหน่ง (POS) /2 ความกว้างขององค์ประกอบเครื่องมือ /2 ความกว้าง /2
6.2. เมื่อด้านบน
6.2.1. ด้านบนคือความสูงขององค์ประกอบ top-tooltip ที่ค้นหาองค์ประกอบ (POS)
6.2.2. ซ้ายคือความกว้างขององค์ประกอบการวางตำแหน่ง (POS) /2 ความกว้างขององค์ประกอบเครื่องมือ /2 ความกว้าง /2
6.3. เมื่อออกไป
6.3.1. ด้านบนเป็นองค์ประกอบการวางตำแหน่งด้านบน (POS) ความสูง/2 เครื่องมือความสูงความสูง/2 ความสูง/2
6.3.2. ซ้ายคือความกว้างขององค์ประกอบคำแนะนำเครื่องมือด้านซ้ายที่หาองค์ประกอบ (POS)
6.4. ขวา
6.4.1. ด้านบนเป็นองค์ประกอบการวางตำแหน่งด้านบน (POS) ความสูง/2 เครื่องมือความสูงความสูง/2 ความสูง/2
6.4.2. ซ้ายคือความกว้างขององค์ประกอบการวางตำแหน่ง (POS)
6.5. ตำแหน่งของสามเหลี่ยมขนาดเล็กโดยทั่วไปคือ 50% ขององค์ประกอบ อย่างไรก็ตามหากคำแนะนำเครื่องมือถูกซ่อนอยู่ทางซ้ายด้านบนขวาและด้านล่างจะต้องมีการคำนวณใหม่และปรับใหม่ ชื่อวิธีคือ: getViewportAdjusteddelta
6.5.1. ก่อนคำนวณความกว้างหรือความสูงของการล้นครั้งแรก
6.5.2. จากนั้นคำนวณค่าของ Arrowdelta ซ่อนค่า * 2 ความกว้างของคำแนะนำเครื่องมือ + ความกว้างของคำแนะนำเครื่องมือเครื่องมือ
6.5.3. ตั้งค่าของเปอร์เซ็นต์ด้านบนหรือซ้ายของสามเหลี่ยม
2. ป๊อปโอเวอร์ (กล่องป๊อปอัพ)
ไฟล์ซอร์สโค้ด:
popover.js
popover.scss
หลักการดำเนินการ:
1. สืบทอดการใช้งานคำแนะนำเครื่องมือ
2. ด้วยชื่อเพิ่มเติมคุณยังสามารถปรับแต่งเนื้อหา (การควบคุมแบบโต้ตอบเช่นอินพุตและปุ่มสามารถแทรกลงได้)
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript