Como criar um botão de alternância no Bootstrap

92

Eu originalmente criei um aplicativo da web em HTML, CSS e JavaScript, então fui solicitado a criá-lo novamente no Bootstrap. Fiz tudo bem, mas tinha botões de alternância no aplicativo da web que mudaram de volta para botões de rádio (originalmente caixa de seleção) em vez dos botões de alternância que tinha originalmente.

O código dos botõ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>

e os arquivos JavaScript e CSS aos quais a página HTML está vinculada são:

<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">

Existe uma maneira de alterar o código para que eu possa obter o botão de alternância de volta?

Megan Sime
fonte
1
aqui estão muitos exemplos twitter.github.com/bootstrap/javascript.html#buttons
itsme
agradeço o link, mas não tem o que procuro. o botão de alternância que eu tinha era do tipo que você veria em um iphone, como o tipo 'on' / 'off'. Isso faz sentido?
Megan Sime
ok, então ele está relacionado ao jqtouch.js e não ao
auto
1
Está bem. está no github se for mais fácil, no entanto.
Megan Sime de
1
LOL cara, eu vejo uma lista infinita de arquivos :) você não pode ser mais específico? : D
isme

Respostas:

80

Resposta inicial de 2013

Um excelente (não oficial) Bootstrap Switch está disponível .

Classic 2013 Switch

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

Ele usa tipos de rádio ou caixas de seleção como interruptores. Um typeatributo foi adicionado desde V.1.8.

O código-fonte está disponível no Github .

Nota de 2018

Eu não recomendaria usar esse tipo de botão Switch antigo agora, pois eles sempre pareceram sofrer de problemas de usabilidade, conforme apontado por muitas pessoas.

Considere dar uma olhada em Switches modernos como este da estrutura do Componente React (não relacionado ao Bootstrap, mas pode ser integrado na grade do Bootstrap e na IU).

Existem outras implementações para Angular, View ou jQuery.

Switch 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

Veja a resposta do ohkts11 abaixo sobre as opções nativas do Bootstrap .

smonff
fonte
19
Eu evitaria essas mudanças: ux.stackexchange.com/questions/1318/…
ckarbass 01 de
3
Este site não existe mais
w3bMak3r
Você está certo @ w3bMak3r, o nome de domínio foi alterado. Atualizada.
smonff
É um bom plugin. fácil de usar. mas problema com safari 5.1.7. Quando clico uma vez, outro está se movendo. alguém pode resolver isso?
Sarower Jahan
2
Bootstrap Toggle é outra alternativa baseada em bootstrap
Charles P.
58

Se você não se importa em mudar seu HTML, pode usar o data-toggleatributo em <button>s. Consulte a seção de alternância única dos exemplos de botão :

<button type="button" class="btn btn-primary" data-toggle="button">
    Single toggle
</button>
Sam
fonte
1
Existe uma maneira de ter uma caixa de seleção interna em uma única alternância, assim como na caixa de seleção / opção de rádio ?
Shimmy Weitzhandler
3
aria-pressed="true"pode ser usado para verificar o estado
brauliobo
31

O Bootstrap 3 tem opções para criar botões de alternância com base em caixas de seleção ou botões de rádio: http://getbootstrap.com/javascript/#buttons

Caixas de seleção

<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>

Botões do rádio

<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 funcionem, você deve inicializar os .btns com Javascript do Bootstrap:

$('.btn').button();
StriplingWarrior
fonte
Existe uma maneira de ter uma caixa de seleção interna em uma única alternância, assim como na caixa de seleção / opção de rádio ?
Shimmy Weitzhandler
@Shimmy: Se você apenas colocar uma única caixa de seleção em um grupo de botões, terá o mesmo comportamento. Não conheço nenhuma maneira menos prolixa de alternar uma única vez em uma caixa de seleção.
StriplingWarrior
7

Tenho tentado ativar a classe 'ativa' manualmente com javascript. Não é tão utilizável quanto uma biblioteca completa, mas para casos fáceis parece ser suficiente:

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

Se você pensar com cuidado, a classe 'ativa' é usada pelo bootstrap quando o botão está sendo pressionado, não antes ou depois disso (nosso caso), portanto, não há conflito em reutilizar a mesma classe.

Tente este exemplo e diga-me se ele falhar: http://jsbin.com/oYoSALI/1/edit?html,js,output

p2kmgcl
fonte
1
Acho que o usuário não perguntou sobre isso, mas sua resposta apenas respondeu à minha pergunta!
tetri
Acho que seria a próxima pergunta do usuário de qualquer maneira.
eaglei22
5

Se você deseja manter uma pequena base de código, só precisará do botão de alternância para uma pequena parte do aplicativo. Em vez disso, sugiro que você mantenha seu código javascript (angularjs, javascript, jquery) e use CSS simples.

Bom gerador de botão de alternância: https://proto.io/freebies/onoff/

Rick
fonte
3

Aqui é muito útil para botão de alternância de bootstrap . Exemplo no trecho de código !! e jsfiddle abaixo.

  <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>
Mostrei alguns exemplos acima. Espero que ajude. Js Fiddle está aqui. O código-fonte está disponível no GitHub.

Atualização 2020 para Bootstrap 4

Recomendei bootstrap4-toggle em 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
fonte
Resumindo, e direto ao ponto, solução rápida e fácil, você fez o meu dia!
Mayer Spitzer
2

Você pode usar a biblioteca CSS Toggle Switch. Basta incluir o CSS e programar o JS você mesmo: http://ghinda.net/css-toggle-switch/bootstrap.html

OMA
fonte
1
Embora isso possa responder à pergunta, é melhor fornecer as informações reais aqui e não apenas um link. Respostas apenas com link não são consideradas boas respostas e provavelmente serão excluídas .
elixenida de
Mas este não é um link para uma explicação. É um link para uma biblioteca real, cujo nome estou mencionando na minha resposta. Você realmente quer que eu poste todo o código-fonte da biblioteca aqui? Minha resposta só estaria errada se eu apenas dissesse "usar esta biblioteca: [link]" sem mencionar o nome da biblioteca, mas como estou mencionando o nome, acho que a resposta é adequada, pois se o link der errado, ele / ela pode tentar baixar a biblioteca de outro lugar, desde que o nome seja conhecido.
OMA de
Você não precisa postar o código-fonte da biblioteca inteira, mas pelo menos você precisa oferecer algumas dicas sobre como usá-lo. "Basta incluir o CSS e programar o JS" não é muito importante e provavelmente não ajudará o OP ou outros usuários.
elixenida de
2
Bem, é realmente muito fácil de usar! Basta incluir um dos exemplos de código CSS e, em seguida, programar o JS com o que você deseja fazer. Não posso comentar sobre a programação JS real, já que o autor original não pediu que uma ação específica fosse realizada ao usar o botão de alternância, então o que mais posso dizer sobre isso? Além disso, por que a resposta aceita é considerada OK? Também é uma resposta "somente link"! (apenas diz "Não tenho certeza se isso ajuda, mas um excelente (não oficial) Bootstrap Switch está disponível. Ele usa tipos de rádio"). Por que essa resposta está OK? Você não comentou sobre sua natureza apenas de link.
OMA de
-1

No caso de alguém ainda estar procurando por um botão de alternar / alternar legal, eu segui a sugestão de Rick e criei uma diretiva angular simples em torno dele, interruptor angular . Além de preferir um switch no estilo do Windows, o download total também é muito menor (2kb vs 23kb css + js minificado) em comparação com o switch de bootstrap angular e o switch de bootstrap mencionados acima.

Você o usaria da seguinte maneira. Primeiro inclua o arquivo js e css necessário:

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

E habilite-o em seu aplicativo angular:

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

Agora você está pronto para usá-lo da seguinte maneira:

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

insira a descrição da imagem aqui

Erik Vullings
fonte