Comment créer un bouton bascule dans Bootstrap

92

J'ai initialement créé une application Web en HTML, CSS et JavaScript, puis on m'a demandé de la créer à nouveau dans Bootstrap. J'ai tout fait très bien, mais j'avais des boutons à bascule dans l'application Web qui sont revenus à des boutons radio (case à cocher à l'origine) au lieu des boutons à bascule que j'avais à l'origine.

Le code des boutons est:

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

et les fichiers JavaScript et CSS auxquels la page HTML est liée sont:

<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-t-il un moyen de modifier le code afin que je puisse récupérer le bouton bascule?

Megan Sime
la source
1
voici de nombreux exemples twitter.github.com/bootstrap/javascript.html#buttons
itsme
J'apprécie le lien, mais il n'a pas ce que je recherche. le bouton bascule que j'avais était du genre que vous verriez sur un iPhone, comme le type «on» / «off». Cela a-t-il du sens?
Megan Sime
ok donc il est lié à jqtouch.js et pas à se bootstrap je pense
itsme
1
D'accord. c'est sur github si c'est plus facile, cependant.
Megan Sime
1
LOL man je vois une liste infinie de fichiers :) ne pouvez-vous pas être plus précis? : D
itsme

Réponses:

80

Réponse initiale de 2013

Un excellent commutateur Bootstrap (non officiel) est disponible .

Commutateur classique 2013

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

Il utilise des types de radio ou des cases à cocher comme commutateurs. Un typeattribut a été ajouté depuis V.1.8.

Le code source est disponible sur Github .

Note de 2018

Je ne recommanderais pas d'utiliser ce type d'anciens boutons Switch maintenant, car ils semblaient toujours souffrir de problèmes d'utilisation, comme l'ont souligné de nombreuses personnes.

Veuillez envisager de jeter un œil aux commutateurs modernes comme celui-ci à partir du framework React Component (non liés à Bootstrap, mais peuvent être intégrés dans la grille Bootstrap et l'interface utilisateur).

D'autres implémentations existent pour Angular, View ou jQuery.

Commutateur moderne 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'))

Commutateurs d'amorçage natifs

Voir la réponse de ohkts11 ci-dessous à propos des commutateurs Bootstrap natifs .

smonff
la source
19
J'éviterais
ckarbass
3
Ce site n'existe plus
w3bMak3r
Vous avez raison @ w3bMak3r, le nom de domaine a été changé. Actualisé.
smonff
C'est un joli plugin. facile à utiliser. mais problème avec safari 5.1.7. Quand je clique une fois, un autre bouge. quelqu'un peut-il résoudre ça?
Sarower Jahan
2
Bootstrap Toggle est une autre alternative basée sur le bootstrap
Charles P.
58

Si cela ne vous dérange pas de changer votre code HTML, vous pouvez utiliser l' data-toggleattribut sur <button>s. Voir la section Bascule unique des exemples de bouton :

<button type="button" class="btn btn-primary" data-toggle="button">
    Single toggle
</button>
Sam
la source
1
Existe-t-il un moyen d'avoir une case à cocher interne dans une seule bascule, comme dans l' option case à cocher / radio ?
Shimmy Weitzhandler
3
aria-pressed="true"peut être utilisé pour vérifier l'état
brauliobo
31

Bootstrap 3 propose des options pour créer des boutons à bascule basés sur des cases à cocher ou des boutons radio: http://getbootstrap.com/javascript/#buttons

Cases à cocher

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

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

Pour que cela fonctionne, vous devez initialiser .btns avec le Javascript de Bootstrap:

$('.btn').button();
StriplingGuerrier
la source
Existe-t-il un moyen d'avoir une case à cocher interne dans une seule bascule, comme dans l' option case à cocher / radio ?
Shimmy Weitzhandler
@Shimmy: Si vous ne cochez qu'une seule case dans un groupe de boutons, vous obtiendrez le même comportement. Je ne connais aucun moyen moins verbeux d'obtenir une simple bascule à case à cocher.
StriplingWarrior
7

J'ai essayé d'activer manuellement la classe «active» avec javascript. Ce n'est pas aussi utilisable qu'une bibliothèque complète, mais pour les cas simples, cela semble suffisant:

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

Si vous réfléchissez bien, la classe 'active' est utilisée par bootstrap lorsque vous appuyez sur le bouton, pas avant ou après (notre cas), donc il n'y a pas de conflit dans la réutilisation de la même classe.

Essayez cet exemple et dites-moi s'il échoue: http://jsbin.com/oYoSALI/1/edit?html,js,output

p2kmgcl
la source
1
Je pense que l'utilisateur ne l'a pas posé, mais votre réponse vient de répondre à ma question!
tetri
Je pense que cela aurait été la prochaine question de l'utilisateur de toute façon.
eaglei22
5

Si vous souhaitez conserver une petite base de code et que vous n'aurez besoin du bouton bascule que pour une petite partie de l'application. Je suggérerais plutôt de maintenir votre code javascript vous-même (angularjs, javascript, jquery) et d'utiliser simplement du CSS.

Bon générateur de bouton à bascule: https://proto.io/freebies/onoff/

Meule
la source
3

Voici ce très utile pour Bootstrap Toggle Button . Exemple d'extrait de code !! et jsfiddle ci-dessous.

  <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>
Je vous ai montré quelques exemples ci-dessus. J'espère que cela aide. Js Fiddle est ici Le code source est disponible sur GitHub.

Mise à jour 2020 pour Bootstrap 4

J'ai recommandé 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
la source
Bref, et au point, solution rapide et facile, vous avez fait ma journée!
Mayer Spitzer
2

Vous pouvez utiliser la bibliothèque CSS Toggle Switch. Incluez simplement le CSS et programmez le JS vous-même: http://ghinda.net/css-toggle-switch/bootstrap.html

OMA
la source
1
Bien que cela puisse répondre à la question, il est préférable de fournir les informations réelles ici et pas seulement un lien. Les réponses aux liens uniquement ne sont pas considérées comme de bonnes réponses et seront probablement supprimées .
elixenide
Mais ce n'est pas un lien vers une explication. C'est un lien vers une bibliothèque réelle, dont je mentionne le nom dans ma réponse. Voulez-vous vraiment que je poste tout le code source de la bibliothèque ici? Ma réponse ne serait fausse que si je disais simplement "utiliser cette bibliothèque: [lien]" sans mentionner le nom de la bibliothèque, mais comme je mentionne le nom, je pense que la réponse est appropriée car si le lien tourne mal, il / elle peut essayer de télécharger la bibliothèque ailleurs, puisque le nom est connu.
OMA
Vous n'êtes pas obligé de publier l'intégralité du code source de la bibliothèque, mais vous devez au moins offrir un aperçu de son utilisation. "Il suffit d'inclure le CSS et de programmer le JS vous-même" n'est pas grand-chose à faire et n'aidera probablement pas OP ou d'autres utilisateurs.
elixenide
2
Eh bien, c'est vraiment aussi simple à utiliser! Incluez simplement l'un des exemples de code CSS, puis programmez le JS avec tout ce que vous voulez faire. Je ne peux pas commenter la programmation JS réelle, puisque l'affiche originale n'a pas demandé qu'une action spécifique soit effectuée lors de l'utilisation du bouton bascule, alors que puis-je dire d'autre à ce sujet? Aussi, pourquoi la réponse acceptée est-elle considérée comme OK? C'est aussi une réponse "link-only"! (il dit simplement "Je ne sais pas si cela aide, mais un excellent commutateur d'amorçage (non officiel) est disponible. Il utilise cependant des types de radio"). Pourquoi cette réponse est-elle correcte? Vous n'avez pas commenté sa nature de lien uniquement.
OMA
-1

Au cas où quelqu'un serait toujours à la recherche d'un bon bouton interrupteur / bascule, j'ai suivi la suggestion de Rick et créé une simple directive angulaire autour de lui, angular-switch . En plus de préférer un commutateur de style Windows, le téléchargement total est également beaucoup plus petit (2kb vs 23kb minified css + js) par rapport à angular-bootstrap-switch et bootstrap-switch mentionnés ci-dessus ensemble.

Vous l'utiliseriez comme suit. Incluez d'abord les fichiers js et css requis:

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

Et activez-le dans votre application angulaire:

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

Vous êtes maintenant prêt à l'utiliser comme suit:

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

entrez la description de l'image ici

Erik Vullings
la source