Press "Enter" to skip to content

A Simple JQuery Plugin That Turns a Div Into Toggle Control

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

    Leave a Reply

    Your email address will not be published. Required fields are marked *