A dropdown menu.
Example
<!--The following HTML includes a dropdown component. An element is specified
as a dropdown by setting the data-pcc-component attribute to "dropdown".
The dropdown options must be included as children elements, where the
data-pcc-value attribute is used to specify the value of each option.-->
<div class="pcc-select" data-pcc-component="dropdown" data-pcc-name="font" data-pcc-default="Arial">
<div data-pcc-value="Arial">Arial</div>
<div data-pcc-value="Comic Sans">Comic Sans</div>
<div data-pcc-value="Courier">Courier</div>
<div data-pcc-value="Courier New">Courier New</div>
<div data-pcc-value="Geneva">Geneva</div>
<div data-pcc-value="Georgia">Georgia</div>
<div data-pcc-value="Helvetica">Helvetica</div>
<div data-pcc-value="Times">Times</div>
<div data-pcc-value="Times New Roman">Times New Roman</div>
<div data-pcc-value="Verdana">Verdana</div>
</div>
Example
// Require the dropdown module.
var Dropdown = require('../elements/dropdown.js');
// Pass each dropdown element to the dropdown module to initialize each dropdown.
// parent is the element that contains the dropdown element.
$(parent).find('[data-pcc-component="dropdown"]').each(function() {
Dropdown(this);
});
(require("dropdown"))(el) → {HTMLElement}
Parses and initializes a dropdown component.
Parameters:
| Name | Type | Description |
|---|---|---|
el |
HTMLElement |
The parent element in which to parse for the dropdown component. |
Returns:
The parsed dropdown element.
- Type
- HTMLElement
Members
off :module:event-store~off
Removes an event handler from the dropdown.
Type:
- module:event-store~off
on :module:event-store~on
Registers an event handler on the dropdown.
Type:
- module:event-store~on
Methods
addOption(val, styleopt) → {Object}
Adds an option to the list of values in the dropdown.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
val |
string |
The value of the dropdown option. | |
style |
string | <optional> |
The style of the dropdown option. |
Returns:
The dropdown element.
- Type
- Object
destroy()
Destroys the dropdown component.
value(val) → {Object}
Gets or sets the value of the dropdown. The values are specified in the HTML for each dropdown option using the data-pcc-value attribute.
Parameters:
| Name | Type | Description |
|---|---|---|
val |
string |
The value of the dropdown option to select. |
Returns:
The dropdown element if a value is passed. Otherwise, the currently selected value is returned.
- Type
- Object
valueList() → {Array}
Gets an array of the values of the dropdown options.
Returns:
An array of the values of the dropdown options.
- Type
- Array