Types
Dropdown
A basic dropdown has no special formatting of its own
Inline
A dropdown can be formatted to appear inline in other content
Selection
A dropdown can be formatted to allow selection of a menu choice.
Pointing
A dropdown can be formatted so that its menu is pointing
Simple
A simple dropdown can open without javascript
Variations
Fluid
A dropdown can take the full width of its parent
States
Error
An errored dropddown can alert a user to a problem
Simple Dropdown (No Javascript)
Active
An active dropdown has its menu open
Disabled
A disabled dropdown menu will not open or close
Initializing
Initializing a dropdown
Behavior
All the following behaviors can be called using the syntax:
| Behavior | Description |
|---|---|
| toggle | Toggles current visibility of dropdown |
| show | Shows dropdown |
| hide | Hides dropdown |
| hide others | Hides all other dropdowns that is not current dropdown |
| restore defaults | Restores dropdown text and value to its value on page load |
| restore default text | Restores dropdown text to its value on page load |
| restore default value | Restores dropdown value to its value on page load |
| save defaults | Saves current text and value as new defaults (for use with restore) |
| set selected(value) | Sets selected state to a given value |
| set text(text) | Sets dropdown text to a value |
| set value(value) | Sets dropdown input to value |
| get text | Returns current dropdown text |
| get value | Returns current dropdown input value |
| get item(value) | Returns DOM element that matches a given input value |
| bind touch events | Adds touch events to element |
| mouse events | Adds mouse events to element |
| bind intent | Binds a click to document to determine if you click away from a dropdown |
| unbind intent | Unbinds document intent click |
| determine intent | Returns whether event occurred inside dropdown |
| determine select action(text, value) | Triggers preset item selection action based on settings passing text/value |
| set active | Sets dropdown to active state |
| set visible | Sets dropdown to visible state |
| remove active | rRemoves dropdown active state |
| remove visible | Removes dropdown visible state |
| is selection | Returns whether dropdown is a selection dropdown |
| is animated | Returns whether dropdown is animated |
| is visible | Returns whether dropdown is visible |
| is hidden | Returns whether dropdown is hidden |
Examples
Re-selecting values
A dropdown will automatically select on page load any menu item that includes the currently value of text or your dropdown's hidden input value. This is used to preserve a user's selection on page navigation and will automatically remove and default text placeholder formatting.
Button Group
A button group can be formatted to show additional content as a dropdown
Multiple Levels
A dropdown menu can also contain sub menus inside of it
My favorite animal breed isMenu
A menu element can contain a dropdown
Form
A dropdown can be formatted to allow selection inside a form
Let's go ahead and get you signed up.
It works inside a form too
Let's go ahead and get you signed up.
Transitions
A dropdown can have different transitions.
Dropdown Settings
Dropdown settings modify the dropdown's behavior
| Setting | Default | Description |
|---|---|---|
| on | click | Event used to trigger dropdown (Hover, Click) |
| delay |
delay: {
show: 50,
hide: 300
}
|
Time in milliseconds to debounce show or hide behavior when on: hover is used. |
| transition | slide down | Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions |
| duration | 250 | Duration of animation events |
| action | auto | Sets a default action to occur.
activate
Most likely action will be determined by type of dropdown, for example a selection dropdown will automatically use updateForm
nothing
no action occurs
hide
Dropdown menu is hidden
function(){}
custom function is executed
|
Callbacks
Callbacks specify a function to occur after a specific behavior.
| Setting | Context | Description |
|---|---|---|
| onChange(value, text) | Dropdown | Is called after a dropdown item is selected. receives the name and value of selection. |
| onShow | Dropdown | Is called after a dropdown is shown. |
| onHide | Dropdown | Is called after a dropdown is hidden. |
DOM Settings
DOM settings specify how this module should interface with the DOM
| Setting | Default | Description |
|---|---|---|
| namespace | dropdown | Event namespace. Makes sure module teardown does not effect other events attached to an element. |
| selector |
selector : {
input : '> input[type="hidden"]',
item : '.menu > .item',
menu : '.menu',
text : '> .text'
}
|
|
| metadata |
metadata: {
text : 'text',
value : 'value'
}
|
|
| className |
className : {
active : 'active',
disabled : 'disabled',
placeholder : 'default',
visible : 'visible'
}
|
|
Debug Settings
Debug settings controls debug output to the console
| Setting | Default | Description |
|---|---|---|
| name | Dropdown | Name used in debug logs |
| debug | True | Provides standard debug output to console |
| performance | True | Provides standard debug output to console |
| verbose | True | Provides ancillary debug output to console |
| error |
error : {
action : 'You called a dropdown action that was not defined',
method : 'The method you called is not defined.',
transition : 'The requested transition was not found'
}
|
|