Cómo crear un botón de alternancia en Bootstrap

92

Originalmente creé una aplicación web en HTML, CSS y JavaScript, luego me pidieron que la creara nuevamente en Bootstrap. Lo he hecho todo bien, pero tenía botones de alternancia en la aplicación web que han cambiado a botones de radio (originalmente casilla de verificación) en lugar de los botones de alternancia que tenía originalmente.

El código de los botones es:

<label>
  Notifications
  <span class='toggle'>
    <input type='radio'
      class='notifications'
      name='notifications'
      id='notifications' />
  </span>
</li>
<label>
  Preview
  <span class='toggle'>
    <input type='radio'
      class='preview'
      name='preview'
      id='preview' />
  </span>
</li>

y los archivos JavaScript y CSS a los que está vinculada la página HTML son:

<script src = 'jqtouch.js'></script>
<script src="jquery.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">

¿Hay alguna forma de cambiar el código para poder recuperar el botón de alternancia?

Megan Sime
fuente
1
aquí hay muchos ejemplos twitter.github.com/bootstrap/javascript.html#buttons
itsme
agradezco el enlace, pero no tiene lo que estoy buscando. el botón de alternancia que tenía era el tipo que verías en un iPhone, como el tipo "encendido" / "apagado". ¿Tiene sentido?
Megan Sime
ok, entonces está relacionado con jqtouch.js y no para arrancar en sí, creo
itsme
1
Okay. sin embargo, está en github si eso es más fácil.
Megan Sime
1
LOL hombre, veo una lista infinita de archivos :) ¿no puedes ser más específico? : D
itsme

Respuestas:

80

Respuesta inicial de 2013

Hay disponible un excelente Bootstrap Switch (no oficial) .

Interruptor clásico de 2013

<input type="checkbox" name="my-checkbox" checked>
$("[name='my-checkbox']").bootstrapSwitch();

Utiliza tipos de radio o casillas de verificación como interruptores. Se typeha añadido un atributo desde V.1.8.

El código fuente está disponible en Github .

Nota de 2018

No recomendaría usar ese tipo de botones de Switch viejos ahora, ya que siempre parecían sufrir problemas de usabilidad como lo señalan muchas personas.

Considere echar un vistazo a los conmutadores modernos como este del marco de React Component (no relacionado con Bootstrap, pero se puede integrar en la cuadrícula y la interfaz de usuario de Bootstrap).

Existen otras implementaciones para Angular, View o jQuery.

Interruptor moderno 2018

import '../assets/index.less'
import React from 'react'
import ReactDOM from 'react-dom'
import Switch from 'rc-switch'

class Switcher extends React.Component {
  state = {
    disabled: false,
  }

  toggle = () => {
    this.setState({
      disabled: !this.state.disabled,
    })
  }

  render() {
    return (
      <div style={{ margin: 20 }}>
        <Switch
          disabled={this.state.disabled}
          checkedChildren={'开'}
          unCheckedChildren={'关'}
        />
        </div>
      </div>
    )
  }
}

ReactDOM.render(<Switcher />, document.getElementById('__react-content'))

Switches de Bootstrap nativos

Vea la respuesta de ohkts11 a continuación sobre los conmutadores Bootstrap nativos .

smonff
fuente
19
Evitaría
ckarbass
3
Este sitio ya no existe
w3bMak3r
Tienes razón @ w3bMak3r, el nombre de dominio ha sido cambiado. Actualizado.
smonff
Es un buen complemento. fácil de usar. pero problema con safari 5.1.7. Cuando hago clic una vez, otro se mueve. ¿Alguien puede resolver esto?
Sarower Jahan
2
Bootstrap Toggle es otra alternativa basada en bootstrap
Charles P.
58

Si no le importa cambiar su HTML, puede usar el data-toggleatributo en <button>s. Consulte la sección de alternancia única de los ejemplos de botones :

<button type="button" class="btn btn-primary" data-toggle="button">
    Single toggle
</button>
Sam
fuente
1
¿Hay alguna manera de tener una casilla de verificación interna en una sola palanca como en la opción de casilla de verificación / radio ?
Shimmy Weitzhandler
3
aria-pressed="true"se puede usar para verificar el estado
brauliobo
31

Bootstrap 3 tiene opciones para crear botones de alternancia basados ​​en casillas de verificación o botones de radio: http://getbootstrap.com/javascript/#buttons

Casillas de verificación

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Option 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>

Botones de radio

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

Para que estos funcionen, debe inicializar .btns con JavaScript de Bootstrap:

$('.btn').button();
StriplingGuerrero
fuente
¿Hay alguna manera de tener una casilla de verificación interna en una sola palanca como en la opción de casilla de verificación / radio ?
Shimmy Weitzhandler
@Shimmy: si pones una sola casilla de verificación en un grupo de botones, obtendrás el mismo comportamiento. No conozco ninguna forma menos detallada de obtener una palanca única respaldada por casillas de verificación.
StriplingWarrior
7

He estado intentando activar la clase 'activa' manualmente con javascript. No es tan utilizable como una biblioteca completa, pero para casos sencillos parece ser suficiente:

var button = $('#myToggleButton');
button.on('click', function () {
  $(this).toggleClass('active');
});

Si lo piensa detenidamente, bootstrap usa la clase 'activa' cuando se presiona el botón, no antes o después de eso (nuestro caso), por lo que no hay conflicto en la reutilización de la misma clase.

Prueba este ejemplo y dime si falla: http://jsbin.com/oYoSALI/1/edit?html,js,output

p2kmgcl
fuente
1
Creo que el usuario no preguntó al respecto, ¡pero su respuesta simplemente respondió a mi pregunta!
tetri
Creo que de todas formas habría sido la siguiente pregunta del usuario.
eaglei22
5

Si desea mantener una base de código pequeña, y solo necesitará el botón de alternancia para una pequeña parte de la aplicación. Sugeriría, en cambio, mantener su código javascript usted mismo (angularjs, javascript, jquery) y simplemente usar CSS simple.

Buen generador de botones de alternancia: https://proto.io/freebies/onoff/

Almiar
fuente
3

Aquí esta muy útil para Bootstrap Toggle Button . Ejemplo en fragmento de código !! y jsfiddle a continuación.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <input id="toggle-trigger" type="checkbox" checked data-toggle="toggle">
    <button class="btn btn-success" onclick="toggleOn()">On by API</button>
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
<button class="btn btn-primary" onclick="getValue()">Get Value</button>
<script>
  //If you want to change it dynamically
  function toggleOn() {
    $('#toggle-trigger').bootstrapToggle('on')
  }
  function toggleOff() {
    $('#toggle-trigger').bootstrapToggle('off')  
  }
  //if you want get value
  function getValue()
  {
   var value=$('#toggle-trigger').bootstrapToggle().prop('checked');
   console.log(value);
  }
</script>
Te mostré algunos ejemplos arriba. Espero que ayude. Js Fiddle está aquí El código fuente está disponible en GitHub.

Actualización 2020 para Bootstrap 4

Recomendé bootstrap4-toggle en 2020.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/js/bootstrap4-toggle.min.js"></script>

<input id="toggle-trigger" type="checkbox" checked data-toggle="toggle" data-onstyle="success">
<button class="btn btn-success" onclick="toggleOn()">On by API</button>
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
<button class="btn btn-primary" onclick="getValue()">Get Value</button>

<script>
  //If you want to change it dynamically
  function toggleOn() {
    $('#toggle-trigger').bootstrapToggle('on')
  }
  function toggleOff() {
    $('#toggle-trigger').bootstrapToggle('off')  
  }
  //if you want get value
  function getValue()
  {
   var value=$('#toggle-trigger').bootstrapToggle().prop('checked');
   console.log(value);
  }
</script>

Muhammet Can TONBUL
fuente
Breve, y al grano, solución rápida y fácil, ¡me alegraste el día!
Mayer Spitzer
2

Puede utilizar la biblioteca CSS Toggle Switch. Simplemente incluya el CSS y programe el JS usted mismo: http://ghinda.net/css-toggle-switch/bootstrap.html

OMA
fuente
1
Si bien esto puede responder a la pregunta, es mejor proporcionar la información real aquí y no solo un enlace. Las respuestas de solo enlace no se consideran buenas respuestas y probablemente se eliminarán .
elixenide
Pero este no es un vínculo a una explicación. Es un enlace a una biblioteca real, cuyo nombre menciono en mi respuesta. ¿De verdad quieres que publique aquí todo el código fuente de la biblioteca? Mi respuesta solo sería incorrecta si dijera "use esta biblioteca: [enlace]" sin mencionar el nombre de la biblioteca, pero como estoy mencionando el nombre, creo que la respuesta es apropiada, ya que si el enlace falla, él / ella puede intentar descargar la biblioteca desde otro lugar, ya que se conoce el nombre.
OMA
No es necesario que publique el código fuente de toda la biblioteca, pero al menos debe ofrecer una idea de cómo usarlo. "Solo incluye el CSS y programa el JS tú mismo" no es mucho para continuar y no es probable que ayude a OP u otros usuarios.
elixenide
2
Bueno, ¡es realmente así de fácil de usar! Simplemente incluya uno de los ejemplos de código CSS y luego programe el JS con lo que quiera hacer. No puedo comentar sobre la programación JS real, ya que el póster original no solicitó que se realizara una acción específica al usar el botón de alternancia, entonces, ¿qué más puedo decir al respecto? Además, ¿por qué la respuesta aceptada se considera correcta? ¡También es una respuesta de "solo enlace"! (Solo dice "No estoy seguro de si ayuda, pero hay disponible un excelente Bootstrap Switch (no oficial). Sin embargo, usa tipos de radio"). ¿Por qué esa respuesta está bien? No comentaste sobre su naturaleza de solo enlaces allí.
OMA
-1

En caso de que alguien todavía esté buscando un buen interruptor / botón de alternancia, seguí la sugerencia de Rick y creé una directiva angular simple a su alrededor, interruptor angular . Además de preferir un conmutador estilo Windows, la descarga total también es mucho más pequeña (2kb vs 23kb minified css + js) en comparación con el conmutador de arranque angular y el conmutador de arranque mencionado anteriormente juntos.

Lo usaría de la siguiente manera. Primero incluya el archivo js y css requerido:

<script src="./bower_components/angular-switch/dist/switch.js"></script>
<link rel="stylesheet" href="./bower_components/angular-switch/dist/switch.css"></link>

Y habilítelo en su aplicación angular:

angular.module('yourModule', ['csComp'
    // other dependencies
]);

Ahora está listo para usarlo de la siguiente manera:

<switch state="vm.isSelected" 
    textlabel="Switch" 
    changed="vm.changed()"
    isdisabled="{{isDisabled}}">
</switch>

ingrese la descripción de la imagen aquí

Erik Vullings
fuente