Вкл/Выкл: кнопка переключения начальной загрузки

Вот мой код-

<div id="normal-toggle-button" class="toggle-button" style="width: 100px; height: 25px;">
            <div style="left: 0px; width: 150px;"><input type="checkbox" checked="checked"><span class="labelLeft" style="width: 50px; height: 25px; line-height: 25px;">ON</span><label for="" style="width: 50px; height: 25px;"></label><span class="labelRight" style="width: 50px; height: 25px; line-height: 25px;">OFF </span></div>
        </div>
    </div>

Сценарий-

$(document).ready(function() {
        $('#normal-toggle-button').toggleButtons();
    });

Я хочу, чтобы на этой странице была представлена ​​основная кнопка — Кнопки переключения

Я делаю все в порядке. Но что-то я все же пропустил.

Зарегистрируйтесь здесь - Fiddle


javascript jquery twitter-bootstrap uiswitch
person Manoz    schedule 20.02.2013    source источник
comment
вам нужно стилизовать его, конечно!   -  person syrkull    schedule 20.02.2013
comment
Я думаю, что этот пост будет полезен stackoverflow.com/questions/ 4177159/   -  person Sudix    schedule 20.02.2013

Ответы (2)


arrow_upward
11
arrow_downward

Самое простое использование bootstrapSwitch

Демо

<link href="bootstrap-switch.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-switch.js"></script>

<input type="checkbox">
<script>
  $('input:checkbox').bootstrapSwitch();
</script>
person Steely Wing    schedule 20.02.2013
comment
Похоже, это больше не работает. Может с последней версией бутстрапа сломалось? - person Ryan Langton; 12.02.2014
comment
@WingLeong Я хочу сохранить состояние кнопки, пока оно не будет изменено вручную. Является ли это возможным? - person user983983; 02.04.2014
comment
@ user983983, используйте localStorage в javascript- diveintohtml5.info/storage.html - person Manoz; 12.07.2014

arrow_upward
-1
arrow_downward

класс имеет значение

У вас был класс как «кнопка-переключатель», измените его на «переключатель».

Вот ваша обновленная скрипта: http://jsfiddle.net/WvRZw/10/

 <div id="normal-toggle-button" class="toggle-button"....

изменить на

  <div id="normal-toggle-button" class="switch" ....

css/javascript включает в себя

Вам также необходимо включить загрузочный javascript и css (см. раздел ресурсов) (также относительно включения javascript и css: Как заставить кнопки начальной загрузки показывать активное состояние?)

person Amir T    schedule 20.02.2013
comment
Хорошо, все в вашем коде было о кнопке-переключателе. Также нужен базовый бутстрап js/css. - person Amir T; 20.02.2013