1. Tooltip (kotak prompt)
File kode sumber:
Tooltip.js
Tooltip.scss
Prinsip Implementasi:
1. Dapatkan informasi penentuan posisi elemen yang akan ditampilkan (atas, kiri, bawah, kanan, lebar, tinggi, dll.)
2. Hitung posisi tooltip, yang merupakan salah satu dari atas, kiri, bawah, dan kanan.
3. Kemudian hitung nilai koordinat berdasarkan nilai posisi yang dihitung
4. Terapkan nilai koordinat ke tooltip
Analisis Kode Sumber:
1. OwnerDocument: dokumen; Berisi dua objek: <doctype>, DocumentElement (root node)
2. $ .Contains (DOMA, DOMB): Tentukan apakah DOMA berisi elemen DOMB
3. Metode offset.setOffset diterapkan dan parameter menggunakan dilewati, karena ketika offset diatur, tidak dapat dibulatkan.
4. $ viewport: Tampilkan elemen kontainer tooltipr
5. GetPosition: Fungsi ini memperoleh informasi yang terkait dengan koordinat penentuan posisi elemen, seperti: atas, kiri, bawah, kanan, lebar, tinggi, gulir, dll.
5.1. Metode GetBoundingClientRect digunakan, tetapi metode ini dapat mencolokkan lebar dan tinggi di IE8.
5.2. Jika itu adalah tubuh, lebar dan tinggi akan diatur ulang ke jendela
5.3. Kode sumber adalah sebagai berikut:
$ elemen = $ elemen || ini. $ element // Jika tidak ada parameter yang dilewati, maka $ elemen (elemen yang memicu acara tooltip) adalah var default var el = $ elemen [0] var isbody = el.tagname == 'body' var elrect = el.getboundingclientrect () if (elrect.width == null) {// well; Lihat https://github.com/twbs/boottrap/issues/14093 elrect = $ .extend ({}, elrect, {width: elrect.right - elrect.left, tinggi: elrect.bottom - elrect.top})} var eloffset = isbody = isbody? {Top: 0, kiri: 0}: $ element.offset () var scroll = {scroll: wispody? document.documentelement.scrolltop || document.body.scrolltop: $ element.scrolltop ()} var outerDims = isinya? {width: $ (window) .width (), height: $ (window) .height ()}: nullReturn $ .extend ({}, elrect, gulir, luar, eloffset)6. GetCalculatedOffset: Menghitung nilai koordinat tooltip, menggunakan prinsip lipat lebar dan tinggi untuk mengimplementasikannya
6.1. Waktu terbawah
6.1.1. Atas adalah tinggi + tinggi elemen penentuan posisi (POS)
6.1.2. Kiri adalah lebar elemen penentuan posisi (POS) /2 Lebar elemen tooltip /2
6.2. Saat atas
6.2.1. Atas adalah ketinggian elemen top-tooltip yang menempatkan elemen (POS).
6.2.2. Kiri adalah lebar elemen penentuan posisi (POS) /2 Lebar elemen tooltip /2
6.3. Saat kiri
6.3.1. Atas adalah elemen penentuan posisi teratas (POS) Tinggi/2 elemen tooltip tinggi/2
6.3.2. Kiri adalah lebar elemen tooltip kiri yang menempatkan elemen (POS).
6.4. Benar
6.4.1. Atas adalah elemen penentuan posisi teratas (POS) Tinggi/2 elemen tooltip tinggi/2
6.4.2. Kiri adalah lebar elemen penentuan posisi (POS)
6.5. Posisi segitiga kecil umumnya 50% dari elemen. Namun, jika tooltip disembunyikan oleh kiri, atas, kanan, dan bawah, itu perlu dihitung ulang dan disesuaikan. Nama metode adalah: getViewportAdjusteddelta
6.5.1. Pertama -tama hitung lebar atau tinggi luapan
6.5.2. Kemudian hitung nilai Arrowdelta, sembunyikan nilai * 2 Lebar tooltip + lebar tooltip
6.5.3. Atur nilai persentase atas atau kiri dari segitiga
2. Popover (kotak popup)
File kode sumber:
Popover.js
Popover.Scss
Prinsip Implementasi:
1. Mewariskan implementasi tooltip
2. Dengan judul tambahan, Anda juga dapat menyesuaikan konten (kontrol interaktif seperti input dan tombol dapat dimasukkan ke dalamnya)
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.