This is a pure image based toggle switch powered by jQuery, using zero CSS3 properties and as a result it looks and functions the same in all browsers.
It utilises a semi transparent PNG overlay to mask the underneath switch image, so the toggling animation remains within the constraints of the rounded rectangle.
- Compatible in most browsers, including IE6+
- Retina images for supporting iDevices
- Uses semi-transparent PNG overlay, so will look the same in all browsers
- PNG Overlay will need to be updated for use on different backgrounds (PSD Included for both regular and retina images)
- Switch animates on click of the switch itself or the accompanying
<label>
Plugin will automatically generate HTML required, and gracefully fall back to a plain old checkbox if JavaScript is disabled. Downside is that there may be a slight flicker between seeing the checkbox and the toggle switch appearing.
<link href='./toggleswitch.css' rel='stylesheet' type='text/css' /> <!--[if lt IE 8]> <link href='./toggleswitch.ie.css' rel='stylesheet' type='text/css' /> <![endif]--> <!-- Switch is ON --> <label for='opt1'>Option 1</label> <input type='checkbox' name='opt1' id='opt1' value='1' class='toggleswitch' checked='checked' /> <!-- Switch is OFF --> <label for='opt2'>Option 2</label> <input type='checkbox' name='opt2' id='opt2' value='1' class='toggleswitch' /> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script> <script type='text/javascript' src='./jquery.toggleswitch.js'></script> <script type='text/javascript'> jQuery(document).ready(function ($) { $('.toggleswitch').toggleSwitch(); }); </script>No flicker between the document loading and toggle switch appearing, but there is no graceful fall back if JavaScript is disabled.
<link href='./toggleswitch.css' rel='stylesheet' type='text/css' /> <!--[if lt IE 8]> <link href='./toggleswitch.ie.css' rel='stylesheet' type='text/css' /> <![endif]--> <!-- Switch is ON --> <label for='opt1'>Option 1</label> <div class='switch'> <div class='overlay'></div> <span class='switched'></span> <input type='checkbox' name='opt1' id='opt1' value='1' class='toggleswitch' checked='checked' /> </div> <!-- Switch is OFF --> <label for='opt2'>Option 2</label> <div class='switch'> <div class='overlay'></div> <span class='switched off'></span> <input type='checkbox' name='opt2' id='opt2' value='1' class='toggleswitch' /> </div> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script> <script type='text/javascript' src='./jquery.toggleswitch.js'></script> <script type='text/javascript'> jQuery(document).ready(function ($) { $('.toggleswitch').toggleSwitch(); }); </script>You can create functions for onClick, onChangeOn, and onChangeOff.
<script type='text/javascript'> jQuery(document).ready(function ($) { $('.toggleswitch').toggleSwitch({ onClick: function () { console.log('Toggle Switch was clicked'); }, onChangeOn: function () { console.log('Toggle Switch was changed to the ON position'); }, onChangeOff: function () { console.log('Toggle Switch was changed to the OFF position'); } }); }); </script>Toggle Switch is licensed under the MIT license, see LICENSE.md for details.