Изначально я создал веб-приложение на 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">
Есть ли способ изменить код, чтобы вернуть кнопку переключения?
javascript
jquery
css
twitter-bootstrap
jqtouch
Меган Симе
источник
источник
Ответы:
Первоначальный ответ от 2013 г.
Доступен отличный (неофициальный) Bootstrap Switch .
<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.
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 ниже .
источник
Если вы не против изменить свой HTML, вы можете использовать
data-toggle
атрибут в<button>
s. См. Раздел « Одно переключение » в примерах кнопок :<button type="button" class="btn btn-primary" data-toggle="button"> Single toggle </button>
источник
aria-pressed="true"
можно использовать для проверки состояния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>
Чтобы они работали, вы должны инициализировать
.btn
s с помощью Javascript Bootstrap:$('.btn').button();
источник
Я пытался вручную активировать «активный» класс с помощью javascript. Это не так удобно, как полная библиотека, но для простых случаев кажется достаточно:
var button = $('#myToggleButton'); button.on('click', function () { $(this).toggleClass('active'); });
Если хорошо подумать, «активный» класс используется при начальной загрузке при нажатии кнопки, а не до или после этого (в нашем случае), поэтому нет конфликта при повторном использовании одного и того же класса.
Попробуйте этот пример и сообщите мне, если он не удастся: http://jsbin.com/oYoSALI/1/edit?html,js,output
источник
Если вы хотите сохранить небольшую базу кода, и вам понадобится кнопка-переключатель только для небольшой части приложения. Я бы посоветовал вместо этого поддерживать ваш код javascript самостоятельно (angularjs, javascript, jquery) и просто использовать простой CSS.
Хороший генератор кнопок переключения: https://proto.io/freebies/onoff/
источник
Вот это очень полезно для кнопки переключения загрузки . Пример во фрагменте кода !! и 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>
источник
Вы можете использовать библиотеку CSS Toggle Switch. Просто включите CSS и запрограммируйте JS самостоятельно: http://ghinda.net/css-toggle-switch/bootstrap.html
источник
Вы можете использовать переключатель дизайна материалов для Bootstrap 3.3.0
http://bootsnipp.com/snippets/featured/material-design-switch
источник
Решение Bootstrap 4
bootstrap 4 имеет встроенный переключатель. Вот документация. https://getbootstrap.com/docs/4.3/components/forms/#switches
источник
В случае, если кто-то все еще ищет хороший переключатель / кнопку переключения, я последовал предложению Рика и создал вокруг него простую директиву 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>
источник