JQuery Toggle plugin is a simple plugin that turns a div into a toggle control that creates a hashed control where you can make a single selection from a set of toggle buttons.
jquery stepper, bs segmented control, html segmented control, ios segmented control css, mobiscroll segmented, segmented control javascript
How to make use of it:
1. Insert the toggle.js plugin after the 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 split control.
<div id="example" class="selectGroup"> </div>
3. Select a set of options containing values and labels.
let opt = [ { value: 1, label: "CSS" }, { value: 2, label: "HTML" }, { value: 3, label: "jQuery" }, ];
4. Call the function on the container element.
$("#example").setupToggles({ toggleOptions: opt, });
5. Set the initial value on page load.
$("#example").setupToggles({ toggleOptions: opt, defaultValue: 1, });
6. Run a function after selecting an option.
$("#example").setupToggles({ toggleOptions: opt, onSelectedValueChange: toggleValueChanged(selectedValue) { alert(selectedValue); }. });
7. Apply CSS styles to the split 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; }
Custom Segmented Control In jQuery, toggle Plugin/Github
See Demo And Download
Official Website(Tonoyankar): Click Here
This superior jQuery/javascript plugin is developed by Tonoyankar. For extra Advanced Usages, please go to the official website.
Be First to Comment