Я изначально создал веб-приложение в 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">
Есть ли способ изменить код, чтобы я мог вернуть кнопку переключения?
Не уверен, что это помогает, но доступен отличный (неофициальный) Bootstrap Switch. Однако он использует типы радио.
Обновление. Теперь вы также можете использовать переключатели или флажки в качестве переключателей. Атрибут type
добавлен после V.1.8.
Исходный код доступен в Github.
Если вы не возражаете изменить свой 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
с помощью Bootstrap Javascript:
$('.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/
Вы можете использовать переключатель Design Material для Bootstrap 3.3.0
http://bootsnipp.com/snippets/featured/material-design-switch
Вы можете использовать библиотеку переключателей CSS Toggle Switch. Просто включите CSS и запрограммируйте JS самостоятельно: http://ghinda.net/css-toggle-switch/bootstrap.html
Здесь это очень полезно Для кнопки загрузки Bootstrap. Пример в фрагменте кода! и 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>
Если кто-то все еще ищет хорошую кнопку переключения/переключения, я последовал за предложением Рика и создал простую директиву angular, angular-switch. Помимо предпочтения Windows-стиля, общая загрузка также намного меньше (2kb против 23kb minified 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>