Как создать переключатель в Bootstrap

93

Изначально я создал веб-приложение на HTML, CSS и JavaScript, затем меня попросили создать его снова и в Bootstrap. Я все сделал нормально, но у меня были кнопки переключения в веб-приложении, которые были заменены на кнопки переключения (изначально флажок) вместо кнопок переключения, которые у меня были изначально.

Код для кнопок:

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

а файлы JavaScript и CSS, с которыми связана HTML-страница:

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

Есть ли способ изменить код, чтобы вернуть кнопку переключения?

Меган Симе
источник
1
вот много примеров twitter.github.com/bootstrap/javascript.html#buttons
itsme
Я ценю ссылку, но в ней нет того, что я ищу. кнопка переключения, которая у меня была, была такой, какой вы бы видели на айфоне, например, типа «включено» / «выключено». Имеет ли это смысл?
Megan Sime
хорошо, так что это связано с jqtouch.js, а не с самозагрузкой, я думаю
itsme
1
ОК. хотя это на github, если так проще.
Megan Sime
1
LOL человек, я вижу бесконечный список файлов :) не могли бы вы быть более конкретным? : D
itsme

Ответы:

81

Первоначальный ответ от 2013 г.

Доступен отличный (неофициальный) Bootstrap Switch .

Классический переключатель 2013 года

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

В качестве переключателей он использует типы радио или флажки. typeДобавлен атрибут , так как v.1.8.

Исходный код доступен на Github .

Записка от 2018

Я бы не рекомендовал использовать такие старые кнопки Switch сейчас, так как они всегда страдали от проблем с удобством использования, на что указывали многие люди.

Пожалуйста, подумайте о том, чтобы взглянуть на современные переключатели, подобные этому, из среды React Component (не относящиеся к Bootstrap, но могут быть интегрированы в сетку Bootstrap и пользовательский интерфейс).

Существуют и другие реализации для Angular, View или jQuery.

Современный коммутатор 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'))

Встроенные переключатели начальной загрузки

См . Ответ ohkts11 о встроенных переключателях Bootstrap ниже .

smonff
источник
19
Я бы избегал этих переключателей: ux.stackexchange.com/questions/1318/…
ckarbass 01
3
Этот сайт больше не существует
w3bMak3r
Вы правы @ w3bMak3r, доменное имя изменилось. Обновлено.
smonff
Хороший плагин. легко использовать. а вот проблема с сафари 5.1.7. Когда я щелкаю один раз, другие двигаются. кто-нибудь может это решить?
Саровер Джахан
2
Bootstrap Toggle - еще одна альтернатива, основанная на бутстрапе
Charles P.
58

Если вы не против изменить свой HTML, вы можете использовать data-toggleатрибут в <button>s. См. Раздел « Одно переключение » в примерах кнопок :

<button type="button" class="btn btn-primary" data-toggle="button">
    Single toggle
</button>
Сэм
источник
1
Есть ли способ иметь внутренний флажок в одном переключателе, как в параметре флажка / радио ?
Шимми Вайцхандлер,
3
aria-pressed="true"можно использовать для проверки состояния
brauliobo
31

Bootstrap 3 имеет параметры для создания переключателей на основе флажков или переключателей: http://getbootstrap.com/javascript/#buttons

Флажки

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

Радио-кнопки

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

Чтобы они работали, вы должны инициализировать .btns с помощью Javascript Bootstrap:

$('.btn').button();
СтриптизВоин
источник
Есть ли способ иметь внутренний флажок в одном переключателе, как в параметре флажка / радио ?
Шимми Вайцхандлер,
@Shimmy: Если вы просто поместите один флажок в группу кнопок, вы получите такое же поведение. Я не знаю ни одного менее подробного способа получить одиночный переключатель с флажком.
StriplingWarrior
7

Я пытался вручную активировать «активный» класс с помощью javascript. Это не так удобно, как полная библиотека, но для простых случаев кажется достаточно:

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

Если хорошо подумать, «активный» класс используется при начальной загрузке при нажатии кнопки, а не до или после этого (в нашем случае), поэтому нет конфликта при повторном использовании одного и того же класса.

Попробуйте этот пример и сообщите мне, если он не удастся: http://jsbin.com/oYoSALI/1/edit?html,js,output

p2kmgcl
источник
1
Думаю, пользователь об этом не спрашивал, но ваш ответ просто ответил на мой вопрос!
tetri
Думаю, в любом случае это был бы следующий вопрос пользователя.
eaglei22
5

Если вы хотите сохранить небольшую базу кода, и вам понадобится кнопка-переключатель только для небольшой части приложения. Я бы посоветовал вместо этого поддерживать ваш код javascript самостоятельно (angularjs, javascript, jquery) и просто использовать простой CSS.

Хороший генератор кнопок переключения: https://proto.io/freebies/onoff/

Рик
источник
3

Вот это очень полезно для кнопки переключения загрузки . Пример во фрагменте кода !! и jsfiddle ниже.

  <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>
Я показал вам несколько примеров выше. Я надеюсь, что это помогает. Js Fiddle здесь. Исходный код доступен на GitHub.

Обновление 2020 для Bootstrap 4

Я рекомендовал bootstrap4-toggle в 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/popper.js@1.16.0/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/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/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>

Мухаммет Джан ТОНБУЛ
источник
Коротко и по существу, быстрое и простое решение, вы сделали мой день!
Mayer Spitzer
2

Вы можете использовать библиотеку CSS Toggle Switch. Просто включите CSS и запрограммируйте JS самостоятельно: http://ghinda.net/css-toggle-switch/bootstrap.html

OMA
источник
1
Хотя это может дать ответ на вопрос, лучше предоставить здесь актуальную информацию, а не просто ссылку. Ответы, содержащие только ссылки, не считаются хорошими ответами и, вероятно, будут удалены .
elixenide
Но это не ссылка на объяснение. Это ссылка на настоящую библиотеку, название которой я упоминаю в своем ответе. Вы действительно хотите, чтобы я разместил здесь весь исходный код библиотеки? Мой ответ был бы неправильным, если бы я просто сказал «используйте эту библиотеку: [ссылка]» без упоминания имени библиотеки, но, поскольку я упоминаю имя, я думаю, что ответ уместен, поскольку если ссылка испортилась, он / она может попробовать скачать библиотеку откуда-нибудь еще, так как имя известно.
OMA
Вам не обязательно публиковать исходный код всей библиотеки, но, по крайней мере, вам нужно дать некоторое представление о том, как ее использовать. «Просто включите CSS и запрограммируйте JS самостоятельно» не так уж и много и вряд ли поможет OP или другим пользователям.
elixenide
2
Что ж, это действительно так просто! Просто включите один из примеров кода CSS, а затем запрограммируйте JS тем, что хотите. Я не могу комментировать фактическое программирование JS, поскольку исходный плакат не запрашивал выполнение определенного действия при использовании кнопки переключения, так что еще я могу сказать об этом? Кроме того, почему принятый ответ считается нормальным? Это также ответ "только по ссылке"! (там просто написано: «Не уверен, что это поможет, но доступен отличный (неофициальный) Bootstrap Switch. Однако он использует типы радио»). Почему это нормально? Вы не прокомментировали его характер только для ссылок.
OMA
-1

В случае, если кто-то все еще ищет хороший переключатель / кнопку переключения, я последовал предложению Рика и создал вокруг него простую директиву angular , angular-switch . Помимо предпочтения переключателя в стиле Windows, общая загрузка также намного меньше (2 КБ против 23 КБ минифицированных css + js) по сравнению с angular-bootstrap-switch и bootstrap-switch, упомянутыми выше вместе.

Вы бы использовали его следующим образом. Сначала включите требуемый файл js и css:

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

И включите его в своем приложении angular:

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

Теперь вы готовы использовать его следующим образом:

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

введите описание изображения здесь

Эрик Вуллингс
источник