Artikel ini terutama mempelajari kotak plug-in-pop JavaScript.
Kasus
Tambahkan overlay kecil ke konten halaman, seperti efek pada iPad, menambahkan informasi tambahan ke elemen halaman.
Mari kita lihat beberapa rendering kasus statis sederhana
Efeknya relatif sederhana, terutama bentuk kecil yang muncul secara statis, dibagi menjadi judul bentuk dan konten bentuk.
<div> <div> <div> </div> <h3> Popover Top </h3> <dv> <p> Sed posuere consectetur est di lobortis. Aenean Eu Leo Quam. Pellentesque Ornare sem lacinia quam venenatis vestibulum. </p> </div> <viv> <viv> </div> <h3> Popover kanan </h3> <dv> <p> Sed posuere consectetur est di lobortis. Aenean Eu Leo Quam. Pellentesque Ornare sem lacinia quam venenatis. </p> </div> <viv> <viv> </div> <h3> Popover kanan </h3> <v> <p> Sed posuere consectetur est di lobortis. Aenean Eu Leo Quam. Pellentesque Ornare sem lacinia quam venenatis vestibulum. </p> </div> <viv> <viv> </div> <h3> Popover bottom </h3> <v> <p> Sed posuere consectetur est di lobortis. Aenean Eu Leo Quam. Pellentesque Ornare sem lacinia quam venenatis vestibulum. </p> </div> <viv> <viv> </div> <h3> Popover kiri </h3> <v> <p> Sed posuere consectetur est di lobortis. Aenean Eu Leo Quam. Pellentesque Ornare sem lacinia quam venenatis. </p> </div> <div> <div> </div> <h3> Popover kiri </h3> <dv> <p> Sed posuere consectetur est di lobortis. Aenean Eu Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venenatis Vestibulum. </p> </div> </div> <viv> </div>
Tapi kita masih perlu mengatur tata letak dasar sederhana untuk elemen
<style type = "text/css">. bs-example-popover .popover {position: relatif; Tampilan: Blok; float: kiri; Lebar: 240px; margin: 20px;} </tyle>Demo dinamis
Mari kita lihat rendering terlebih dahulu
Tombol akan muncul saat Anda mengklik tombol.
Sebenarnya sangat sederhana untuk membaca kodenya.
[Kode] <a id = "a2" penempatan data = "kanan" konten-konten = "yaitu, untuk menyatakan penghinaan terhadap berbagai perilaku mengejutkan dan ide-ide yang memiliki karakteristik atribut seperti pendek, gemuk, buruk, jelek, bodoh, bodoh, dan masturbasi. Terutama merujuk pada sebagian besar dari mereka dari keluarga miskin, seperti pedesaan atau banyak rumah tangga kecil di tingkat bawah, tanpa lebih banyak latar belakang, banyak sekolah menengah pertama yang menangguhkan sekolah, pergi ke kota untuk bekerja, atau menjadi pelayan restoran, atau administrator internet kafe internet, dan mendapat piala yang sama di kota itu; href = "#" data-original-title = "Silk Original Meaning"> Silakan klik untuk beralih Popover </a> [kode]
Ini hanya label, tetapi memberikan kelas gaya tombol, dan kemudian memberikan beberapa atribut, yang terutama digunakan untuk menampilkan kotak pop-up:
Yang pertama: judul data-original-judul
Yang kedua: Konten Konten Data
Ketiga: posisi penempatan data (atas, bawah, kiri, kanan)
Tetapi sekarang jika Anda menjalankannya, tombol memilikinya, dan kotak pop-up saat Anda mengklik tombol tidak akan muncul. Ternyata sangat sederhana, yaitu, kami belum menginisialisasi, seperti tooltip di bagian sebelumnya.
Cukup tambahkan kode JavaScript sederhana.
<script type = "text/javascript"> $ ("#a1"). Popover (); </script>Empat arah
<Div style = "margin-kiri: 200px; margin-top: 100px; margin-bottom: 200px;"> <von> <tombol type = "tombol" Data-container = "body"-data-kilat = "Popover" Data-Placement = "Left" Data-Content = "Vivamus Sagittis Vel Vel Vel Augie Laoreet Raoreet Ringr. type = "tombol" Data-container = "body" data-kilat = "popover"-placement = "Top" Data-Content = "Vivamus sagittis lacus vel vel laoreet rutrum faucibus."> Kotak pop-up bagian atas = "Tombol" Data-Container "Data-Container =" Body "Data-Container =" Body "Data-Container =" Data-TOPLE = "DATA" DATAPLE = "DATA" DATAPLE = "DATA" DATAPLE = "DATA" DATAPLE = "DATA" TOMBLEPER = "DATA" DATAPLE = "DATA" DATAPLE = "TOMPLEK =" DATAPLEPER "Data-Container =" Data-Container = "Data-Container =" body "data sagittis lacus vel augluse laoreet rutrum faucibus. "> kotak pop-up yang lebih rendah </button> <tombol type =" tombol "container =" body "data-kilat =" Popover "-placement =" kanan "div> divamus> divittis lacus lacus vel vel laoreet rutrum rutrum </box> vivamus BULUTIS LACUS vel vel laoreet rutrum rutrum laoreet rutrum> vivamus BULUTIS </BOXION </BOKUS </BOKUS AUDUS RUTRUM RUTRUM FAUCIBUBUBUS."
Kemudian gunakan JavaScript untuk mengaktifkan
<type script = "text/javascript"> $ ("#a1"). Popover (); $ ("[data-kilat = Popover]"). Popover (); </script>Fungsi penambahan selektif
Untuk pertimbangan kinerja, API atribut data dari tooltips dan komponen pop-up ditambahkan secara opsional, yang berarti Anda harus menginisialisasi mereka sendiri.
Pengaturan tambahan diperlukan saat kotak pop-up digunakan dalam grup tombol dan grup kotak input
Ketika kotak prompt digunakan bersama dengan kelompok .btn-group atau .input-group, Anda perlu menentukan wadah: opsi 'body' (lihat dokumentasi di bawah) untuk menghindari efek samping yang tidak diinginkan (misalnya, ketika kotak pop-up muncul, halaman elemen yang bekerja sama dengannya mungkin menjadi lebih luas atau de-rounded).
Saat menggunakan kotak pop-up pada elemen halaman terlarang, Anda perlu menambahkan elemen tambahan untuk menyelesaikannya
Untuk menambahkan kotak popup ke elemen yang dinonaktifkan atau.
penggunaan
Aktifkan kotak pop-up melalui JavaScript:
$ ('#contoh'). Popover (opsi)
Opsi
Opsi dapat dilewati melalui properti data atau JavaScript. Untuk atribut data, Anda perlu meletakkan nama opsi setelah data-, misalnya data-animasi = "".
metode
$ (). Popover (opsi)
Menginisialisasi kotak pop-up untuk satu set elemen.
$ ('#elemen'). Popover ('show')
Menampilkan kotak pop-up.
$ ('#elemen'). Popover ('hide')
Sembunyikan kotak pop-up.
$ ('#elemen'). Popover ('sakelar')
Tunjukkan atau sembunyikan kotak pop-up.
$ ('#elemen'). Popover ('Destroy')
Sembunyikan dan hancurkan kotak pop-up.
peristiwa
$ ('[data-kilat = Popover]'). on ('show.bs.popover', function () {waspada (1);})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.