Le plug-in Bootstrap-Switch est un contrôle de bouton de commutateur implémenté pour bootstrap, qui peut prendre en charge la personnalisation des dimensions, des couleurs et d'autres attributs. Il n'y a pas beaucoup de boutons de type commutateur utilisés sur les sites Web nationaux. Bootstrap est très populaire à l'étranger. Je ne sais pas si nous ne l'aimons pas ou si c'est gênant et difficile de l'utiliser pour les sites Web. Cependant, ce bouton d'ouverture est le plus largement utilisé sur les appareils mobiles tels que les téléphones mobiles, et les caractéristiques de l'écran le favorisent pour mieux se développer.
Description de la fonction:
Présentant l'utilisation simple de deux formes de chekbox et de radio, il y a plus d'effets et de fonctions pour parcourir les démos, cliquez sur le bouton pour activer / désactiver de manière glissante.
Instructions pour une utilisation:
1. Présenter les fichiers CSS et 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 Contenu ajouté
<div data-on = "info" data-off = "Success"> <entrée type = "checkbox" coché> </ div> <div data-on = "Success" data-off = "Warning"> <input type = "checkbox" coché> </ div> <div data-on = "warning" data-of = "danger"> <entrée type = "checkbox" checked> </vond> <div data-on = "par défaut" DATA-OFF = "Priennker" à vérifier " vérifié> </div>
1). Le div est entièrement destiné à ajouter des styles à la case à cocher.
2). L'entrée est très simple, c'est une étiquette ordinaire.
3) .Make-Switch: Ajoutez du style CSS à la boîte à cocher à l'aide du plug-in.
4) .data-on: style CSS lorsqu'il est à l'état.
5) .DATA-OFF: Le style CSS lorsque l'état désactivé est.
3. Utilisation de la radio Radio Box:
<étiquette pour = "Option11"> Option 1 </ label> <v> <input id = "option11" type = "radio" name = "radio2" value = "option11"> </ div> <étiquette pour = "option12"> Option 2 </ label> <v> <entrée id = "option12" type = "radio" name = "radio2" value = "option12" checked = "Checked"> </ div> 3 </ label> <v> <input id = "option13" type = "radio" name = "radio2" value = "option13"> </div>
La radio radio est utilisée de la même manière, car l'une des boîtes de radio doit d'abord être modifiée, donc le code JS correspondant doit être ajouté;
<Script> $ ('. Radio2'). On ('switch-change', function () {$ ('. radio2'). bootstrapSwitch ('toggleradiostateallowunchck', true);}); </script>4. Commencer
$ ("div [class = 'switch']"). chaque (fonction () {$ this = $ (this); var oncolor = $ this.attr ("oncolor"); var offColor = $ this.attr ("offColor"); var ontext = $ this.attr ("onText"); var offText = $ this.attr ("offText"); $ switch_input = $ (": only-child", $ this); $ switch_input.bootstrapSwitch ({oncolor: oncolor, offcolor: offColor, onText: onText, offText: offText, label: LabelText});});1). Obtenez tous les DIV Switch via jQuery, obtenant ainsi leurs propriétés oncolores, hors-choeur, etc.
2). Immédiatement après, obtenez l'apport de l'élément enfant contenu dans la div.
3). Chargez l'entrée via la méthode BootstrapSwitch.
De cette façon, nous pouvons simplement réaliser l'effet du bouton de commutateur que nous voulons.
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher un sujet merveilleux: Tutoriel d'apprentissage bootstrap
Ce qui précède concerne la façon d'utiliser le contrôle du commutateur de bootstrap (Switch), j'espère que cela sera utile à l'apprentissage de tout le monde.