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='dist/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.dropdown
              a(href='#', data-toggle='dropdown')
                | Download
                span.caret
              ul.dropdown-menu
                li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/3.0.zip') 3 (Release candidate)
                li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip') 2.0.1
            li: a(href='#getting-started') Getting Started
            li.dropdown
              a(href='#documentation-3', data-toggle='dropdown')
                | Documentation 3
                span.caret
              ul.dropdown-menu
                li: a(href='#options') Options
                li: a(href='#methods') Methods
                li: a(href='#additional-methods') Additional Methods
                li: a(href='#events') Events
            li.dropdown
              a(href='#documentation-2', data-toggle='dropdown')
                | Documentation 2.0.1
                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
        h2.title Bootstrap Switch
        p.lead Turn checkboxes and radio buttons in toggle switches.
        p Download 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 (Stable)

      #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>
          [...]

        p Add your checkbox.
        pre: code <input type="checkbox" name="my-checkbox" checked>

        p Initialize Bootstrap Switch.
        pre: code $("[name='my-checkbox']").bootstrapSwitch();

        p Enjoy.

      #documentation-3
        h1.page-header Documentation 3

        #options
          h2 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
          h2 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);

        #additional-methods
          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
          h2 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
              h2 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>

      #documentation-2
        h1.page-header Documentation 2.0.1

        #options
          h2 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: '&amp;nbsp;'
              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) {}

    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='dist/js/bootstrap-switch.js')
    script(src='docs/index.js')