การวิเคราะห์ที่ครอบคลุมเกี่ยวกับวิธีการใช้ NAV และการล่มสลายใน bootstrap

1. การวิเคราะห์การนำทาง (NAV)

ไฟล์ซอร์สโค้ด:

_navs.scss: โมดูลนำทาง

mixins/_nav--vidider.scss: Divider Line

mixins/_nav-vertical-align.scss: การจัดแนวแนวตั้ง

1. มันเป็นเพียงสไตล์ด้วย CSS และไม่ต้องพึ่งพา JS

2. โมดูลการนำทางอาจรวมโมดูลแบบดึงลง

3. ตระหนักถึงการกระจายแนวนอนแนวตั้ง, แนวนอนเท่ากัน (การใช้งานตารางเซลล์, การกำจัด 4.0), แท็บ, แคปซูลและสไตล์อื่น ๆ

4. Navid Divider: มีความสูงของพิกเซลที่จะตระหนักถึงเส้นแบ่ง

5. Nav-Stacked: การจัดตำแหน่งแนวตั้ง

6. จัดเตรียมคลาสเนื้อหาแท็บเพื่อห่อแท็บจากนั้นใช้แท็บ-เพนเป็นพื้นที่เนื้อหาสำหรับส่วนขยายหน้าแท็บ

7. แบบเลื่อนลงภายใต้ NAV-Tabs ได้รับการประมวลผลเพื่อลดขนาดพิกเซลขึ้นไปหนึ่งพิกเซลเนื่องจาก NAV-TABS จะมีบรรทัดล่างและไม่หดพิกเซลขึ้นไปหนึ่งพิกเซลขึ้นไปและจะมีช่องว่างว่างเปล่า

 // เฉพาะ dropdowns.nav-tabs .dropdown-menu {// ทำแท็บซ้อนทับชายแดนแบบเลื่อนลงมาก่อนขอบด้านบน: -1px; // ลบมุมโค้งมนด้านบนที่นี่เนื่องจากมีขอบแข็งเหนือเมนู @include border-top-radius (0);}

2. เอฟเฟกต์การล่มสลาย

ไฟล์ซอร์สโค้ด:

MixIns/_component-animations.scss: การยุบการใช้งานเพื่อให้ได้เอฟเฟกต์การพับ

JavaScripts/bootstrap/collapse.js: การยุบเอฟเฟกต์การใช้งาน

1. $ this.data () รวบรวมข้อมูลทั้งหมด-* ข้อมูล

2. คุณสมบัติหลัก: ระบุว่าการล่มสลายในปัจจุบันถูกควบคุมโดยผู้ปกครองซึ่งส่วนใหญ่ตระหนักถึงผลกระทบของการควบคุมหนึ่งครั้งและอีกมากมาย ต่อไปนี้เป็นรหัสของการซ่อนรายการเด็กทั้งหมดภายใต้พาเรนต์เดียวกัน:

 return $ (this.options.parent) .find ('[data-toggle = "การล่มสลาย"] [data-parent = "' + this.options.parent + '"]') .Each ($. proxy (ฟังก์ชั่น (i, element) {var $ element = $ (องค์ประกอบ) สิ่งนี้

3. การดำเนินการของ PRAENT ยังต้องมีการรวมเข้าด้วยกันของคลาส. แพนเนลเพราะเมื่อค้นหาเชื่อว่ามีการวางย่อยทั้งหมดอยู่ภายใต้คลาส. แพนเนล

4. วิธีการสิ้นสุดของ jQuery (): สิ้นสุดห่วงโซ่ตัวกรองปัจจุบันและคืนค่าองค์ประกอบการจับคู่ที่ตั้งค่าเป็นสถานะก่อนหน้า (ตำแหน่งที่ห่วงโซ่เริ่มต้น)

$ ("P") ค้นหา ('. bak') ค้นหา ('span'). end (): คืนค่าเป็น $ ("p")

5. Scrollheight: ความสูงของหน้า (รับความสูง/ความกว้างจริงที่จะขยาย) ประกอบด้วยส่วนที่มองไม่เห็นของหน้าต่างซึ่งใช้ในการล่มสลายเพื่อระบุค่าสูงสุดที่จะขยายและความสูง/widht จะถูกล้างหลังจากการเคลื่อนไหวเสร็จสมบูรณ์

 var scrollsize = $ .camelcase (['Scroll', Dimension] .oin ('-')) สิ่งนี้ $ element. one ('bstransitionend', $ .proxy

6. องค์ประกอบการประมวลผลแบ่งออกเป็นสองประเภท: หนึ่งคือการขยายหรือซ่อนองค์ประกอบเอง ($ องค์ประกอบ) และอื่น ๆ คือการสัมผัสปุ่มเพื่อพัฒนาหรือซ่อนองค์ประกอบ ($ trigger)

7. ในวิธี Hiden ความสูงของพื้นที่พับจะถูกวาดใหม่และจากนั้นจะได้รับความสูงของพื้นที่จริง:

สิ่งนี้. $ Element [DIMENSION] (นี่คือ $ element [DIMENSION] ()) [0] .OffSetheigh

8. ทริกเกอร์ของวิธี Hiden ถูกทริกเกอร์โดยค่าเริ่มต้นผ่านการตัดสินในวิธีการแสดง:

 if (actives && activeS.length) {plugin.call (actives, 'ซ่อน') ActiveSdata || activeS.data ('bs.collapse', null)}

ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript