Buttons
The button widget
Enhances standard form elements like buttons, inputs and anchors to themeable buttons with appropriate hover and active styles.
The Bootstrap adapter makes the fllowing change to the classes option defaults:
"ui-button": "btn btn-default", "ui-button-icon": "glyphicon"
Button colors
Button Sizes
Buttons With Icons
Selectmenu
The selectmenu widget
Duplicates and extends the functionality of a native HTML select element to overcome the limitations of the native control.
The Bootstrap adapter makes the fllowing change to the classes option defaults:
"ui-selectmenu-button": "btn btn-default dropdown-toggle", "ui-selectmenu-open": "open"
In addition the following option defaults are also changed
"icons": {
"button": "caret"
}
"width": "auto"
Selectmenu Colors
Selectmenu Icons
Split Button
The splitbutton
Combines a regular button and a dropdown into a single button. the split button is not a widget in jQuery UI on its own but instead is just a combination of a button widget and a selectmenu widget in a container.
The Bootstrap adapter makes no changes specificly for the split button this is encluded as an example.
Split Buttons
Tabs
The tabs widget
A single content area with multiple panels, each associated with a header in a list.
The Bootstrap adapter makes the fllowing change to the classes option defaults:
"ui-tabs-nav": "nav nav-tabs", "ui-tabs-panel": "tab-pane", "ui-tabs-active": "active"
Default Tabs
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
- List item one
- List item two
- List item three
Collapsible tabs
Click this tab again to close the content pane.
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
Click this tab again to close the content pane.
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
Click this tab again to close the content pane.
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.- List item one
- List item two
- List item three
Vertical tabs
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
- List item one
- List item two
- List item three
Accordion
The accordion widget
Displays collapsible content panels for presenting information in a limited amount of space.
The Bootstrap adapter makes the fllowing change to the classes option defaults:
"ui-accordion": "panel panel-default", "ui-accordion-content": "panel-collapse collapse", "ui-accordion-content-active": "in", "ui-accordion-header": "panel-heading"
Notice: The accordion widget due to substantial differences in markup requires some extra javascript to function please view source on examples
Default Accordion
Section 1
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
Section 2
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
Section 3
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
Accordion With Custom Icons
Section 1
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
Section 2
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
Section 3
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
Tooltip
The tooltip widget
Customizable, themeable tooltips, replacing native tooltips
The Bootstrap adapter makes the fllowing change to the classes option defaults:
"ui-tooltip": "tooltip top fade in", "ui-tooltip-content": "tooltip-inner"
Default Tooltip
Tooltips can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
Custom Tooltip Content
All images are part of Wikimedia Commons and are licensed under CC BY-SA 3.0 by the copyright holder.
Dialog
The dialog widget
Open content in an interactive overlay.
The Bootstrap adapter makes the fllowing change to the classes option defaults:
"ui-dialog": "modal-content", "ui-dialog-titlebar": "modal-header", "ui-dialog-title": "modal-title", "ui-dialog-titlebar-close": "close", "ui-dialog-content": "modal-body", "ui-dialog-buttonpane": "modal-footer"
Default Dialog
Animated Dialog
This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
Progressbar
The progressbar widget
Display status of a determinate or indeterminate process.
The Bootstrap adapter makes the fllowing change to the classes option defaults:
"ui-progressbar": "progress", "ui-progressbar-value": "progress-bar"
Default Progressbar
Custom label and callback
Menu
The Menu widget
Themeable menu with mouse and keyboard interactions for navigation.
The Bootstrap adapter makes the fllowing change to the classes option defaults:
"ui-menu": "list-group", "ui-menu-icons": "", "ui-menu-icon": "glyphicon glyphicon-chevron-right", "ui-menu-item": "list-group-item", "ui-menu-divider": "", "ui-menu-item-wrapper": ""