A Popup Menu control allows you to create a popup menu on other controls. It must be opened programmatically (usually through other controls).
The Popup Menu control has many easy to configure appearance, behavior, and menu items options.
Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).
This control is most commonly used when wanting to add a menu to other controls.
Show Label Show the control's label; shows the label of the control that is inside this control (which is hidden by default) (note: when this is checked, it is not actually the nested control that displays it's label, but the menu itself displaying the label of the control inside)
Label Placement Top, Left
Horizontal Alignment Left, Right
Vertical Position Bottom, Top
Drop Shadow Give the menu a shadow
Width Width of "envelope" wrapping the contained view/element in px, em, or %
Make Sticky Prevents menu from auto-closing when a menu item is clicked or when the menu is no longer in focus
Menu Items Items in the menu
This example shows an Input Group control inside of a Popup Menu control, here are the configuration options for the Input Group control...
And the configuration options for the Popup Menu...
This is the result...
This example will go over how to combine a Popup Menu with an Input Group control so that the user can make a selection and then have that selection populate a Text control.
Here are the configuration options for the Popup Menu. There is an On Click event that sets the text of the Text control (Control Id of Text1) to the command (first column in the Menu Items section) the user selects.
Here are the configuration options for the Input Group. The On Button Click Event allows the Popup Menu to become visible.
This is the result when the user clicks the globe button...
And this is the result after the user selects an item...
With the Popup Menu control, there are 2 types of event handlers:
- On Load When the page loads
- On Item Click When an item is clicked
For detailed information on the available methods for this control, access the JS Doc file.
- Author: Courtney Silva
- Date Created: June 25, 2015
- Date Modified: September 4, 2015