Overview
The SK.UI.Button.Dropdown class allows you to create dropdown buttons. It extends SK.UI.Button. The constructor returns the DOM Element, not the instance.
Include Resource Files
/Shared/UIComponents/Internal/Buttons
css/style.css
<link type="text/css" rel="stylesheet" href="/Shared/UIComponents/Internal/Buttons/css/style.css">Scripts/base.js
<script type="text/javascript" src="/Shared/UIComponents/Internal/Buttons/Scripts/base.js"></script>Scripts/dropdown.js
<script type="text/javascript" src="/Shared/UIComponents/Internal/Buttons/Scripts/dropdown.js"></script>
The dependency files may already exist in the environment and you may not need to include them.
Default Options
Same as SK.UI.Button Options
Dropdown Button Properties
These extend the SK.UI.Button options with the following:
Name | Description | Type | Default Value |
|---|---|---|---|
content | The contents of the dropdown. If it is a string, the dropdown's HTML gets replaced with its value. If it is a DOM element it gets appended to the dropdown container. It can also be a function that returns either a String or a DOM Element. | Function, String (HTML), DOM Element | null |
autohide | Whether or not the dropdown hides automatically when the mouse moves away. | Boolean | true |
scroll_wrapper | If the UI is located in a scrollable container (css overflow:hidden), then you should define it as the scroll_wrapper. | DOM Element | null |
Methods
DOM Element
Name | Description | Parameters | Returns |
|---|---|---|---|
getManager | Returns the SK.UI.Button.Dropdown instance. | - | Object |
Instance
Name | Description | Parameters | Returns |
|---|---|---|---|
show | Shows the dropdown. | - | - |
hide | Hides the dropdown after a delay of 400ms. | - | - |
collapse | Hides the dropdown. | - | - |
enableAutoHide | Enables dropdown autohide. | - | - |
disableAutoHide | Disables dropdown autohide. | - | - |
Examples
Initializing a new drop-down button with an HTML string for content.
Initializing a drop-down button that uses a DOM element for content and assigning an event. The event is handled in the manager object.
Here is an example with the content as a function.