Butang plug-in yang Bootstrap mesti pelajari setiap day_javascript kemahiran-tutorial js-php.cn

Butang plug-in yang Bootstrap mesti pelajari setiap day_javascript kemahiran

WBOY

Lepaskan： 2016-05-16 15:04:09

asal

1709 orang telah melayarinya

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>

Salin selepas log masuk

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:

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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');
})

Salin selepas log masuk

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