jQuery Plugin To Create Collapsible Bootstrap Button Groups - dropbuttons
File Size: | 9.57 KB |
---|---|
Views Total: | 427 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

dropbuttons is a jQuery plugin that automatically collapse Bootstrap button groups into a dropdown when there's no enough screen space (e.g. mobile devices).
Basic usage:
1. Load the jQuery dropbuttons plugin's files into your Bootstrap page.
<link rel="stylesheet" href="jquery.dropbuttons.css"> <script src="jquery.dropbuttons.js"></script>
2. The primary HTML structure. You're allowed to insert as many buttons as possible into the button group.
<div class="btn-toolbar dropbuttons"> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> <button type="button" class="btn btn-default">Default 2</button> <button type="button" class="btn btn-primary">Primary 2</button> <button type="button" class="btn btn-success">Success 2</button> <button type="button" class="btn btn-info">Info 2</button> <button type="button" class="btn btn-warning">Warning 2</button> <button type="button" class="btn btn-danger">Danger 2</button> <button type="button" class="btn btn-link">Link 2</button> <button type="button" class="btn btn-default">Default 3</button> <button type="button" class="btn btn-primary" data-dropbuttons-class="bg-primary">Primary 3</button> <button type="button" class="btn btn-success" data-dropbuttons-class="bg-success">Success 3</button> <button type="button" class="btn btn-info" data-dropbuttons-class="bg-info">Info 3</button> <button type="button" class="btn btn-warning" data-dropbuttons-class="bg-warning">Warning 3</button> <button type="button" class="btn btn-danger" data-dropbuttons-class="bg-danger">Danger 3</button> <button type="button" class="btn btn-link">Link 3</button> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> </ul> </div> </div>
3. Invoke the plugin with default options.
$(".dropbuttons").dropbuttons();
4. All available options with default values.
$(".dropbuttons").dropbuttons({ dropdownSelector : "div.dropdown", dropdownMenuSelector : "ul.dropdown-menu", dropdownButtonsSelector : "li", visibleButtonsSelector : ">button:not(.dropdown)", autoArrangeButtons : true, });
Change log:
2016-10-27
- Added support for wrapped buttons.
This awesome jQuery plugin is developed by lbacas. For more Advanced Usages, please check the demo page or visit the official website.