Butang plug-in yang Bootstrap mesti pelajari setiap day_javascript kemahiran

Butang telah diperkenalkan dalam bab Butang Bootstrap. Dengan pemalam Button, anda boleh menambah beberapa interaksi, seperti mengawal keadaan butang atau membuat kumpulan butang untuk komponen lain (seperti bar alat).

Jika anda ingin merujuk kefungsian pemalam ini secara berasingan, maka anda perlu merujuk button.js. Sebagai alternatif, seperti yang dinyatakan dalam bab Gambaran Keseluruhan Plugin Bootstrap, anda boleh merujuk bootstrap.js atau versi mini bootstrap.min.js.

1. Memuatkan status

Untuk menambah status pemuatan pada butang, cuma tambah data-loading-text="Loading..." pada elemen butang sebagai atributnya, seperti ditunjukkan dalam contoh di bawah:

<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..."
 type="button"> 加载状态
</button>
<script>
 $(function() {
  $(".btn").click(function(){
   $(this).button('loading').delay(1000).queue(function() {
   // $(this).button('reset');
   });  
  });
 }); 
</script>

2. Pensuisan tunggal

Untuk mengaktifkan togol satu butang (iaitu menukar keadaan biasa butang kepada keadaan ditekan atau sebaliknya), cuma tambah data-toggle="button" sebagai atributnya kepada elemen butang, seperti yang ditunjukkan dalam contoh di bawah :

Salin kod Kod adalah seperti berikut:

75f0f2e493f72393621fa5a1b8ec5889Togol tunggal65281c5ac262bf6d81768915a4a77ac0

Nota: Pada pemuatan berbilang halaman dalam Firefox, butang mungkin kekal dilumpuhkan atau dipilih dalam borang. Penyelesaiannya ialah: tambah autocomplete="off".

3. Butang radio

Begitu juga, anda boleh membuat kumpulan butang radio dan menambah togol untuk kumpulan butang radio dengan menambahkan atribut data data-toggle="buttons" pada kumpulan-btn.

<div class="btn-group" data-toggle="buttons">                
 <label for="" class="btn btn-primary active">               
  <input type="radio" name="sex" autocomplete="off" checked>男           
 </label>                         
 <label for="" class="btn btn-primary">                 
  <input type="radio" name="sex" autocomplete="off">女             
 </label>                         
</div>  

                                                             

4. Butang semak

Anda boleh membuat kumpulan kotak pilihan dan menambah togol untuk kumpulan kotak pilihan dengan menambahkan atribut data data-toggle="buttons" pada btn-group.

<div class="btn-group" data-toggle="buttons">
 <label for="" class="btn btn-primary active">
  <input type="checkbox" name="fa" autocomplete="off" checked>
  音乐 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  体育 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  美术 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  电脑 </label>
</div>

Kaedah butang dalam pemalam Butang mempunyai tiga parameter: togol, set semula, rentetan (seperti memuatkan, lengkap).

//可代替 data-toggle="button"

$('button').on('click', function() {
 $(this).button('toggle');
})
 

Berikut ialah beberapa kaedah berguna dalam pemalam Button:

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia dapat membantu pembelajaran semua orang Untuk mendapatkan maklumat lanjut tentang Bootstrap, anda boleh merujuk topik khas:

Tutorial pembelajaran Bootstrap