jQuery Plugin To Create Grouped Toggle Buttons - multibutton

jQuery Plugin To Create Grouped Toggle Buttons - multibutton

multibutton is a jQuery plugin which converts the normal html unordered list into a series of toggle buttons wrapped in an inline button group. Also can be used as an alternative to the checkboxes and radio buttons.

1. To get started, download and load the following resources in your document.

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="jquery.multibutton.js"></script>
<link rel="stylesheet" href="jquery.multibutton.css">

2. The JavaScript to convert your html list into toggle buttons just like inline checkboxes:

<ul class="multichecks" id="multibutton-demo">
  <li rel="1"><span>Btn1</span></li>
  <li rel="2"><span>Btn2</span></li>
  <li rel="3"><span>Btn3</span></li>
  <li rel="4"><span>Btn4</span></li>
</ul>
$('#multibutton-demo').multiButton();

3. Convert the html list into toggle buttons just like inline radio buttons:

<ul class="multichecks" id="multibutton-demo">
  <li rel="1"><span>Btn1</span></li>
  <li rel="2"><span>Btn2</span></li>
  <li rel="3"><span>Btn3</span></li>
  <li rel="4"><span>Btn4</span></li>
</ul>
$('#multibutton-demo').multiButton({
  single:   true,
  needFill: false
});

5. Get the value your user clicked.

$('#multibutton-demo').multiButton({
  onClick: function(el,value) {
    // do something
  }
});

6. More configuration options.

$('#multibutton-demo').multiButton({
  // default CSS class
  groupClass: 'multibutton',
  // whether to disable 'active' state
  nofixed:    false,
  // callback
  onChange:   false,
  
});

This awesome jQuery plugin is developed by apocat. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 01.12.2017
  • Source