Custom Segmented Control In jQuery - Toggle.js
File Size: | 3.44 KB |
---|---|
Views Total: | 629 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A great and user-friendly alternative to the native select boxes and radio buttons.
Toggle.js is a tiny jQuery plugin for creating a segmented control where you can make a single selection from a group of toggle buttons.
How to use it:
1. Insert the toggle.js plugin after jQuery library.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/toggle.js"></script>
2. Create a container to hold the segmented control.
<div id="example" class="selectGroup"> </div>
3. Define an array of options containing values and labels as follows:
let opt = [ { value: 1, label: "jQuery" }, { value: 2, label: "Script" }, { value: 3, label: "Net" }, ];
4. Call the function on the container element and done:
$("#example").setupToggles({ toggleOptions: opt, });
5. Set the initial value on page load. Default: 0.
$("#example").setupToggles({ toggleOptions: opt, defaultValue: 1, });
6. Trigger a function after an option has been selected.
$("#example").setupToggles({ toggleOptions: opt, onSelectedValueChange: toggleValueChanged(selectedValue) { alert(selectedValue); }. });
7. Apply CSS styles to the segmented control.
.selectItem { border: 0px solid black; width: auto; height: 2em; line-height: 2.5em; text-align: center; background-color: #9eb3be; display: inline; padding: 0em 2em 0.5em; float: left; color: #3c3c3e; cursor: pointer; } .selectItem.selected { background-color: #6eb4ef; color: white; } .or { position: relative; float: left; width: 0.3em; height: 2.5em; z-index: 3; color: #555; } .or::before { position: absolute; text-align: center; border-radius: 500rem; content: 'or'; top: 50%; left: 50%; background-color: #fff; text-shadow: none; margin-top: -0.9em; margin-left: -0.9em; width: 1.7em; height: 1.7em; line-height: 1.7em; font-style: normal; font-weight: 700; box-shadow: 0 0 0 1px transparent inset; }
This awesome jQuery plugin is developed by Tonoyankar. For more Advanced Usages, please check the demo page or visit the official website.