El complemento Bootstrap-Switch es un control de botón de interruptor implementado para Bootstrap, que puede admitir la personalización de dimensiones, color y otros atributos. No se utilizan muchos botones de tipo de interruptor en sitios web nacionales. Bootstrap es muy popular en el extranjero. No sé si no nos gusta o es problemático y difícil usarlo para sitios web. Sin embargo, este botón de apertura es el más utilizado en dispositivos móviles, como teléfonos móviles, y las características de la pantalla lo promueven para desarrollar mejor.
Descripción de la función:
Al introducir el uso simple de dos formas de chekbox y radio, hay más efectos y funciones para navegar en demostraciones, haga clic en el botón para encender/apagar de manera deslizante.
Instrucciones para su uso:
1. Introducir archivos CSS y 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> <crito src = "static/js/bootstrap-switch.js"> </script>
2. HTML Contenido agregado
<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" comprobado> </div>
1). El DIV tiene la intención de agregar estilos a la casilla de verificación.
2). La entrada es muy simple, es una etiqueta ordinaria.
3).-Swake-Switch: Agregue el estilo CSS a la casilla de verificación usando el complemento.
4) .Data-on: estilo CSS cuando está en estado.
5). Data-Off: el estilo CSS cuando el estado apagado es.
3. Uso de Radio Radio Box:
<etiqueta for = "option11"> opción 1 </etiqueta> <div> <input id = "option11" type = "radio" name = "radio2" value = "opción11"> </div> <etiqueta for = "opción12"> opción 2 </label> <div> <input id = "option12" type = "name" name = "radio2" valor = "opción12" marcado = "comprobado"> <div> <div> <1p "option13" option13 "option13"> option13 " 3 </label> <div> <input id = "opcion13" type = "radio" name = "radio2" valor = "opción13"> </div>
La caja de radio de radio se usa de la misma manera, porque uno de los cuadros de radio primero debe cambiarse, por lo que se debe agregar el código JS correspondiente;
<Script> $ ('.4. Comienza
$ ("div [class = 'switch']"). Cada (function () {$ this = $ (this); var onColor = $ this.attr ("oncolor"); var offcolor = $ this.attr ("offcolor"); var ontext = $ this.attr ("ontext"); var oftoxt = $ this.attr ("offtext"; $ this.attr ("LabelText");1). Obtenga todos los Divs de interruptor a través de jQuery, obteniendo así sus propiedades Oncolor, OffColor, etc.
2). Inmediatamente después, obtenga la entrada del elemento infantil contenido en el Div.
3). Cargue la entrada a través del método BootstraPSwitch.
De esta manera, podemos simplemente lograr el efecto del botón de interruptor que queremos.
Si aún desea estudiar en profundidad, puede hacer clic aquí para aprender y adjuntarle un tema maravilloso: Tutorial de aprendizaje de Bootstrap
Lo anterior se trata de cómo usar el control de interruptor de arranque (conmutador), espero que sea útil para el aprendizaje de todos.