Toggle Switches for Twitter Bootstrap

5

User interface of mobile devices always has some interesting stuff like fancy toggle button, which we can find on Apple iOS. Bootstrap Switches Toggle extension brings to us these nice buttons, and now usual web environment has gained new sweet element.

Toggle Switches for Twitter Bootstrap

Toggle Switches styled in a bootstrap manner with some fancy css and javascript

Html:

<div class='toggle basic' data-enabled="ON" data-disabled="OFF" data-toggle="toggle">
    <input type="checkbox" value="1" name="myCheckbox" class="checkbox" checked="checked" />
    <label class="check" for="myCheckbox"></label>
  </div>

Js:

<script>
    // Don't use .toggle, it will be global.
    $('.basic').toggle({
      onClick: function (event, status) {}, // Do something on status change if you want
      text: {
        enabled: false, // Change the enabled disabled text on the fly ie: 'ENABLED'
        disabled: false // and for 'DISABLED'
      },
      style: {
        enabled: 'primary' // default button styles like btn-primary, btn-info, btn-warning just remove the btn- part.
        disabled: false // same goes for this, primary, info, warning, danger, success. 
      }
    });
  </script>

Try this extension and improve your web interface

View Toggle Switches Demo
Download Toggle Switches

5 COMMENTS

  1. Hey,
    Your control is really great but when you put several controls, all controls are linked. I found a solution for that :
    In your init function :
    $(‘.alternative’.each(function ) { $(this.toggle({ onClick: function (evt, status) { console.log(‘.alternative changed to: ‘ + status, ‘the reverse of: ‘ + !status; }, text: { enabled: ‘ENABLED’, disabled: ‘ENABLED’ }, style: { enabled: ‘success’, disabled: ‘danger’ } }; };
    Maybe this one could help someone )

    • Julien, can you put your code on pastebin or something cos it seems some tags have been stripped. Thanks.

  2. This snippet fixes the syntax errors in the above script:
    $(‘.basic’.each(function) { $(this.toggle({ onClick: function (event, status) { console.log(‘.basic changed to ‘ + status + ‘the reverse of: ‘ + !status; }, text: { enabled: false, disabled: false }, style: { enabled: ‘primary’, disabled: ‘danger’ } }; };

  3. Great control, thanks!
    Just to mention, I think that you are missing a comma in the JS part on this page
    style: { enabled: ‘primary’ // default
    should be
    style: { enabled: ‘primary’, // default

LEAVE A REPLY

Please enter your comment!
Please enter your name here