Dropdown allows to select one (or more) options from the list that is visible when it is needed. It is commonly used as an elegant alternative to native select form field but can also work as a list of links or just custom component in application.
Dropdown has variants of working type: overlaying nearby content or expending and moving it. Direction of opening can be downwards or upwards.
The tables below show many more options of customization.
<section id="exemplary-dropdown" class="hawk-dropdown std-dropdown">
<header class="hawk-dropdown__header std-dropdown__header">
<div class="hawk-dropdown__header-inner std-dropdown__header-inner">
<input class="hawk-dropdown__searching-field std-dropdown__searching-field" type="text" />
<h4 class="hawk-dropdown__title std-dropdown__title">Exemplary dropdown</h4>
</div>
<div class="hawk-dropdown__icon icon-triangular-arrow-down icon-triangular-arrow-down--small"></div>
</header>
<section class="hawk-dropdown__list-container std-dropdown__list-container">
<ul class="hawk-dropdown__list">
<li>
<label class="dropdown-item">
<input class="dropdown-item__field" type="radio" name="exemplary-dropdown-someradio" value="1" />
<div class="dropdown-item__description">
Lorem ipsum dolor
</div>
</label>
</li>
<li>
<label class="dropdown-item">
<input class="dropdown-item__field" type="radio" name="exemplary-dropdown-someradio" value="2" />
<div class="dropdown-item__description">
Sed tristique massa
</div>
</label>
</li>
<li>
<label class="dropdown-item">
<input class="dropdown-item__field" type="radio" name="exemplary-dropdown-someradio" value="3" />
<div class="dropdown-item__description">
Orci varius natoque penatibus
</div>
</label>
</li>
<li>
<label class="dropdown-item">
<input class="dropdown-item__field" type="radio" name="exemplary-dropdown-someradio" value="4" />
<div class="dropdown-item__description">
Aliquam in mi non dolor
</div>
</label>
</li>
<li>
<label class="dropdown-item">
<input class="dropdown-item__field" type="radio" name="exemplary-dropdown-someradio" value="5" />
<div class="dropdown-item__description">
Sed tristique massa
</div>
</label>
</li>
</ul>
</section>
</section>
var exemplaryDropdown = new Hawk.Dropdown($('#exemplary-dropdown'), {
// options and callbacks
});
exemplaryDropdown.run();
| Name | Default value | Description |
|---|---|---|
|
slideSpeed
integer
|
200
|
Speed of expanding the dropdown (in miliseconds) |
|
type
DropdownType
|
OVERLAYER
|
Working type. |
|
direction
DropdownDirection
|
DOWNWARDS
|
Opening direction kind. |
|
containerClass
string
|
hawk-dropdown
|
- |
|
expandingTypeClass
string
|
hawk-dropdown--expanding
|
- |
|
upwardsDirectionClass
string
|
hawk-dropdown--upwards
|
- |
|
openClass
string
|
hawk-dropdown--open
|
- |
|
headerClass
string
|
hawk-dropdown__header
|
- |
|
titleClass
string
|
hawk-dropdown__title
|
Class name of the element where selected value is displayed. |
|
listClass
string
|
hawk-dropdown__list
|
- |
|
listContainerClass
string
|
hawk-dropdown__list-container
|
- |
|
searchingFieldClass
string
|
hawk-dropdown__searching-field
|
- |
|
disabledClass
string
|
disabled
|
Class which is set up when dropdown becomes disabled. |
| Name | Arguments | Description |
|---|---|---|
|
onShow
|
|
Is being executed immediately after the dropdown's list is shown. |
|
onShowing
|
|
Is being executed when the dropdown's list starts to be shown. |
|
onHide
|
|
Is being executed immediately after the dropdown's list is hidden. |
|
onHiding
|
|
Is being executed when the dropdown's list starts to be hidden. |
|
onSelected
|
|
Is being executed immediately after one of the options is selected. The function should return boolean value informing if the operation succeeded. |
| Name | Arguments | Description |
|---|---|---|
|
show
Hawk.Dropdown
|
|
Opens the dropdown. |
|
hide
Hawk.Dropdown
|
|
Closes the dropdown. |
|
isOpen
boolean
|
|
Informs if the dropdown is open or not. |
|
run
Hawk.Dropdown
|
|
Launches the dropdown and binds the DOM elements with necessary events. |
|
select
boolean
|
|
Selects the option precisely by the field. Returns true if the option exists and has been sucessfully chosen, false otherwise.
|
|
selectByIndex
boolean
|
|
Selects the option by the position on the list. 0 is the first index. Returns true if the option exists and has been sucessfully chosen, false otherwise.
|
|
selectByValue
boolean
|
|
Selects the option by the value of the field. Returns true if the option exists and has been sucessfully chosen, false otherwise.
|
|
isDisabled
boolean
|
|
Informs if the dropdown is disabled. |
|
disable
Hawk.Dropdown
|
|
Disables the dropdown. |
|
enable
Hawk.Dropdown
|
|
Enables the dropdown. |
|
clearFields
Hawk.Dropdown
|
|
Clears all fields and makes them unchecked. |
|
refreshDependencies
Hawk.Dropdown
|
|
Binds callbacks with the fields. |
