MLB Toggleswitch jQuery Plugin

Introduction

Run the plugin on a 'select' tag element with the structure below to convert it into a toggle switch. Toggle switches are a familiar design pattern that can be useful to conserve space.

Version 1.0+ of the plugin requires jQuery 1.7+, jQuery UI 1.8+ and Modernizr for feature detection of translate3d css transform support.

Basic Usage

Libraries

<link type="text/css" rel="stylesheet" href="mlb-toggleswitch.css">
<script src="mlb-toggleswitch.js"></script>

HTML

<select id="sample">
    <option value="off">Off</option>
    <option value="on">On</option>
</select>

Javascript

$('#sample').toggleswitch();

The original select element is hidden, but remains updated with the proper value as our toggleswitch state changes. It also receives the class 'toggleswitch-select' that can be useful for targeting the original element to access any of the methods below. There's also a pseudo selector that can be used for accessing existing toggle switches.

Select all instances of the plugin with the ':mlb-toggleswitch' psuedo-selector

$(':mlb-toggleswitch').toggleswitch('destroy');

Options

Multiple options can be passed in when calling a new instance of a toggle switch. Some options can be modified after instantiation. Changing an option on an instantiated toggleswitch will fire off the private _setOption method.

bSwitchState

Set the state of the toggle switch on creation

Default: false 
$('select').toggleswitch( { 'bSwitchState' : false  } );

bSwitchEnabled

Set the enabled/disabled attribute of the toggle switch on creation

Default: true 
$('select').toggleswitch( { 'bSwitchEnabled' : false  } );

bDisplayText

Enable or disable custom display text

Default: false 
$('select').toggleswitch( { 'bDisplayText' : true  } );

asDisplayText

Supply custom display text for the on/off states of the toggle (Up to 4 characters). The "bDisplayText" option must be set to true for display text to be visible.

Default: "Off" , "On" 
$('select').toggleswitch( { 'asDisplayText' : [ "Nay" , "Yay" ]  } );

bAnimate

Turn animation on or off for modern browsers (CSS animation only -- no jQuery fallback right now). bAnimate must be true for switch dragging functionality to work otherwise behavior degrades and does not animate ( < IE10 ).

Default: true 
$('select').toggleswitch( { 'bAnimate' : false } );

Methods

changeToggle

Toggle the value of a toggle switch back and forth or assign a value. Passing a boolean through will assign a value.

$('select').toggleswitch('changeToggle');

False sets the switch to the "off" state

$('select').toggleswitch('changeToggle' , false);

True sets the switch to the "on" state

$('select').toggleswitch('changeToggle' , true);

changeEnabled

Toggle the enabled/disabled attribute of a toggle switch back and forth or assign a value.

$('select').toggleswitch('changeEnabled');

False disables the toggle switch

$('select').toggleswitch('changeEnabled' , false);

True enables the toggle switch

$('select').toggleswitch('changeToggle' , true);

Callbacks

toggleswitchchange

This event is fired when a toggleswitch instance changes value.

$('select').on('toggleswitchchange' , function(){
        
    //Do stuff
    alert('Do stuff');
    
});

Styling

The toggle switch plugin's styles have been generated from a single SASS (mlb-toggleswitch.scss) file.

Future Enhancements

Recent Fixes