Simple Toggle Switch Plugin With jQuery And Bootstrap - Bootstrap Switch

File Size: 4.34 KB
Views Total: 25138
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Toggle Switch Plugin With jQuery And Bootstrap - Bootstrap Switch

A minimalist jQuery plugin that converts normal checkboxes into highly customizable toggle switches using Bootstrap styles.

How to use it:

1. Add the JavaScript file bootstrap-switch.js into your Bootstrap project.

<script src="bootstrap-switch.js" ></script>

2. Create a regular checkbox for the toggle switch.

<input type="checkbox" name="checkbox1">

3. Remember set you events before call bootstrapSwitch or they will fire after bootstrapSwitch's events.

$("[name='checkbox1']").change(function() {
  if(!confirm('Do you wanna cancel me!')) {
    this.checked = true;
  }
});

4. Call the bootstrapSwitch function and done.

$("[name='checkbox1']").bootstrapSwitch();

5. Customization options with default values.

$("[name='checkbox1']").bootstrapSwitch({
  on: 'On',
  off: 'Off ',
  onLabel: '&nbsp;&nbsp;&nbsp;',
  offLabel: '&nbsp;&nbsp;&nbsp;',
  same: false,//same labels for on/off states
  size: 'md',
  onClass: 'primary',
  offClass: 'default'
});

This awesome jQuery plugin is developed by wpic. For more Advanced Usages, please check the demo page or visit the official website.