jQuery Button Switch

Install

---

npm install jquery-btnswitch

you must be using at least jQuery 2.0

Settings

---

• Theme: Select a theme (Button, Light, Swipe, iOS, Android) Default: Button
• OnText: What to display for the "On" Button Default: On
• OffText: What to display for the "Off" Button Default: Off
• OnValue: The value of the "On" Button Default: true
• OffValue: The value of the "Off" Button Default: false
• OnCallback: Callback to fire when the "On" button is clicked Default: null
• OffCallback: Callback to fire when the "Off" button is clicked Default: null
• ToggleState: Set the state of the switch toggle. Default: false
• ConfirmChanges: Determines if we should confirm any changes Default: false
• ConfirmText: What message we'll display to the user when ConfirmChanges is set to true Default: Are you sure?
• HiddenInputId: the hidden field the plugin should populate or false to not populate a hidden field Default: false

Examples

---

Basic Implementation

$('#btnSwitch').btnSwitch();

---

Confirm Action with Callback

$('#btnSwitch').btnSwitch({
    ConfirmChanges: true,
    ConfirmText: 'You really want to do that?',
    OnCallback: function(val) {
        alert('system is now on');
    },
    OffCallback: function (val) {
        alert('system is now off');
    }
});

---

Callback

$('#btnSwitch').btnSwitch({
    OnValue: 'On',
    OnCallback: function(val) {
        alert('you selected ' + val);
    },
    OffValue: 'Off',
    OffCallback: function (val) {
        alert('you selected ' + val);
    }
});

Themes

---

You can change the look of the switch by selecting one of the possible themes below:

Light

$('#btnSwitch').btnSwitch({
    Theme: 'Light'
});

Swipe

$('#btnSwitch').btnSwitch({
    Theme: 'Swipe'
});

iOS

$('#btnSwitch').btnSwitch({
    Theme: 'iOS'
});

Android

$('#btnSwitch').btnSwitch({
    Theme: 'Android'
});