Easy Toggle Multiple State Buttons In jQuery | Toggle.js

A simple JavaScript file to help toggle bootstrap codes on the toggle buttons and replace checkboxes, radio groups, and drop-down menus with multi-state buttons. The library adds four jquery methods for ease of use.

how to add toggle button in menu, multiple toggle button, material design toggle button github, sliding toggle button, toggle button properties, toggle button logic

How to make use of it:

1. To get started, download the plugin and load the jquery-toggle.js script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery-toggle.js"></script>

2. Create a fundamental toggle button (state = 2) from a standard button factor.

<button class="toggle">Toggle Button</button>
$('button.toggle').makeToggleButton({
  // options here
});

3. Create a multi-state toggle button from a standard button factor.

<button class="toggle">Change State</button>
$('button.toggle').makeMultiStateButton({
  num_of_states: 3
});

4. Create a single- or multi-state toggle button from checkboxes.

<ul id="example" autocomplete="off">
  <li>
    <label>
      <input name="options1-1" type="checkbox" value="0"> Option 0
    </label>
  </li>
   <li>
    <label>
      <input name="options1-2" type="checkbox" value="1"> Option 1
    </label>
  </li>
   <li>
    <label>
      <input name="options1-3" type="checkbox" value="2"> Option 2
    </label>
  </li>
  ...
</ul>
$('#example').replaceCheckboxesWithButtons({
  // options here
});

5. Create a multi-state toggle button from checkboxes, radio buttons, or choose parts.

<ul id="example" autocomplete="off">
  <li>
    <label>
      <input name="options2_1" type="checkbox" value="0"> Option 0
    </label>
  </li>
   <li>
    <label>
      <input name="options2_2" type="checkbox" value="1"> Option 1
    </label>
  </li>
   <li>
    <label>
      <input name="options2_3" type="checkbox" value="2"> Option 2
    </label>
  </li>
  <li>
    <label>
      <input name="options3_1" type="radio" value="0" checked=""> State 0
    </label>
  </li>
  <li>
    <label>
      <input name="options3_2" type="radio" value="0" checked=""> State 1
    </label>
  </li>
  <li>
    <label>
      <input name="options3_3" type="radio" value="0" checked=""> State 3
    </label>
  </li>
  <select>
    <option value="">I have two states</option>
    <option value="a">Option A</option>
  </select>
  <select>
    <option value="">I have three states</option>
    <option value="a">Option B</option>
    <option value="b">Option C</option>
  </select>
  <select>
    <option value="">I have three states, too</option>
    <option value="a">Option D</option>
    <option value="b">Option E</option>
  </select>
  ...
</ul>
$('#example').replaceInputsWithMultiStateButtons();

6. Customize the on/off kinds, textual content, and icons.

$('#example').replaceInputsWithMultiStateButtons({

  // initial state
  state: 0,

  // false = changes color according to the current state
  nocolor: false,

  // uses Font Awesome Icons instead
  font_awesome: false,

  // allows multiple icons
  // default false
  multi_icon: true,

  // custom icons, text, styles (CSS classes)
  icon_on_0: 'question-sign',
  icon_off_0: 'ban-circle',
  icon_off_1: 'ok-circle',
  icon_on_2: 'minus-sign',
  color_2: 'warning', 
  text_2: 'Somewhat',
  icon_on_3: 'remove-sign',
  icon_off_3: 'remove-circle',
  color_3: 'danger',

})

7. You can even move the choices through information attributes.

<select data-type="multi-icon" data-on-icon="check" data-off-icon="remove" data-on-color="primary" data-off-color="danger" data-on-text="Include" data-off-text="Not selected" data-icon="minus" data-color="warning" data-text="Nope">
  <option value="">Default</option>
  <option value="d">Option D</option>
  <option value="e">Option E</option>
</select>

Single & Multi-state Toggle Buttons, Easy Toggle State Multiple Buttons, bs Toggle Button Group, multi state toggle css


See Demo And Download

Official Website(apluslms): Click Here

This superior jQuery/javascript plugin is developed by apluslms. For extra Advanced Usage, please go to the official website.

Share