Plug-in bootstrap-switch adalah kontrol tombol sakelar yang diimplementasikan untuk bootstrap, yang dapat mendukung kustomisasi dimensi, warna, dan atribut lainnya. Tidak banyak tombol tipe switch yang digunakan di situs web domestik. Bootstrap sangat populer di luar negeri. Saya tidak tahu apakah kami tidak menyukainya atau merepotkan dan sulit digunakan untuk situs web. Namun, tombol pembuka ini adalah yang paling banyak digunakan pada perangkat seluler seperti ponsel, dan karakteristik layar mempromosikannya untuk berkembang lebih baik.
Deskripsi Fungsi:
Memperkenalkan penggunaan sederhana dua bentuk chekbox dan radio, ada lebih banyak efek dan fungsi untuk menelusuri demo, klik tombol untuk menghidupkan/mematikan dengan cara geser.
Petunjuk Penggunaan:
1. Memperkenalkan file CSS dan JS
<link rel="stylesheet" href="static/stylesheets/bootstrap-switch.css" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src = "static/js/bootstrap-switch.js"> </script>
2.HTML Konten Ditambahkan
<div data-on="info" data-off="success"> <input type="checkbox" checked> </div> <div data-on="success" data-off="warning"> <input type="checkbox" checked> </div> <div data-on="warning" data-off="danger"> <input type="checkbox" checked> </div> <div data-on="default" data-off="primary"> <input type = "centang kotak" diperiksa> </div>
1). Div sepenuhnya dimaksudkan untuk menambahkan gaya ke kotak centang.
2). Input sangat sederhana, ini adalah label biasa.
3) .make-switch: Tambahkan gaya CSS ke kotak centang menggunakan plug-in.
4) .Data-on: CSS Style ketika sedang dalam keadaan.
5) .data-off: Gaya CSS saat keadaan mati.
3. Penggunaan kotak radio:
<Label untuk = "Option11"> Opsi 1 </Label> <v div> <input id = "option11" type = "Radio" name = "Radio2" value = "option11"> </div> <label for = "option12"> Opsi 2 </label> <Div> <input id = "option12" type = "Radio" name = "Radio" Nilai = "Nilai" Radio "Nilai =" Nilai "Radio" Nilai "Radio" Nilai "Radio" Nilai "Radio" Nilai "Radio" Nilai "Radio" Nilai "Radio" Nilai "Radio" for = "option13"> Opsi 3 </label> <ver> <input id = "option13" type = "Radio" name = "Radio2" value = "option13"> </div>
Kotak radio radio digunakan dengan cara yang sama, karena salah satu kotak radio pertama -tama harus diubah, sehingga kode JS yang sesuai perlu ditambahkan;
<script> $ ('. Radio2'). on ('switch-change', function () {$ ('. Radio2'). Bootstrapswitch ('toggleradioSteLowuncheck', true);}); </script>4. Mulai
$ ("Div [class = 'switch']"). masing -masing (function () {$ this = $ (this); var oncolor = $ this.attr ("oncolor"); var offcolor = $ this.attr ("offcolor"); var ontext = $ this.attr ("ontext"); vartext = $ this. $ this.attr ("labeltext");1). Dapatkan semua sakelar divs melalui jQuery, dengan demikian mendapatkan properti mereka Oncolor, Offcolor, dll.
2). Segera setelah itu, dapatkan input elemen anak yang terkandung dalam div.
3). Muat input melalui metode BootstrapSwitch.
Dengan cara ini, kita dapat dengan mudah mencapai efek tombol sakelar yang kita inginkan.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan topik yang luar biasa kepada Anda: Tutorial Pembelajaran Bootstrap
Di atas adalah tentang cara menggunakan kontrol bootstrap (sakelar), saya harap ini akan membantu untuk pembelajaran semua orang.