Grouped Toggle Buttons jQuery multibutton - Free Download jQuery Plugin To Create Grouped Toggle Buttons - multibutton

Free Download jQuery Plugin To Create Grouped Toggle Buttons – multibutton

Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin To Create Grouped Toggle Buttons – multibutton, hope it will help you in programming stack.

Grouped Toggle Buttons jQuery multibutton - Free Download jQuery Plugin To Create Grouped Toggle Buttons - multibutton
File Size: 7.18 KB
Views Total: 1478
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

How to use it:

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

2 <script src="jquery.multibutton.js"></script>
3 <link rel="stylesheet" href="jquery.multibutton.css">

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

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

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

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

5. Get the value your user clicked.

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

6. More configuration options.

01 $('#multibutton-demo').multiButton({
02  
03   // default CSS class
04   groupClass: 'multibutton',
05  
06   // whether to disable 'active' state
07   nofixed:    false,
08  
09   // callback
10   onChange:   false,
11   onDoChange: false
12    
13 });

Changelog:

2019-11-19

  • Added more callbacks

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

source : jquery.net