bootstrap-switch/docs/index.jade

doctype html
html(lang='en')
  head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    meta(name='description', content='Turn checkboxes and radio buttons in toggle switches.')
    meta(name='author', content='Mattia Larentis, Emanuele Marchi and Peter Stein')
    title Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches
    link(href='http://fonts.googleapis.com/css?family=Roboto:400,700', rel='stylesheet')
    link(href='docs/lib/css/bootstrap.min.css', rel='stylesheet')
    link(href='docs/lib/css/highlight.css', rel='stylesheet')
    link(href='build/css/bootstrap3/bootstrap-switch.css', rel='stylesheet')
    link(href='docs/index.css', rel='stylesheet')
    script.
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-43092768-1']);
      _gaq.push(['_trackPageview']);
      (function () {
        var ga = document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ga, s);
      })();
  body
    header.navbar.navbar-default.navbar-fixed-top.top(role='banner')
      .container
        .navbar-header
          button.navbar-toggle(type='button', data-toggle='collapse', data-target='#collapse')
            span.sr-only Toggle navigation
            span.icon-bar
            span.icon-bar
            span.icon-bar
          a.navbar-brand(href='../') Bootstrap Switch
        nav#collapse.collapse.navbar-collapse(role='navigation')
          ul.nav.navbar-nav
            li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/3.0.zip') Download 3RC
            li: a(href='#getting-started') Getting Started
            li.dropdown
              a(href='#documentation', data-toggle='dropdown')
                | Documentation
                span.caret
              ul.dropdown-menu
                li: a(href='#options') Options
                li: a(href='#methods') Methods
                li: a(href='#events') Events
            li: a(href='#examples') Examples
            li: a(href='https://github.com/nostalgiaz/bootstrap-switch/issues') Bug reports

    .container
      .header
        h1.title Bootstrap Switch
        p.lead Turn checkboxes and radio buttons in toggle switches.
        p Choose your version:
        p: input(type='checkbox', name='download-version', checked, data-size='large', data-on-text='3 RC', data-off-text='2.0.1')
        p
          a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/3.0.zip', id='download-3', class='btn btn-lg btn-primary') Download 3 (Release candidate)
          a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip', id='download-2' class='btn btn-lg btn-primary') Download 2.0.1

      #getting-started
        h1.page-header Getting Started
        p Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.
        pre
          code
            [...]
            <link href="bootstrap.css" rel="stylesheet">
            <link href="bootstrap-switch.css" rel="stylesheet">
            <script src="jquery.js"></script>
            <script src="bootstrap-switch.js"></script>
            [...]

      #options
        h1.page-header Options
        table.table.table-bordered.table-striped.table-responsive
          thead
            tr
              th Name
              th Type
              th Description
              th Values
              th Default
          tbody
            tr
              td state
              td Boolean
              td The checkbox state
              td true, false
              td 'checked' attribute or true
            tr
              td size
              td String
              td The checkbox state
              td 'mini', 'small', 'normal', 'large'
              td 'normal'
            tr
              td animate
              td Boolean
              td Animate the switch
              td true, false
              td true
            tr
              td disabled
              td Boolean
              td Disable state
              td true, false
              td 'disabled' attribute or false
            tr
              td readonly
              td Boolean
              td Readonly state
              td true, false
              td 'readonly' attribute or false
            tr
              td onColor
              td String
              td Color of the left side of the switch
              td 'primary', 'info', 'success', 'warning', 'danger', 'default'
              td: 'primary'
            tr
              td offColor
              td String
              td Color of the right side of the switch
              td 'primary', 'info', 'success', 'warning', 'danger', 'default'
              td: 'default'
            tr
              td onText
              td String
              td Text of the left side of the switch
              td String
              td: 'ON'
            tr
              td offText
              td String
              td Text of the right side of the switch
              td String
              td: 'OFF'
            tr
              td labelText
              td String
              td Text of the center handle of the switch
              td String
              td: ' '
            tr
              td baseClass
              td String
              td Prefix of every other used class
              td String
              td 'bootstrap-switch'
            tr
              td wrapperClass
              td String | Array
              td Container element class(es)
              td String | Array
              td 'wrapper'
            tr
              td containerClass
              td String | Array
              td Wrapper element class(es)
              td String | Array
              td 'container'
            tr
              td handleOnClass
              td String | Array
              td Handle On element class(es)
              td String | Array
              td 'handle-on'
            tr
              td handleOffClass
              td String | Array
              td Handle Off element class(es)
              td String | Array
              td 'handle-off'
            tr
              td labelClass
              td String | Array
              td Label element class(es)
              td String | Array
              td 'label'
            tr
              td onModifierClass
              td String
              td On Modifier class, used when the switch state is true
              td String
              td 'on'
            tr
              td offModifierClass
              td String
              td Off Modifier class, used when the switch state is false
              td String
              td 'off'
            tr
              td focusedModifierClass
              td String
              td Focused Modifier class, used when the switch is focused
              td String
              td 'focused'
            tr
              td animateModifierClass
              td String
              td Animate Modifier class, used to apply CSS animation to the switch
              td String
              td 'animate'
            tr
              td disabledModifierClass
              td String
              td Disabled Modifier class, used the switch is disabled
              td String
              td 'disabled'
            tr
              td readonlyModifierClass
              td String
              td Readonly Modifier class, used the switch is readonly
              td String
              td 'readonly'
            tr
              td onInit
              td Function
              td Callback function to execute on initialization
              td Function
              td: pre: code.javascript function(event, state) {}
            tr
              td onSwitchChange
              td Function
              td Callback function to execute on switch state change
              td Function
              td: pre: code.javascript function(event, state) {}

      #methods
        h1.page-header Methods

        p In Bootstrap Switch, every option is also a method.
        p You can call a method in this way:
        pre: code $('input[name="my-checkbox"]').bootstrapSwitch('state', true);

        h2 Additional Methods

        table.table.table-bordered.table-striped.table-responsive
          thead
            tr
              th Name
              th Description
          tbody
            tr
              td toggleState
              td Toggle the switch state
            tr
              td toggleDisabled
              td Toggle the disabled state
            tr
              td toggleReadonly
              td Toggle the readonly state
            tr
              td destroy
              td Destroy the instance of Bootstrap Switch

      #events
        h1.page-header Events

        p You can register to the emitted events as follow:
        pre
          code
            | $('inputy[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
            |   console.log(this); // DOM element
            |   console.log(event); // jQuery event
            |   console.log(state); // true | false
            | });

        table.table.table-bordered.table-striped.table-responsive
          thead
            tr
              th Name
              th Description
              th Parameters
          tbody
            tr
              td init
              td Triggered on initialization. 'this' refers to the DOM element.
              td
                | event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>)
            tr
              td switchChange
              td Triggered on switch state change. 'this' refers to the DOM element.
              td
                | event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>),
                | state (true | false)

      #examples
        h1.page-header Examples
          h2 State
          .row
            .col-sm-6
              input(type='checkbox', id='state-switch' checked)
            .col-sm-6
              .btn-group.pull-right
                button(type='button', id='state-switch-state', class='btn btn-default') Get State
                &nbsp;
                button(type='button', id='state-switch-on', class='btn btn-default') Set On
                &nbsp;
                button(type='button', id='state-switch-off', class='btn btn-default') Set Off
                &nbsp;
                button(type='button', id='state-switch-toggle', class='btn btn-default') Toggle State

        <p>Working on this...</p>

    script(src='docs/lib/js/jquery.min.js')
    script(src='docs/lib/js/bootstrap.min.js')
    script(src='docs/lib/js/highlight.js')
    script(src='build/js/bootstrap-switch.js')
    script(src='docs/index.js')