Animated iOS Style Switch With jQuery And Checkbox - netlivaSwitch
File Size: | 23 KB |
---|---|
Views Total: | 2711 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

netlivaSwitch is a tiny, easy-to-implement, fully configurable jQuery plugin for creating animated, iOS style switches from normal checkboxes.
Comes with a super smooth transition effect when you toggle between states. Also compatible with the Bootstrap framework.
Install and download:
<link rel="stylesheet" href="/path/to/src/css/netliva_switch.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/src/js/netliva_switch.js"></script>
How to use it:
1. To get started, insert the netlivaSwitch plugin's files into the HTML file.
<link rel="stylesheet" href="/path/to/src/css/netliva_switch.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/src/js/netliva_switch.js"></script>
2. Just add the netliva-switch
attribute to your checkbox input and the plugin will take care of the rest.
<input type="checkbox" netliva-switch />
3. Determine the switch size with the data-size
attribute. Accpeted values: 'mini'.
<input type="checkbox" netliva-switch data-size="mini" />
4. Customize the On/Off labels.
<input type="checkbox" netliva-switch data-active-text="JQuery" data-passive-text="Script" />
5. Customize the background colors.
<input type="checkbox" netliva-switch data-active-color="#222" data-passive-color="#333" />
6. The plugin also supports Bootstrap's color variables.
<input type="checkbox" netliva-switch data-active-color="primary" data-passive-color="danger" />
7. Specify the width of the switch.
<input type="checkbox" netliva-switch data-width="300px" />
8. You can also initialize the switch plugin via JavaScript.
$("#myCheckbox").netlivaSwitch({ 'size': 'mini', 'active-text': 'jQuery', 'passive-text': 'Script', 'active-color': '#333', 'passive-color': '#666', 'width' : '120px' });
9. Set and get the Check state.
// get state $("#myCheckbox").netlivaSwitch('state'); // toggle on $("#myCheckbox").netlivaSwitch('state', true); // toggle off $("#myCheckbox").netlivaSwitch('state', false);
10. Fire an event when the state is changed.
$("#myCheckbox").on('netlivaSwitch.change', function(event, state, element) { console.log(state); });
Changelog:
2020-07-05
- Added vertical alignment
This awesome jQuery plugin is developed by netliva. For more Advanced Usages, please check the demo page or visit the official website.