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.
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 > |
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 > |
1 |
$( '#multibutton-demo' ).multiButton({ |
5. Get the value your user clicked.
1 |
$( '#multibutton-demo' ).multiButton({ |
2 |
onClick: function (el,value) { |
6. More configuration options.
01 |
$( '#multibutton-demo' ).multiButton({ |
04 |
groupClass: 'multibutton' , |
Changelog:
2019-11-19
This awesome jQuery plugin is developed by apocat. For more Advanced Usages, please check the demo page or visit the official website.