Artikel ini terutama belajar tentang plug -in JavaScript - lipat.
1. Efek transisi
Tentang efek transisi
Untuk efek transisi sederhana, cukup perkenalkan transisi.js dan file JS lainnya bersama -sama. Jika Anda menggunakan file bootstrap.js yang dikompilasi (atau terkompresi), Anda tidak perlu memperkenalkannya secara terpisah.
Apa yang ada di dalamnya
Transition.js adalah penolong dasar untuk acara Transitionend dan juga merupakan simulasi efek transisi CSS. Ini digunakan oleh plug-in lain untuk mendeteksi apakah browser saat ini mendukung efek transisi CSS.
2. Lipat
Berikan gaya dasar dan dukungan fleksibel untuk komponen yang mendukung fungsi lipat, seperti acrondions dan navigasi.
Dependensi plugin
Plugin Collapse tergantung pada plugin efek transisi.
Kasus
Menggunakan plug-in lipat, komponen acron sederhana dibangun dengan memperluas komponen panel.
Mari kita lihat efeknya terlebih dahulu.
Selanjutnya, mari kita lihat implementasi kode.
<div style="margin-top:140px;"> <div id="accordion"> <div> <div> <h4> <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item </a> </h4> </div> <div id="collapseOne"> <div> Anim pariatur cliche REFRENDERIT, enim Eiusmod High Life Accusamus Terry Richardson Ad Squid. 3 Wolf Moon OfficialAute, brunch skateboard non cupidat. Truk Makanan Quinoa Nesciunt Laborum Eiusmod. Brunch 3 Wolf Moon Tempor, Sunt Aliqua meletakkan seekor burung di atasnya cquid single origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, kerajinan bir wes anderson cred nesciunt sapiente ea proident. AD Vegan Excleur Butcher Vice Lomo. Legging Occaecat Craft Beer Farm-to-Table, Denim Raw Denim Synth Nesciunt Anda mungkin belum pernah mendengar mereka menuduh tenaga kerja yang berkelanjutan. </div> </div> </div> <div> <h4> <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div> <div> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad cumi -cumi. 3 Wolf Moon OfficialAute, brunch skateboard non cupidatat. Truk Makanan Quinoa Nesciunt Laborum Eiusmod. Brunch 3 Wolf Moon Tempor, Sunt Aliqua meletakkan seekor burung di atasnya cquid single origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, kerajinan bir wes anderson cred nesciunt sapiente ea proident. AD Vegan Excleur Butcher Vice Lomo. Legging Occaecat Craft Beer Farm-to-Table, Denim Raw Denim Synth Nesciunt Anda mungkin belum pernah mendengar mereka menuduh tenaga kerja yang berkelanjutan. </div> </div> </div> <div> <h4> <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree"> <div> Anim pariatur cliche reprehenderit, enim eiusmod high life Accusamus Terry Richardson Ad Squid. 3 Wolf Moon Resmi Aute, Brunch Dolor Skateboard Non Cupidatat. Truk Makanan Quinoa Nesciunt Laborum Eiusmod. Brunch 3 Wolf Moon Tempor, Sunt Aliqua meletakkan seekor burung di atasnya cquid single origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, kerajinan bir wes anderson cred nesciunt sapiente ea proident. AD Vegan Excleur Butcher Vice Lomo. Legging Occucaecat Bir Kerajinan Bir-ke-meja, Denim Raw Denim Synth Nesciunt Anda mungkin belum pernah mendengar mereka menuduh tenaga kerja yang berkelanjutan. </div> </div> </div> </div> </div> </div>
Langkah 1: Pertama, lapisan terluar kelompok panel mencakup beberapa kelompok di bawah ini.
Langkah 2: Lihatlah beberapa grup sederhana
<dv> <h4> <a data-koggle = "collapse" data-koggle = "collapse" data-parent = "#akordeon" href = "#collapsone"> Collapsable Group Item#1 </a> </h4> </div> <Div ID = "Collapsone"> <Div> </Div> </Div> </Div> Div>
Struktur panel dapat dilihat dengan jelas melalui kode.
Panel-header dan Pandl-body, dan kemudian panel-header dapat berisi judul dan tautan. Hubungkan dengan panel-body melalui tautan.
Langkah 3: Anda dapat menemukan bahwa ada ID = "Accordion" di kelompok panel, dan kemudian ada data-parent = "#Accordion" di tautan di bawah setiap judul di bawah ini.
Jika dihapus, efeknya adalah setelah mengklik tautan lain, panel asli tidak akan menyusut lagi.
Anda dapat menunjukkan efek lipat dengan cara lain.
<Div style = "margin-top: 140px;"> <tombol type = "tombol" data-koggle = "collapse" data-target = "#demo"> keruntuhan sederhana </button> <div id = "demo"> anim pariatur klise reprehenderit, enim eiusmod high life accusamus terry richardson richardson ad squidson ad squidson. 3 Wolf Moon Resmi Aute, Brunch Dolor Skateboard Non Cupidat. Truk Makanan Quinoa Nesciunt Laborum Eiusmod. Brunch 3 Wolf Moon Tempor, Sunt Aliqua meletakkan seekor burung di atasnya cquid single origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, kerajinan bir wes anderson cred nesciunt sapiente ea proident. AD Vegan Excleur Butcher Vice Lomo. Legging Occaecat Bir Kerajinan Bir-ke-meja, Denim Raw Denim Synth Nesciunt Anda mungkin belum pernah mendengar mereka menuduh tenaga kerja berkelanjutan VHS. </Div>
penggunaan
Plugin lipatan mengontrol gaya melalui beberapa kelas sederhana
.Collapse menyembunyikan konten
.Collapse dalam konten acara
.Collapsesing. Ditambahkan ketika transisi dimulai, dan dihapus ketika selesai mungkin berarti bahwa efek transisi akan tersedia setelah lipatan ditambahkan, dan kemudian jika dihapus, itu akan berakhir.
Melalui atribut data
Hanya menambahkan data-toggle = "collapse" dan target data ke elemen halaman memberikan kemampuan untuk mengontrol elemen halaman yang dapat dilipat. Properti target data menerima pemilih CSS sebagai objek kontrolnya. Pastikan untuk menambahkan kelas runtuh ke elemen halaman yang runtuh. Jika Anda ingin status default elemen halaman yang runtuh diperluas, tambahkan kelas.
Untuk menambahkan pengontrol ke satu set elemen halaman yang dapat dilipat, tambahkan data-parent = "#selector". Silakan merujuk ke contoh di atas.
via JavaScript
<typon type = "tombol" ontClick = "open ()"> Buka </button> <tombol type = "tombol" onclick = "hide ()"> fold </button> <div id = "demo"> anim pariatur klise reprehenderit, enim eiusmod high life accusamus terry richardson ad tawaran. 3 Wolf Moon Resmi Aute, Brunch Dolor Skateboard Non Cupidat. Truk Makanan Quinoa Nesciunt Laborum Eiusmod. Brunch 3 Wolf Moon Tempor, Sunt Aliqua meletakkan seekor burung di atasnya cquid single origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, kerajinan bir wes anderson cred nesciunt sapiente ea proident. AD Vegan Excleur Butcher Vice Lomo. Legging Occucaecat Bir Kerajinan Bir-ke-meja, Denim Raw Denim Synth Nesciunt Anda mungkin belum pernah mendengar tentang mereka menuduh tenaga kerja yang berkelanjutan VHS. </div> <div id = "Accordion" style = "margin-top: 240px;">
<script type = "text/javascript"> $ (function () {$ ("#demo"). Collapse ({sakelar: false})}) fungsi terbuka () {$ ("#demo"). Collapse ("show"); } function hide () {$ ("#demo"). Collapse ("hide"); } </script>Lihatlah efek di atas
metode
Berikan elemen halaman fungsi yang dapat dilipat. Menerima objek opsional sebagai argumen.
$ ("#demo"). Collapse ({sakelar: false})
Dengan cara ini, elemen akan diperluas ketika diinisialisasi.
1. Collapse ('Toggle') menampilkan atau menyembunyikan elemen halaman yang dapat dilipat.
2.Collapse ('show') menampilkan elemen halaman yang dapat dilipat.
3.Collapse ('Hide') menyembunyikan elemen halaman yang dapat dilipat.
peristiwa
Plugin yang runtuh di Bootstrap memperlihatkan serangkaian acara yang dapat didengarkan.
Ini mengikat peristiwa tersembunyi dengan elemen.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan dua topik menarik kepada Anda: Tutorial Pembelajaran Bootstrap Bootstrap Tutorial Praktis
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.