Class: DropdownList

var DropdownList = caph.require('stripe.ui.component.DropdownList');

 var dropdownList = new DropdownList({
      width: 200,
      text: 'Dropdown List',
      position: [10, 10],
      subListType: caph.ui.base.component.ListText.SELECTBOX,
      items: ['Superior', 'Ontario', 'Michigan']
 });

Extends

• caph.ui.base.Component

Methods

addItem() → {caph.stripe.ui.component.DropdownList}

Adds items to the drop down list.

Parameters:

Name	Type	Description
items.	Array.<String>	An array of the sub list item string.

Since:

• 2.0.0

Returns:

Type

caph.stripe.ui.component.DropdownList

Example

var DropdownList = caph.require('stripe.ui.component.DropdownList');

 var dropdownList = new DropdownList({
      width: 200,
      text: 'Dropdown List',
      position: [10, 10],
      subListType: caph.ui.base.component.ListText.SELECTBOX
 });

 dropdownList.addItem(['Superior', 'Ontario', 'Michigan']);

getSelectedItem() → {String}

Returns the selected item string.

Since:

• 2.1.0

Returns:

The current selected item string. If not selected, returns null.

Type

String

Example

var DropdownList = caph.require('stripe.ui.component.DropdownList');

 var dropdownList = new DropdownList({
      width: 200,
      text: 'Dropdown List',
      position: [10, 10],
      subListType: caph.ui.base.component.ListText.SELECTBOX,
      items: ['Superior', 'Ontario', 'Michigan']
 });
 
 var selectedItem = dropdownList.getSelectedItem();

hide() → {caph.stripe.ui.component.DropdownList}

Hides the sub list items.

Since:

• 2.0.0

Returns:

Type

caph.stripe.ui.component.DropdownList

Example

var DropdownList = caph.require('stripe.ui.component.DropdownList');

 var dropdownList = new DropdownList({
      width: 200,
      text: 'Dropdown List',
      position: [10, 10],
      subListType: caph.ui.base.component.ListText.SELECTBOX,
      items: ['Superior', 'Ontario', 'Michigan']
 });
 
 dropdownList.hide();
 

onblur()

A handler to listen for the blur event. When losing a focus, "focus" class is removed.

Since:

• 2.0.0

Example

No example available. This method is automatically called by "caph.module.event.Manager". See "caph.module.mixins.event.Observer" example for more details.

onchanged(message)

A handler to listen for the changed event. When the selected sub list item is changed, this event occurs.

Parameters:

Name	Type	Description
message	caph.event.Message	A normalized event message.

Since:

• 2.1.0

Example

No example available. This method is automatically called by "caph.module.event.Manager". See "caph.module.mixins.event.Observer" example for more details.

onclick()

A handler to listen for the click event. When clicked, shows the sub list items.

Since:

• 2.0.0

Example

No example available. This method is automatically called by "caph.module.event.Manager". See "caph.module.mixins.event.Observer" example for more details.

onfocus()

A handler to listen for the focus event. When getting a focus, "focus" class is added.

Since:

• 2.0.0

Example

No example available. This method is automatically called by "caph.module.event.Manager". See "caph.module.mixins.event.Observer" example for more details.

onkeydown()

A handler to listen for the keydown event. When the enter key is pressed, shows the sub list items.

Since:

• 2.0.0

Example

No example available. This method is automatically called by "caph.module.event.Manager". See "caph.module.mixins.event.Observer" example for more details.

setEnable(state) → {caph.stripe.ui.component.DropdownList}

Sets state to enable or disable for the drop down list. When disabled, "disable" class is added.

Parameters:

Name	Type	Description
state	Boolean	true is enable, false is disable.

Since:

• 2.0.0

Returns:

Type

caph.stripe.ui.component.DropdownList

Example

var DropdownList = caph.require('stripe.ui.component.DropdownList');

 var dropdownList = new DropdownList({
      width: 200,
      text: 'Dropdown List',
      position: [10, 10],
      subListType: caph.ui.base.component.ListText.SELECTBOX,
      items: ['Superior', 'Ontario', 'Michigan']
 });

 dropdownList.setEnable(false); //disabled
 

setOption(property)

Sets this component properties.

Parameters:

Name	Type	Description
property	Object	Refer to the details in caph.ui.base.Component#setOption. DropdownList Details {Number} width A number indicates the width (px) of the drop down list. The height has intended to have fixed size according to resolution. If you want to change the height, pass an array, for example [undefined, 200] to constructor's size property or size function. {String} text A string indicates the drop down list text. {String} subListType (Optional) A string indicates the sub list visual type. Default value is caph.ui.base.component.ListText.DEFAULT. Refer to the details in caph.ui.base.component.ListText {String[]} items (Optional) An array of the sub list item.

Since:

• 2.1.0

Example

var DropdownList = caph.require('stripe.ui.component.DropdownList');

 var dropdownList = new DropdownList({
      width: 200,
      text: 'Dropdown List',
      position: [10, 10]
 });
 
 dropdownList.setOption({
     subListType: caph.ui.base.component.ListText.SELECTBOX,
     items: ['Superior', 'Ontario', 'Michigan']
 });

show() → {caph.stripe.ui.component.DropdownList}

Shows the sub list items.

Since:

• 2.0.0

Returns:

Type

caph.stripe.ui.component.DropdownList

Example

var DropdownList = caph.require('stripe.ui.component.DropdownList');

 var dropdownList = new DropdownList({
      width: 200,
      text: 'Dropdown List',
      position: [10, 10],
      subListType: caph.ui.base.component.ListText.SELECTBOX,
      items: ['Superior', 'Ontario', 'Michigan']
 });
 
 dropdownList.show();