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='#size') Size
                  li: a(href='#colors') Colors
                  li: a(href='#animation') Animation
                  li: a(href='#disabled') Disabled / Readonly
                  li: a(href='#text') Text
                  li: a(href='#label-text') Label Text
                  li: a(href='#icon-label-text') Icon Label Text
                  li: a(href='#event-handlers') Event Handlers
                  li: a(href='#label-event-handler') Label Event Handlers
                  li: a(href='#state') State
                  li: a(href='#destroy') Destroy
                  li: a(href='#disable') Disable / Readonly
                  li: a(href='#radio') Radio
                  li: a(href='#form') Form
                  li: a(href='#modal') Modal
            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 onInit
              td Function
              td Callback function to execute on initialization
              td Function
              td function(event) {}
            tr
              td onSwitchChange
              td Function
              td Callback function to execute on switch state change
              td Function
              td 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='toggle-state-switch' checked)
            .col-sm-6
              .btn-group.pull-right
                button(type='button', id='toggle-state-switch-button-state', class='btn btn-default') Get State
                &nbsp;
                button(type='button', id='toggle-state-switch-button-on', class='btn btn-default') Set On
                &nbsp;
                button(type='button', id='toggle-state-switch-button-off', class='btn btn-default') Set Off
                &nbsp;
                button(type='button', id='toggle-state-switch-button', 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')