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

Question

Вот мой код

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

Script-

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

Я хочу базовую кнопку, указанную на этой странице - кнопки переключения

У меня все хорошо. Но кое-что я все еще пропустил.

Проверьте здесь - Fiddle

Answer 1

Самое простое использование 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>

Answer 2

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

У вас еще есть класс как "кнопка-переключатель", измените его на "переключатель"

Вот ваша обновленная скрипка: 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: как заставить кнопки начальной загрузки отображать активное состояние?)