Das Bootstrap-Switch-Plug-In ist eine für Bootstrap implementierte Switch-Taste-Steuerung, die die Anpassung von Abmessungen, Farbe und anderen Attributen unterstützt. Auf häuslichen Websites werden nicht viele Schaltflächen zum Switch-Typ verwendet. Bootstrap ist im Ausland sehr beliebt. Ich weiß nicht, ob wir es nicht mögen oder es ist problematisch und schwierig, es für Websites zu verwenden. Diese Öffnungsschaltfläche ist jedoch die am häufigsten verwendete Mobilgeräte wie Mobiltelefone, und die Eigenschaften des Bildschirms fördern ihn, um sich besser zu entwickeln.
Funktionsbeschreibung:
Wenn Sie die einfache Verwendung von zwei Formen von Chekbox und Radio einführen, können Sie mehr Effekte und Funktionen zum Durchsuchen von Demos geben. Klicken Sie auf die Schaltfläche, um ein Ein- und Ausschalten auf eine gleitende Weise zu schalten.
Anweisungen zur Verwendung:
1. Einführung von CSS- und JS -Dateien
<link rel = "styleSheet" href = "static/stilesheets/bootstrap-sschitch.css"/> <script src = "http://ajax.googleapis.com/ajax/libs/jquery src = "static/js/bootstrap-switch.js"> </script>
2.HTML Inhalt hinzugefügt
<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="checkbox" überprüft> </div>
1). Die DIV soll ausschließlich Stile zum Kontrollkästchen hinzufügen.
2). Die Eingabe ist sehr einfach, es ist ein gewöhnliches Etikett.
3) .Make-Switch: Fügen Sie den CSS-Stil mit dem Plug-In zum Kontrollkästchen hinzu.
4) .Data-an: CSS-Stil, wenn es im Zustand ist.
5) .Data-off: Der CSS-Stil, wenn der Aus-Status ist.
3. Verwendung von Radio -Radio -Box:
<label for="option11">Option 1</label> <div> <input id="option11" type="radio" name="radio2" value="option11"> </div> <label for="option12">Option 2</label> <div> <input id="option12" type="radio" name="radio2" value="option12" checked="checked"> </div> <label for="option13">Option 3 </label> <div> <input id = "option13" type = "radio" name = "radio2" value = "option13"> </div>
Die Radio -Radio -Box wird auf die gleiche Weise verwendet, da eine der Funkbox zuerst geändert werden muss, sodass der entsprechende JS -Code hinzugefügt werden muss.
<Script> $ ('. Radio2'). On ('Switch-Change', function () {$ ('. Radio2'). Bootstrapswitch ('ToggleradiostateAllowincheck', true);}); </script>4. Starten Sie
$ ("div [class = 'switch']"). jeweils (function () {$ this = $ (this); var oncolor = $ this.attr ("OnColor"); var Offcolor = $ this.attr ("offcolor"); var onText = $ this.attr ("ontext"; $ this.attr ("LabelText");1). Holen Sie sich alle Switch -Divs über JQuery und erhalten damit ihre Eigenschaften Oncolor, Offcolor usw.
2). Nehmen Sie sofort die Eingabe des im Div enthaltenen untergeordneten Elements ein.
3). Laden Sie die Eingabe durch die Bootstrapswitch -Methode.
Auf diese Weise können wir einfach den gewünschten Switch -Taste -Effekt erreichen.
Wenn Sie noch eingehend studieren möchten, können Sie hier klicken, um Ihnen ein wunderbares Thema zu lernen und anzuhängen: Bootstrap -Lern -Tutorial
Im obigen Bereich geht es darum, wie die Steuerung des Bootstrap Switch (Switch) verwendet wird. Ich hoffe, es wird für das Lernen aller hilfreich sein.