Class: PopupMenu

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

 var popupMenu = new PopupMenu({
      width: 150,
      text: 'Popup Menu',
      position: [10, 10],
      subListType: caph.ui.base.component.ListText.DEFAULT,
      items: ['Superior', 'Ontario', 'Michigan']
 });

Extends

• caph.stripe.ui.component.ListText

Methods

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

Adds items to the popup menu

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.PopupMenu

Example

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

 var popupMenu = new PopupMenu({
      width: 200,
      text: 'Popup Menu',
      position: [10, 10]
 });

 popupMenu.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 PopupMenu = caph.require('stripe.ui.component.PopupMenu');

 var popupMenu = new PopupMenu({
      width: 200,
      text: 'Popup Menu',
      position: [10, 10],
      items: ['Superior', 'Ontario', 'Michigan']
 });
 
 var selectedItem = popupMenu.getSelectedItem();

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

Hides the sub list items. The "hidemenu" event occurs after hiding the sub list.

Since:

• 2.0.0

Returns:

Type

caph.stripe.ui.component.PopupMenu

Example

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

 var popupMenu = new PopupMenu({
      width: 200,
      text: 'Popup Menu',
      position: [10, 10],
      items: ['Superior', 'Ontario', 'Michigan'],
      on: {
         hidemenu: function() {
            console.log("hide!");
         }
      }
 });
 
 popupMenu.hide();
 

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.

onselected()

A handler to listen for the selected event. When the popup menu is clicked or pressed, this event occurs.

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.

setOption(property)

Sets this component properties.

Parameters:

Name	Type	Description
property	Object	Refer to the details in caph.stripe.ui.component.ListText#setOption. PopupMenu Details {Number} width A number indicates the width (px) of the popup menu. 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 popup menu text. {String} subListType (Optional) A string indicates the sub list visual type. Default value is caph.ui.base.component.ListText.SELECTBOX. Refer to the details in caph.ui.base.component.ListText {Number} subListWidth (Optional) A number indicates the width (px) of the popup menu sub list. Default value is same as popup menu width. {Number} subListSelectedIndex (Optional) A number indicates the initial selected item index of the popup menu sub list. Default value is 0. {String[]} items (Optional) An array of the sub list item. If text option is empty, the first index item string is used for text option value.

Since:

• 2.1.0

Example

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

 var popupMenu = new PopupMenu({
      width: 200,
      text: 'Popup Menu',
      position: [10, 10]
 });
 
 popupMenu.setOption({
     subListType: caph.ui.base.component.ListText.SELECTBOX,
     items: ['Superior', 'Ontario', 'Michigan']
 });

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

Shows the sub list items. The "showmenu" event occurs after showing the sub list.

Since:

• 2.0.0

Returns:

Type

caph.stripe.ui.component.PopupMenu

Example

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

 var popupMenu = new PopupMenu({
      width: 200,
      text: 'Popup Menu',
      position: [10, 10],
      items: ['Superior', 'Ontario', 'Michigan'],
      on: {
         showmenu: function() {
            console.log("show!");
         }
      }
 });
 
 popupMenu.show();
 

size(size) → {caph.stripe.ui.component.PopupMenu|Array.<Number>}

Set size or get size (width / height)

Parameters:

Name	Type	Argument	Description
size	Array.<Number>	<optional>	A array unit-less pixel value The array has size value.( number[width, height] )

Since:

• 2.1.1

See:

• caph.module.renderer.View#size

Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns an array including two unit-less pixel values, which means width and height. (for example, [100,100] means width : 100px, height: 100px).

Type

caph.stripe.ui.component.PopupMenu | Array.<Number>

Example

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

 var popupMenu = new PopupMenu();
 popupMenu.size([300, 70]);