1. Analisis Navigasi (NAV)
File kode sumber:
_navs.scss: Modul Navigasi
MIXINS/_NAV-DIVIDER.SCSS: LINE DIVIDER
MIXINS/_NAV-VERTIK-ALIGN.SCSS: Alignment vertikal
1. Ini hanya ditata dengan CSS dan tidak memiliki ketergantungan pada JS.
2. Modul navigasi dapat mencakup modul pull-down
3. Realisasi Distribusi Horizontal, Vertikal, Horizontal Equal (Implementasi Sel Tabel, Penghapusan 4.0), Tab, Kapsul dan Gaya Lainnya
4. Nav-Divider: Ada tinggi piksel untuk mewujudkan garis pembagi
5. Nav-stacked: Implementasi Penyelarasan Vertikal
6. Menyediakan kelas konten tab untuk membungkus tab, dan kemudian tab tab digunakan sebagai area konten untuk ekstensi halaman tab
7. Dropdown di bawah NAV-tab telah diproses untuk mengecilkan satu piksel ke atas, karena NAV-tab akan memiliki garis bawah dan tidak mengecilkan satu piksel ke atas, dan akan ada celah kosong.
// dropdowns.nav-tabs spesifik .dropdown-menu {// buat dropdown batas tumpang tindih tab perbatasan margin-top: -1px; // Lepaskan sudut bulat atas di sini karena ada tepi yang keras di atas menu @include border-top-radius (0);}2. Efek runtuh
File kode sumber:
Mixins/_Component-animations.scss: Implementasi runtuh untuk mencapai efek lipat
JavaScripts/Bootstrap/Collapse.js: Implementasi efek keruntuhan
1. $ This.data () mengumpulkan semua data-* data
2. Properti Induk: Menentukan bahwa keruntuhan saat ini dikendalikan oleh induk, yang terutama menyadari efek dari satu kontrol dan banyak. Berikut ini adalah kode menyembunyikan semua daftar anak di bawah orang tua yang sama:
return $ (this.options.parent) .find ('[data-koggle = "collapse"] [data-parent = "' + this.options.parent + '"]') .each ($. Proxy (function (i, element) {var $ element = $ (element) this.addaria dancollapsedclass (getTarget) {var $ element)3. Implementasi Praent juga membutuhkan integrasi kelas .Panel, karena ketika mencari, diyakini bahwa semua sublist ditempatkan di bawah kelas .Panel.
4. JQuery's End () Metode: Akhiri rantai filter saat ini dan Kembalikan elemen pencocokan yang diatur ke keadaan sebelumnya (posisi di mana rantai dimulai)
$ ("p"). Find ('. Bak'). Find ('span'). end (): kembalikan ke $ ("p")
5. ScrollHeight: Ketinggian halaman (dapatkan tinggi/lebar aktual untuk diperluas), berisi bagian yang tidak terlihat dari jendela, yang digunakan dalam runtuh untuk mengidentifikasi nilai maksimum yang akan diperluas, dan tinggi/widht akan dibersihkan setelah gerakan selesai.
var scrollSize = $ .camelcase (['gulir', dimensi] .join ('-')) ini. $ element .one ('bStransitionend', $ .proxy (lengkap, ini)) .emulateTransitionEnd (collapse.transition_duration) [dimensi] (this. $ element [0] [scrollSize])6. Elemen pemrosesan dibagi menjadi dua kategori: satu adalah untuk memperluas atau menyembunyikan elemen itu sendiri ($ elemen), dan yang lainnya adalah menyentuh tombol untuk mengembangkan atau menyembunyikan elemen ($ pemicu)
7. Dalam metode Hiden, ketinggian area terlipat akan digambar ulang, dan kemudian ketinggian area yang sebenarnya akan diperoleh:
ini. $ element [dimensi] (ini. $ elemen [dimensi] ()) [0] .offsetheigh
8. Pemicu metode Hiden dipicu secara default melalui penilaian dalam metode show:
if (actives && actives.length) {plugin.call (actives, 'hide') activesdata || actives.data ('bs.collapse', null)}Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.