hujung hadapan web
tutorial js
Bootstarp mencipta petua component_javascript yang boleh dilipat
Bootstarp mencipta petua component_javascript yang boleh dilipat
Artikel ini akan mempelajari cara membuat komponen boleh lipat melalui Bootstarp Kandungan khusus adalah seperti berikut
Apa yang diperlukan
Anda mesti merujuk jquery.js dan bootstrap-collapse.js - kedua-dua fail JavaScript terletak dalam folder docs/assets/js.
Anda boleh membuat komponen boleh lipat tanpa menulis banyak JavaScript atau memanggil JavaScript.
Contoh
Contoh pertama menunjukkan cara membuat komponen boleh lipat tanpa memanggil JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>collapsible example</title>
<link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container-fluid">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Click me to exapand. Click me again to collapse. Part I.
</a>
</div>
<div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Click me to exapand. Click me again to collapse. Part II.
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Click me to exapand. Click me again to collapse. Part III.
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>
Penjelasan
Terdapat tiga perkara yang perlu diperhatikan di sini. Mula-mula, tambah data-toggle="collapse" pada pautan yang anda mahu klik untuk mengembangkan atau meruntuhkan komponen.
Kedua, tambahkan href atau atribut sasaran data kepada komponen induk yang nilainya ialah id komponen anak.
Ketiga, tambahkan atribut induk data untuk mencipta kesan akordion. Nilai atribut induk data adalah sama dengan nilai atribut id div bekas utama (yang memegang keseluruhan komponen akordion). Jika anda ingin mencipta komponen akordion ringkas yang tidak perlu sekompleks akordion, anda tidak perlu menambah sifat ini.
Contoh
Contoh kedua menunjukkan cara mencipta komponen mudah lipat.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>collapsible via JavaScript example</title> <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="myCollapsibleExample"><a href="#demo" data-toggle="collapse">Click me to expand and click me again to collapse.</a></div> <div id="demo" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehe. </div> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script> </body> </html>
Panggilan melalui JavaScript
Anda boleh menggunakan kod di bawah untuk mencetuskan keruntuhan melalui JavaScript.
$(".collapse").collapse() Pilihan, kaedah dan acara
Berikut ialah beberapa pilihan, kaedah dan acara yang tersedia melalui pemalam Bootstrap Collapsible JavaScript. Butirannya adalah seperti berikut:
Pilihan
induk:Jenis nilai ialah Pemilih. Nilai lalai adalah palsu. Apabila elemen induk dipaparkan, semua elemen boleh lipat di bawah elemen induk akan ditutup.
togol:Nilai adalah jenis Boolean. Nilai lalai adalah benar. Apabila dipanggil, togol semua elemen boleh lipat.
togol:Nilai adalah jenis Boolean. Nilai lalai adalah benar. Apabila dipanggil, togol semua elemen boleh lipat.
Kaedah
.collapse(options): Cetuskan kandungan boleh lipat. Menerima objek pilihan pilihan.
.collapse('toggle'): Tunjukkan atau sembunyikan elemen halaman yang boleh dilipat.
.collapse('show'): Memaparkan elemen halaman boleh lipat.
.collapse(hide): Sembunyikan elemen halaman yang boleh dilipat.
Acara
tunjukkan: Peristiwa ini dicetuskan serta-merta selepas kaedah contoh tunjukkan dipanggil.
ditunjukkan: Peristiwa ini dicetuskan apabila elemen halaman boleh lipat dipaparkan (dan kesan peralihan CSS telah dilaksanakan).
hide: Acara ini dicetuskan serta-merta selepas kaedah hide instance dipanggil.
tersembunyi: Peristiwa ini dicetuskan apabila elemen halaman boleh lipat disembunyikan daripada pengguna (dan kesan peralihan CSS telah selesai).
Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1389
52
Cara memasang komponen versi lama Windows 10 DirectPlay
Dec 28, 2023 pm 03:43 PM
Ramai pengguna sentiasa menghadapi beberapa masalah apabila bermain beberapa permainan di win10, seperti skrin membeku dan skrin kabur Pada masa ini, kami boleh menyelesaikan masalah dengan menghidupkan fungsi directplay, dan kaedah operasi fungsi itu juga Sangat mudah. Cara memasang directplay, komponen lama win10 1. Masukkan "Panel Kawalan" dalam kotak carian dan bukanya 2. Pilih ikon besar sebagai kaedah tontonan 3. Cari "Program dan Ciri" 4. Klik di sebelah kiri untuk membolehkan atau matikan fungsi menang 5. Pilih versi lama di sini Hanya tandakan kotak
Sarung telefon Google Pixel 9 Pro Fold terdedah: Skrin luar 6.4 inci, skrin dalam 8.02 inci
Jun 25, 2024 pm 02:35 PM
Menurut berita pada 25 Jun, sumber ytechb menerbitkan catatan blog semalam (24 Jun), berkongsi paparan sarung telefon bimbit Google Pixel 9 Pro Fold, sekali lagi menunjukkan reka bentuk bahagian belakang skrin lipat ini. Menurut berita sebelum ini, Google akan mengeluarkan siri telefon bimbit Pixel 9 pada Oktober tahun ini Selain tiga telefon dalam siri Pixel 9, Pixel Fold juga akan disertakan dalam siri Pixel 9, dan akan dinamakan Pixel 9. Pro Fold selepas ia dilancarkan secara rasmi. Sarung telefon yang terdedah kali ini datang daripada pengeluar aksesori Torro, kedai dalam talian UK dan AS telah menyenaraikan sarung telefon produk dan mendedahkan reka bentuk serta saiz paparan telefon. Halaman menunjukkan sejumlah besar pemaparan sarung telefon Pixel 9 Pro Fold
Telefon lipat Samsung 10,000 yuan W25 didedahkan: kamera hadapan bawah skrin 5 megapiksel dan badan lebih nipis
Aug 23, 2024 pm 12:43 PM
Menurut berita pada 23 Ogos, Samsung akan melancarkan telefon bimbit lipat W25 baharu, yang dijangka akan diumumkan pada penghujung September Ia akan membuat penambahbaikan yang sepadan dalam kamera hadapan bawah skrin dan ketebalan badan. Menurut laporan, Samsung W25, dengan nama kod Q6A, akan dilengkapi dengan kamera bawah skrin 5 megapiksel, yang merupakan penambahbaikan berbanding kamera 4 megapiksel siri Galaxy Z Fold. Selain itu, kamera hadapan skrin luaran W25 dan kamera sudut ultra lebar masing-masing dijangka 10 juta dan 12 juta piksel. Dari segi reka bentuk, W25 adalah kira-kira 10 mm tebal dalam keadaan terlipat, iaitu kira-kira 2 mm lebih nipis daripada Galaxy Z Fold 6 standard. Dari segi skrin, W25 mempunyai skrin luaran 6.5 inci dan skrin dalaman 8 inci, manakala Galaxy Z Fold6 mempunyai skrin luaran 6.3 inci dan skrin dalaman 8 inci.
Bagaimana untuk melaksanakan komponen kalendar menggunakan Vue?
Jun 25, 2023 pm 01:28 PM
Vue ialah rangka kerja bahagian hadapan yang sangat popular Ia menyediakan banyak alat dan fungsi, seperti pembahagian, pengikatan data, pemprosesan acara, dll., yang boleh membantu pembangun membina aplikasi Web yang cekap, fleksibel dan mudah diselenggara. Dalam artikel ini, saya akan memperkenalkan cara melaksanakan komponen kalendar menggunakan Vue. 1. Analisis keperluan Pertama, kita perlu menganalisis keperluan komponen kalendar ini. Kalendar asas harus mempunyai fungsi berikut: memaparkan halaman kalendar bulan semasa bertukar kepada bulan sebelumnya atau bulan hadapan dengan mengklik pada hari tertentu;
Model Samsung Galaxy Z Flip 6 pertama kali didedahkan: bezel lebih sempit, lipatan masih ada
Jun 22, 2024 am 03:28 AM
Menurut berita pada 21 Jun, media asing baru-baru ini mengeluarkan gambar model Samsung Galaxy Z Flip 6 di Internet. Mengikut gambar, boleh difahamkan bahawa sempadan Samsung Galaxy Z Flip 6 akan dikecilkan lagi, yang bermaksud bahawa lebar telefon mungkin dikurangkan dalam keadaan terlipat, dan ia juga akan memberikan cengkaman dan mudah alih yang lebih selesa . Lebih-lebih lagi, berbanding dengan ZFlip5 generasi sebelumnya, model Galaxy ZFlip6 lebih segi empat sama dan modul kamera di bahagian belakang lebih menonjol. Ia dijangka menggunakan sensor kamera baharu. Walaubagaimanapun dari hadapan, lipatan telefon masih agak ketara, namun memandangkan model yang bocor adalah telefon model, mungkin ada sedikit perbezaan dengan telefon sebenar, jadi ia adalah untuk rujukan sahaja. Dari segi konfigurasi prestasi, Galaxy
Kelemahan terbesar telefon mudah alih skrin boleh lipat: tiada senario aplikasi teras
Mar 16, 2024 am 09:04 AM
Apa yang kita bincangkan hari ini bukanlah seperti mana produk tertentu, tetapi kembali kepada topik "skrin lipat" itu sendiri dan meneroka "rasional" telefon bimbit skrin lipat. Pertama, mari kita lihat prestasi pasaran telefon bimbit skrin lipat Menurut laporan data terkini IDC, pasaran telefon bimbit skrin lipat China akan menghantar kira-kira 7.007 juta unit pada tahun 2023, peningkatan tahun ke tahun sebanyak 114.5%. Antaranya, pasaran telefon mudah alih skrin lipat China menghantar kira-kira 2.771 juta unit pada suku keempat 2023, peningkatan tahun ke tahun sebanyak 149.6%. Data itu kelihatan baik, dan pertumbuhannya juga sangat kukuh. Walau bagaimanapun, berbanding dengan kira-kira 270 juta penghantaran telefon pintar di pasaran China pada 2023, data ini sebenarnya tidak mencukupi. Secara umum
IDC menganggarkan bahawa penghantaran telefon pintar global pada 2024 ialah 1.2 bilion unit: 25 juta unit skrin boleh lipat, peningkatan tahun ke tahun sebanyak 37%
Feb 24, 2024 pm 02:20 PM
Menurut berita pada 24 Februari, IDC baru-baru ini mengeluarkan laporan penyelidikan pasaran, meramalkan bahawa penghantaran telefon pintar global akan mencapai 1.2 bilion unit pada 2024, peningkatan tahun ke tahun sebanyak 2.8%, dan kemudian akan mengekalkan pertumbuhan satu digit yang rendah menjelang 2028 . IDC percaya bahawa penghantaran keseluruhan pada tahun 2024 masih akan berada di bawah paras pra-pandemik, tetapi pasaran telefon pintar global telah menurun dan mula menunjukkan arah aliran menaik dalam pemulihan. IDC percaya bahawa dua faktor utama yang mendorong pemulihan pasaran keseluruhan ialah kitaran penyegaran peralatan dan pertumbuhan permintaan dalam pasaran baru muncul. Terdapat juga dua kuasa penggerak utama IDC menganggarkan bahawa penghantaran telefon mudah alih skrin lipat akan mencapai 25 juta unit pada tahun 2024, peningkatan tahun ke tahun sebanyak 37% adalah bahawa kecerdasan buatan (AI) telah menjadi sebahagian daripadanya perbincangan mengenai telefon pintar, mencetuskan
Adakah anda ingin tahu tentang lipatan perkataan?
Mar 19, 2024 pm 07:49 PM
Selepas mengedit kandungan teks dalam Word, anda perlu melihat dan menyemak kandungan yang diedit. Jika terdapat banyak kandungan, adalah menyusahkan untuk membacanya. Bagaimana untuk menyelesaikan masalah ini, kaedah lipatan perkataan diperlukan. Izinkan saya berkongsi tutorial kaedah dengan anda semua! Mula-mula, buka dokumen Word pada komputer anda, masukkan kandungan yang diperlukan dan pilihnya, kemudian klik pilihan "Mula" dalam bar menu, dan kemudian pilih gaya untuk digunakan pada perenggan teks yang baru anda pilih. Anda boleh rujuk bahagian yang bertanda bulatan merah dalam gambar di bawah. 2. Kemudian, perenggan teks yang dipilih akan menukar gayanya dan menambah anak panah kecil, seperti yang ditunjukkan dalam bulatan merah dalam gambar di bawah: 3. Klik anak panah kecil untuk mengembangkan atau meruntuhkan perenggan teks yang dipilih sebelumnya secara bebas, atau terus Klik kanan , daripada
