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.

var dropdownButton = new SK.UI.Button.Dropdown( window, {
   caption : 'My Button',
   'class' : 'btn-primary',
   content : '<ul><li><a href="">Item 1</a><a href="">Item 2</a><a href="">Item 3</a></li></ul>'
}).inject( document.body );

 

Initializing a drop-down button that uses a DOM element for content and assigning an event. The event is handled in the manager object.

var dropdownButton = new SK.UI.Button.Dropdown( window, {
   caption : 'My Button',
   'class' : 'btn-primary',
   event   : 'action'
   content : '_$("element")'
}).inject( document.body );

window.addEvent('action', function () {
   alert('The dropdown button is clicked.');
});

 

Here is an example with the content as a function.

generateContent = function () {
   return '<ul><li><a href="">Item 1</a><a href="">Item 2</a><a href="">Item 3</a></li></ul>';
}

var dropdownButton = new SK.UI.Properties.DropDownButton( window, {
   caption : 'My Button',
   'class' : 'btn-primary',
   content : generateContent
}).inject( document.body );