Bootstarp mencipta petua component_javascript yang boleh dilipat-tutorial js-php.cn

Bootstarp mencipta petua component_javascript yang boleh dilipat

WBOY

Lepaskan： 2016-05-16 15:14:06

asal

1311 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

Panggilan melalui JavaScript
Anda boleh menggunakan kod di bawah untuk mencetuskan keruntuhan melalui JavaScript.

 $(".collapse").collapse()

Salin selepas log masuk

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.