Bootstrap Button (Tombol) widget
Button (tombol) di tombol Bootstrap diperkenalkan dalam bab ini. Sebuah tombol (Button) plug-in, Anda dapat menambahkan beberapa interaktif, seperti tombol kontrol negara atau membuat grup tombol untuk komponen lain (seperti toolbar).
Jika Anda ingin merujuk pada plug-in fitur individu, Anda perlu referensibutton.js.Atau, seperti Bootstrap Ikhtisar Plugin bab disebutkan, Anda bisa merujuk kebootstrap.jsatau versi kompresibootstrap.min.js.
Status Memuat
Untuk menambah keadaan beban tombol, cukup tambahkan tombol elemendata-loading-text = "Loading ..." sebagai sifat-sifatnya bisa, seperti yang ditunjukkan dalam contoh berikut:
contoh
<Tombol id = "lemak-btn" class = "btn btn-utama" Data-loading-text = "Loading ..."
ketik = "button"> Beban Status </ button>
<Script> $ (function () {$ ( ". Btn"). Klik (function () {$ (ini) .button ( 'loading'). Delay (1000) .queue (function () {// $ ( ini) .button ( 'ulang') ;});});}); </ script>
Hasilnya adalah sebagai berikut:
saklar tunggal
Untuk mengaktifkan tombol tunggal switch (yaitu, mengubah keadaan normal tombol ditekan negara dan sebaliknya), hanya menambahkandata-ubah = "tombol" elemen tombol sebagai sifat-sifatnya bisa, seperti yang ditunjukkan dalam contoh berikut:
contoh
<Tombol ketik = "tombol" class = "btn btn-utama"
Data-ubah = "button"> tunggal beralih </ button>
Hasilnya adalah sebagai berikut:
Centang (checkbox)
Anda dapat membuat kotak kelompok cek, dan dengan menambahkan datadata atribut-ubah ke btn-kelompok= "tombol" untuk menambahkan grup kotak saklar.
contoh
<Div class = "btn-kelompok" Data-ubah = "tombol">
<Label class = "btn btn-utama" >
<input ketik = "checkbox"> Option 1 </ label>
<Label class = "btn btn-utama" >
<input ketik = "checkbox"> opsi 2 </ label>
<Label class = "btn btn-utama" >
<input ketik = "checkbox"> Opsi 3 </ label>
</ Div>
Hasilnya adalah sebagai berikut:
tombol radio (radio)
Demikian pula, Anda dapat membuat grup radio, dan dengan menambahkan datadata atribut-ubah = "tombol" untuk menambahkan btn-kelompokuntuk beralih kelompok tombol radio.
contoh
<Div class = "btn-kelompok" Data-ubah = "tombol">
<Label class = "btn btn-utama" >
<input type = "radio" name = "Pilihan" id = "option1"> Option 1 </ label>
<Label class = "btn btn-utama" >
<input type = "radio" name = "Pilihan" id = "option2"> opsi 2 </ label>
<Label class = "btn btn-utama" >
<input type = "radio" name = "Pilihan" id = "option3"> Opsi 3 </ label>
</ Div>
Hasilnya adalah sebagai berikut:
pemakaian
Anda dapat mengaktifkan tombol (Button) pasangmelalui JavaScript, sebagai berikut:
$ ( '. Btn'). Button ()
Pilihan
Tidak ada pilihan.
cara
Berikut ini adalah beberapa tombol (Button) plug-in cara yang berguna:
| 方法 | 描述 | 实例 |
|---|
| button('toggle') | 切换按压状态。赋予按钮被激活的外观。您可以使用data-toggle属性启用按钮的自动切换。 |
$().button('toggle') |
| .button('loading') | 当加载时，按钮是禁用的，且文本变为 button 元素的data-loading-text属性的值。 |
$().button('loading') |
| .button('reset') | 重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。 |
$().button('reset') |
| .button(string) | 该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。 |
$().button(string) |
contoh
Contoh berikut menunjukkan penggunaan metode di atas:
contoh
<H2> Klik pada setiap tombol untuk melihat efek dari metode </ h2>
<H4> Demo .button ( 'beralih') metode </ h4>
<Div id = "myButtons1" class = "bs-contoh">
<Tombol ketik = "tombol" class = "btn btn-utama" > asli </ button>
</ Div>
<H4> Demo .button ( 'loading') metode </ h4>
<Div id = "myButtons2" class = "bs-contoh">
<Tombol ketik = "tombol" class = "btn btn-utama"
Data-loading-text = "Loading ..."> asli </ button>
</ Div>
<H4> Demo .button ( 'ulang') metode </ h4>
<Div id = "myButtons3" class = "bs-contoh">
<Tombol ketik = "tombol" class = "btn btn-utama"
Data-loading-text = "Loading ..."> asli </ button>
</ Div>
<H4> Demo .button (string) Metode </ h4>
<Tombol ketik = "tombol" class = "btn btn-utama" id = "myButton4"
Data-lengkap-text = "Loading selesai"> klik I </ button>
<Script>
$ (Fungsi () {$ ( "# MyButtons1 .btn" ) klik (function () {$ () tombol ini ( 'beralih') ;.}) ;.}); $ (Fungsi () {$ ( "# MyButtons2 .btn" ). Klik (function () {$ (ini). Button ( 'loading'). Delay (1000). Queue (function () {
});});}) ; $ (Fungsi () {$ ( "# MyButtons3 .btn" ). Klik (function () {$ (ini). Button ( 'loading'). Delay (1000). Queue (function () {$ Tombol (ini) ( ' ulang') ;.});});}); $ (Fungsi () {$ ( "# MyButton4") . Klik (function () {$ (ini). Button ( 'loading'). Delay (1000). Queue (function () {$ (Ini) tombol (. 'Lengkap');});});});
</ Script>
Hasilnya adalah sebagai berikut:
