Jak utworzyć przycisk przełączania w Bootstrap

93

Pierwotnie stworzyłem aplikację internetową w HTML, CSS i JavaScript, a następnie poproszono mnie o utworzenie jej ponownie w Bootstrap. Zrobiłem to dobrze, ale musiałem przełączać przyciski w aplikacji internetowej, które zmieniły się z powrotem na przyciski radia (pierwotnie pole wyboru) zamiast przycisków przełączania, które miałem pierwotnie.

Kod przycisków to:

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

a pliki JavaScript i CSS, do których prowadzi link do strony HTML to:

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

Czy istnieje sposób na zmianę kodu, abym mógł odzyskać przycisk przełączania?

Megan Sime
źródło
1
tutaj jest wiele przykładów twitter.github.com/bootstrap/javascript.html#buttons
itsme
doceniam link, ale nie ma tego, czego szukam. przycisk przełączania, który miałem, był podobny do tego, który można zobaczyć na iPhonie, jak rodzaj włączania / wyłączania. Czy to ma sens?
Megan Sime,
ok, więc jest to związane z jqtouch.js i myślę, że nie sam bootstrap
itsme
1
ok. jeśli to łatwiejsze, jest na githubie.
Megan Sime
1
LOL stary, widzę nieskończoną listę plików :) czy nie możesz być bardziej szczegółowy? : D
itsme

Odpowiedzi:

81

Pierwsza odpowiedź z 2013 roku

Dostępny jest doskonały (nieoficjalny) przełącznik Bootstrap .

Klasyczny przełącznik 2013

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

Używa typów radiowych lub pól wyboru jako przełączników. typeAtrybut został dodany od V.1.8.

Kod źródłowy jest dostępny na Github .

Notatka z 2018 r

Nie polecałbym teraz używania tego rodzaju starych przycisków Switcha, ponieważ zawsze wydawało się, że mają problemy z użytecznością co wskazuje wiele osób.

Proszę rozważyć przyjrzenie się nowoczesnym przełącznikom, takim jak ten z frameworka React Component (nie związanego z Bootstrapem, ale można je zintegrować z siatką Bootstrap i interfejsem użytkownika).

Istnieją inne implementacje dla Angular, View lub jQuery.

Nowoczesny przełącznik 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'))

Natywne przełączniki Bootstrap

Zobacz odpowiedź Ohkts11 poniżej na temat natywnych przełączników Bootstrap .

smonff
źródło
19
Unikałbym
ckarbass
3
Ta strona już nie istnieje
w3bMak3r
Masz rację @ w3bMak3r, nazwa domeny została zmieniona. Zaktualizowano.
smonff
To fajna wtyczka. łatwy w użyciu. ale problem z safari 5.1.7. Kiedy klikam raz, inne się poruszają. czy ktoś może to rozwiązać?
Sarower Jahan
2
Bootstrap Toggle to kolejna alternatywa oparta na bootstrapie
Charles P.
58

Jeśli nie masz nic przeciwko zmianie kodu HTML, możesz użyć data-toggleatrybutu na <button>s. Zobacz sekcję Przełączanie pojedyncze z przykładami przycisków :

<button type="button" class="btn btn-primary" data-toggle="button">
    Single toggle
</button>
Sam
źródło
1
Czy istnieje sposób, aby mieć wewnętrzne pole wyboru w pojedynczym przełączniku, tak jak w opcji pole wyboru / radio ?
Shimmy Weitzhandler
3
aria-pressed="true"można użyć do sprawdzenia stanu
brauliobo
31

Bootstrap 3 ma opcje tworzenia przycisków przełączania na podstawie pól wyboru lub przycisków radiowych: http://getbootstrap.com/javascript/#buttons

Pola wyboru

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

Przyciski radiowe

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

Aby to zadziałało, musisz zainicjować .btns za pomocą JavaScript Bootstrapa:

$('.btn').button();
StriplingWarrior
źródło
Czy istnieje sposób, aby mieć wewnętrzne pole wyboru w pojedynczym przełączniku, tak jak w opcji pole wyboru / radio ?
Shimmy Weitzhandler
@Shimmy: Jeśli po prostu umieścisz pojedyncze pole wyboru w grupie przycisków, uzyskasz takie samo zachowanie. Nie znam żadnego mniej szczegółowego sposobu na uzyskanie pojedynczego przełącznika z polem wyboru.
StriplingWarrior
7

Próbowałem ręcznie aktywować „aktywną” klasę za pomocą javascript. Nie jest tak użyteczna jak pełna biblioteka, ale w łatwych przypadkach wydaje się wystarczająca:

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

Jeśli dobrze się zastanowisz, klasa „aktywna” jest używana przez bootstrap podczas naciskania przycisku, a nie przed lub po tym (nasz przypadek), więc nie ma konfliktu w ponownym użyciu tej samej klasy.

Wypróbuj ten przykład i powiedz mi, jeśli się nie powiedzie: http://jsbin.com/oYoSALI/1/edit?html,js,output

p2kmgcl
źródło
1
Myślę, że użytkownik o to nie pytał, ale twoja odpowiedź właśnie odpowiedziała na moje pytanie!
tetri
Myślę, że i tak byłoby to następne pytanie użytkownika.
eaglei 22
5

Jeśli chcesz zachować małą bazę kodu, a będziesz potrzebować przycisku przełączania tylko dla małej części aplikacji. Sugerowałbym zamiast tego zachować własny kod javascript (angularjs, javascript, jquery) i po prostu użyć zwykłego CSS.

Dobry generator przycisków przełączania: https://proto.io/freebies/onoff/

Stóg
źródło
3

Tutaj jest to bardzo przydatne dla przycisku przełączania Bootstrap . Przykład we fragmencie kodu !! i jsfiddle poniżej.

  <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>
Pokazałem Ci kilka przykładów powyżej. Mam nadzieję, że to pomoże. Js Fiddle jest tutaj Kod źródłowy jest dostępny na GitHub.

Aktualizacja 2020 dla Bootstrap 4

Poleciłem bootstrap4-przełącznik w 2020 roku.

<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
źródło
Krótkie i na temat, szybkie i łatwe rozwiązanie, sprawiłeś, że mój dzień się spełnił!
Mayer Spitzer
2

Możesz użyć biblioteki CSS Toggle Switch. Wystarczy dołączyć CSS i samodzielnie zaprogramować JS: http://ghinda.net/css-toggle-switch/bootstrap.html

OMA
źródło
1
Chociaż może to odpowiedzieć na pytanie, lepiej jest podać tutaj rzeczywiste informacje, a nie tylko link. Odpowiedzi zawierające tylko łącze nie są uważane za dobre odpowiedzi i prawdopodobnie zostaną usunięte .
elixenide
Ale to nie jest link do wyjaśnienia. To link do rzeczywistej biblioteki, której nazwę wymieniam w mojej odpowiedzi. Czy naprawdę chcesz, żebym zamieścił tutaj cały kod źródłowy biblioteki? Moja odpowiedź byłaby błędna tylko wtedy, gdybym powiedział „użyj tej biblioteki: [link]” bez wymieniania nazwy biblioteki, ale ponieważ wymieniam nazwę, myślę, że odpowiedź jest odpowiednia, ponieważ jeśli łącze się zepsuje, on / może spróbować pobrać bibliotekę z innego miejsca, ponieważ nazwa jest znana.
OMA
Nie musisz publikować kodu źródłowego całej biblioteki, ale przynajmniej musisz dać wgląd w to, jak z niego korzystać. „Po prostu dołącz CSS i sam zaprogramuj JS” nie jest zbyt wiele do zrobienia i prawdopodobnie nie pomoże OP ani innym użytkownikom.
elixenide
2
Cóż, jest naprawdę łatwy w użyciu! Wystarczy dołączyć jeden z przykładów kodu CSS, a następnie zaprogramować JS za pomocą tego, co chcesz zrobić. Nie mogę komentować faktycznego programowania w JS, ponieważ oryginalny plakat nie prosił o wykonanie określonej czynności przy użyciu przycisku przełącznika, więc co jeszcze mogę o tym powiedzieć? Ponadto, dlaczego zaakceptowana odpowiedź jest uważana za OK? Jest to również odpowiedź typu „tylko łącze”! (jest po prostu napisane: „Nie jestem pewien, czy to pomaga, ale dostępny jest doskonały (nieoficjalny) przełącznik Bootstrap. Jednak używa typów radiowych”). Dlaczego ta odpowiedź jest OK? Nie skomentowałeś tam jego charakteru polegającego wyłącznie na łączach.
OMA
-1

Na wypadek, gdyby ktoś nadal szukał fajnego przełącznika / przełącznika, postąpiłem zgodnie z sugestią Ricka i utworzyłem wokół niego prostą dyrektywę kątową, przełącznik kątowy . Oprócz preferowania przełącznika w stylu systemu Windows, całkowite pobieranie jest również znacznie mniejsze (2kb w porównaniu z 23kb zminimalizowanym css + js) w porównaniu z wymienionymi powyżej przełącznikami angular-bootstrap i bootstrap.

Używałbyś tego w następujący sposób. Najpierw dołącz wymagane pliki js i css:

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

I włącz to w swojej aplikacji kątowej:

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

Teraz możesz go użyć w następujący sposób:

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

wprowadź opis obrazu tutaj

Erik Vullings
źródło