Parameters:
Name | Type | Description |
---|---|---|
options |
Object | A map of option-value pairs to set on the widget. |
- Since:
- 5.0
Examples
$( "#myMenu" ).menu( {
items:[
{ type:"action", label: "Action 1", action: function() { alert("Action 1"); } },
{ type:"action", label: "Action 2", action: function() { alert("Action 2"); } }
]
} );
<div id="myMenu">
<ul>
<li><a href="...">Page A</a></li>
<li><a href="...">Page B</a></li>
</ul>
</div>
$( "#myMenu" ).menu( {} );
actionsContext :actions
The actions context that this menu is associated with. This option is only applicable to menus that are integrated with actions and when associated with a non-global actions context. See Integration with apex.actions for details.
Type:
- Default Value:
- apex.actions (the global actions context)
Examples
$( ".selector" ).menu( {
actionsContext: myContext
} );
// get
var value = $( ".selector" ).menu( "option", "actionsContext" );
// set
$( ".selector" ).menu( "option", "actionsContext", myContext );
asyncFetchMenu :menu~asyncFetch
Optional callback function used to populate the menu items content asynchronously when the menu opens. This is used in the rare case when the contents of a menu need to be fetched from the server just prior to the menu being opened.
Type:
- Default Value:
- null
Example
$( ".selector" ).menu( {
asyncFetchMenu: function( menu, callback ) {
var promise = apex.server.process( "MY_GET_MENU_ITEMS", ... );
promise.done( function( data ) {
// use data to populate menu.items
menu.items = ...
callback();
}
}
} );
Determines if the menu bar indicates the current menu item as if it were a tab set.
If true menu bar items can have a current
property to indicate
the item is associated with the current "page".
This option only applies if this is a menu bar (menu#menubar option is true).
See menu.Item current
property.
Type:
- boolean
- Default Value:
- false
Examples
$( ".selector" ).menu( {
behaveLikeTabs: true
} );
// get
var value = $( ".selector" ).menu( "option", "behaveLikeTabs" );
// set
$( ".selector" ).menu( "option", "behaveLikeTabs", true );
Include a callout on top level menus.
Type:
- boolean
- Default Value:
- false
Example
$( ".selector" ).menu( {
callout: true
} );
Enables custom content. This option is only for popup (context) menus or sub menus of a menu bar. The value is true, false or an element id. See section Rules for custom menu content for details.
- If false it is a normal menu with items (or menu markup); there is no custom content. The default is false.
- If true the content of the menu element is the custom markup.
- If the value is a string then it is the id of an element that contains the custom content. The custom content element is moved to be the only child of the menu (or sub menu) element. This is useful for menu bar sub menus where true would not work.
Type:
- boolean | string
- Default Value:
- false
Examples
$( ".selector" ).menu( {
customContent: true
} );
// get
var value = $( ".selector" ).menu( "option", "customContent" );
// set
$( ".selector" ).menu( "option", "customContent", true );
For popup/context menus only. If true the first menu item gets an extra class to indicate it is the default choice. The menu widget is not responsible for implementing any default behavior.
Type:
- boolean
- Default Value:
- false
Examples
$( ".selector" ).menu( {
firstItemIsDefault: true
} );
// get
var value = $( ".selector" ).menu( "option", "firstItemIsDefault" );
// set
$( ".selector" ).menu( "option", "firstItemIsDefault", true );
This is the default icon type for all items. See menu.Item iconType property.
Type:
- string
- Default Value:
- "a-Icon"
Optional string prefix to use for element ids used in the generated menu markup.
Type:
- string
- Default Value:
- null
items :Array.<menu.Item>
An array of menu.Item objects that define the content of the menu. This option is required when the widget is a menu bar. For popup menus at least one item is required when the widget is initialized unless the menu is fetched asynchronously, defined by custom content, or defined by markup. If the menu items are not known at the time the menu is initialized provide a dummy item that can be replaced later. For example during the menu#event:beforeOpen event.
Type:
- Array.<menu.Item>
Example
$( ".selector" ).menu( {
items: [
{ type: "action", id: "MyAction1", label: "Action 1", action: function( options, element ) { ... } },
{ type: "separator" },
{ type: "action", label: "Action 2", action: function( options, element ) { ... } }
]
} );
Determines if the widget is a menu bar or a popup menu. If true the widget is a menu bar otherwise the widget is a popup menu. This option can only be set at the time the widget is initialized.
Type:
- boolean
- Default Value:
- false
Example
$( ".selector" ).menu( {
menubar: true
} );
Determines if a menu bar supports an overflow menu. If true the menu bar will respond to window size changes by moving menu bar items that don't fit in to an overflow menu. This option only applies if this is a menu bar (menu#menubar option is true).
Type:
- boolean
- Default Value:
- false
Examples
$( ".selector" ).menu( {
menubarOverflow: true
} );
// get
var value = $( ".selector" ).menu( "option", "menubarOverflow" );
// set
$( ".selector" ).menu( "option", "menubarOverflow", true );
Determines if menu bar sub menu items always have a down arrow icon. If true menu bar sub menu items will have a down arrow icon added. This option only applies if this is a menu bar (menu#menubar option is true).
The default is false unless the menu bar has a mix of action and sub menu items in which case it is true. This does not affect split menu items which always show a down arrow with a divider.
Type:
- boolean
- Default Value:
- false
Examples
$( ".selector" ).menu( {
menubarShowSubMenuIcon: true
} );
// get
var value = $( ".selector" ).menu( "option", "menubarShowSubMenuIcon" );
// set
$( ".selector" ).menu( "option", "menubarShowSubMenuIcon", true );
If true menus will open with a slide down annimation otherwise they are shown all at once.
Type:
- boolean
- Default Value:
- false
Examples
$( ".selector" ).menu( {
slide: true
} );
// get
var value = $( ".selector" ).menu( "option", "slide" );
// set
$( ".selector" ).menu( "option", "slide", true );
Determines what happens when the tab key is pressed while focus is in a menu. The value is one of the following:
- "EXIT": Tab or shift tab exit (and close) the menu and focus moves to the next (previous) tab stop relative to the item that launched the menu. Not valid for popup menus because they don't have a launch element. This follows the DHTML Style guide recommendation.
- "NEXT": Tab and shift tab work like the Down and Up arrow keys but does not wrap.
- "NONE": The tab key does nothing. This is most like normal desktop menus
Type:
- string
- Default Value:
- "EXIT"
Examples
$( ".selector" ).menu( {
tabBehavior: "NONE"
} );
// get
var value = $( ".selector" ).menu( "option", "tabBehavior" );
// set
$( ".selector" ).menu( "option", "tabBehavior", "NONE" );
Determines if navigation menu items are rendered as links. If true action menu items with
a href
property are rendered with an anchor element.
This allows some non-menu but web browser behavior that is expected of links to work
(middle or right mouse click, and Shift and Ctrl key modifiers on click or Enter key).
The default is true. Set to false if the menu is mainly for functions and you want a more desktop experience.
Type:
- boolean
- Default Value:
- true
Examples
$( ".selector" ).menu( {
useLinks: false
} );
// get
var value = $( ".selector" ).menu( "option", "useLinks" );
// set
$( ".selector" ).menu( "option", "useLinks", false );
actionTaken
is reporting on the future
and actionTookFocus
is false when the action may take focus when it happens.
Properties:
Name | Type | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
event |
Event | jQuery event object. |
||||||||||||
ui |
Object |
Properties
|
Examples
$( ".selector" ).menu({
afterClose: function( event, ui ) {}
});
$( ".selector" ).on( "menuafterclose", function( event, ui ) {} );
Properties:
Name | Type | Description | ||||||
---|---|---|---|---|---|---|---|---|
event |
Event | jQuery event object. |
||||||
ui |
object |
Properties
|
Examples
$( ".selector" ).menu({
beforeOpen: function( event, ui ) {}
});
$( ".selector" ).on( "menubeforeopen", function( event, ui ) {} );
Properties:
Name | Type | Description |
---|---|---|
event |
Event | jQuery event object. |
ui |
Object | Currently empty |
Examples
$( ".selector" ).menu({
create: function( event, ui ) {}
});
$( ".selector" ).on( "menucreate", function( event, ui ) {} );
find(id) → {menu.Item}
Find a menu item by id.
Parameters:
Name | Type | Description |
---|---|---|
id |
string | The id of the menu item. See the id property of menu.Item. |
Returns:
- Type
- menu.Item
Example
$( ".selector" ).menu( "find", "MyAction1" );
Opens the popup menu or the specified menu of a menu bar. It is more common to use the menu#toggle method.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
x |
number | jQuery | If this is a popup menu x is either the page X coordinate at which to display the menu or the jQuery object of the launch element to place the menu near (typically under). If this is a menu bar then x is either the index or the jQuery object of the menu bar item to open. | |
y |
number | boolean |
<optional> |
If this is a popup menu y is either the Y coordinate at which to display the menu or if x is the launch element this can be false to not give the menu focus. Not used when this is a menu bar. |
args |
object |
<optional> |
Optional arguments to pass to any invoked menu item function. |
Parameters:
Name | Type | Description |
---|---|---|
item |
menu.Item | string | The menu item or id of menu item to make current. |
If the menu is closed it will be opened and if it is opened it will be closed. This will toggle a popup menu or a specific menu of a menubar. The need to open a menu bar menu should be very rare. Using a menuButton or a menu button in a toolbar removes the need to call this method because toggling the menu is automatic. The most common use of this method is to open a menu in response to a right click or contextmenu event.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
x |
number | jQuery | If this is a popup menu x is either the page X coordinate at which to display the menu or the jQuery object of the launch element to place the menu near (typically under). If this is a menu bar then x is either the index or the jQuery object of the menu bar item to open. | |
y |
number | boolean |
<optional> |
If this is a popup menu y is either the Y coordinate at which to display the menu or if x is the launch element this can be false to not give the menu focus. Not used when this is a menu bar. |
args |
object |
<optional> |
Optional arguments to pass to any invoked menu item function. |
Examples
$( "#myRegion" ).on( "contextmenu", function( event ) {
event.preventDefault();
$( "#myMenu" ).menu( "toggle", event.pageX, event.pageY );
});
$( "#myRegion" ).on( "keydown", function( event ) {
var target$, pos;
// shift F10
if ( event.shiftKey && event.keyCode === 121 ) {
event.preventDefault();
target$ = $( event.target );
pos = target$.offset();
$( "#myMenu" ).menu( "toggle", pos.left, pos.top + target$.outerHeight() );
}
});
Represents a menu item in a menu bar, popup menu, or sub menu
The menu Item object has one of the following general forms
(discriminated by the type
property):
- { type: "separator" }
- { type: "subMenu", label: text, icon: css-name, menu: {...}, disabled: bool-or-fn }
- { type: "toggle", label: text, accelerator: text, set: fn, get: fn, onLabel: text, offLabel: text, disabled: bool-or-fn }
- { type: "action", label: text, accelerator: text, action: fn, icon: css-name, disabled: bool-or-fn }
- { type: "radioGroup", set: fn, get: fn, choices: [ { label: text, value: string, disabled: bool-or-fn, accelerator: text },... ] }
For toggle menu items only one of label
or
(onLabel
and offLabel
) is used.
If both are present label
is used.
As an alternative to label
(or onLabel
,
offLabel
) you can specify labelKey
(or onLabelKey
, offLabelKey
) and
the apex.lang.getMessage function will be used each time the menu is rendered to lookup the label text.
The localized label text is stored in the respective label
,
onLabel
, or offLabel
property.
For action menu items only one of href
or
action
is used. If both are present action
is used.
When menu#menubar is true and only for menu bar menu items the subMenu item can have
action
or href
properties.
In this case it is a split menu item - it can either drop down the sub menu or perform the action/navigation
depending on where it is clicked or what key is entered.
When menu#menubar is true and menu#behaveLikeTabs is true a
current
property is allowed.
If a sub menu item has current
equal true the "current" state bubbles up to
the parent menu bar item. If current
is true the menu item can be styled
in a special way to indicate that the menu item is "current".
There is also an item type: "display" that is used internally for custom markup menus. It is similar to an action that has no action which makes it similar to disabled but the intention is different and so should be the visual presentation.
Properties:
Name | Type | Attributes | Description | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
type |
string | The type of the menu item. One of "separator", "subMenu", "toggle", "action", or "radioGroup" | ||||||||||
id |
string |
<optional> |
All menu items can have an id property. The id is only used to find the item by id using the menu#find method. | |||||||||
label |
string |
<optional> |
The label to display in the menu item. | |||||||||
labelKey |
string |
<optional> |
The message key to lookup the localized message to display in the menu item. | |||||||||
offLabel |
string |
<optional> |
Only applies to toggle items that act as dynamic antonyms. The label to display when the item value is false. | |||||||||
offLabelKey |
string |
<optional> |
The message key to lookup the localized message to display for offLabel . |
|||||||||
onLabel |
string |
<optional> |
Only applies to toggle items that act as dynamic antonyms. The label to display when the item value is true. | |||||||||
onLabelKey |
string |
<optional> |
The message key to lookup the localized message to display for onLabel . |
|||||||||
hide |
boolean | function |
<optional> |
All menu items can have a hide property. The value is true or false or a function returning true or false. If true the item is ignored. The function is called in the context of the menu item. The menu widget options object is passed as the first argument. | |||||||||
disabled |
boolean | function |
<optional> |
The disabled property can either be true or false or a function that returns true or false. If true the item is disabled. The function is called in the context of the menu item. The menu widget options object is passed as the first argument. | |||||||||
iconType |
string |
<optional> |
Icon type CSS class name. Not supported for separator, toggle or radioGroup choice items. Not supported on menu bar items. The iconType on action and subMenu items overrides the iconType set in the options object. | |||||||||
icon |
string |
<optional> |
Icon CSS class name(s). Not supported for separator, toggle or radioGroup choice items. Not supported on menu bar items. There needs to be corresponding CSS rules to select a particular icon. | |||||||||
iconStyle |
string |
<optional> |
If there is an icon then you can also have an iconStyle property with a value such as "color: #FF99AB". | |||||||||
onIcon |
string |
<optional> |
Icon CSS class name(s) to use for a true toggle value. Only applies to toggle items and only when there is also an onLabel and offLabel. | |||||||||
offIcon |
string |
<optional> |
Icon CSS class name(s) to use for a false toggle value. Only applies to toggle items and only when there is also an onLabel and offLabel. | |||||||||
href |
string |
<optional> |
A URL to navigate to when the menu item is activated. | |||||||||
target |
string |
<optional> |
The target window for the URL href. Only applies when
href is provided. Typically "_blank" to open in a new tab or window. |
|||||||||
action |
function | string |
<optional> |
A function to call when the menu item is activated.
The action function is called in the context of the menu item (this is the menu item).
The widget options object is passed as the first argument.
The second argument is the element that focus would normally return to when the menu closes (or null if none).
The third function argument is an object with additional arguments from the menu#open or
menu#toggle method merged with the item args property or null if
there are no additional arguments.
The action should return true if it will take responsibility for setting the focus.
If the action is a string it is the name of an actions.action.
See Integration with apex.actions |
|||||||||
args |
object |
<optional> |
Optional arguments object.
The object properties are the argument names and the property values are the argument values.
The arguments given in the menu#open or menu#toggle methods are merged with this object and
passed to pass to the action , get ,
or set functions as the last argument. |
|||||||||
actionContextId |
string |
<optional> |
The element id of a actions context created with
apex.actions.createContext. Only applies when the action property
is a string, in which case the action comes from this context. |
|||||||||
set |
function |
<optional> |
The set function receives as the first argument the value of the checkbox
(true/false) or radio button.
If additional arguments are provided by the menu#open or menu#toggle method merged
with the item args property they are passed as the last argument. |
|||||||||
get |
function |
<optional> |
The get functions must return the value of the checkbox (true/false) or radio button.
If additional arguments are provided by the menu#open or menu#toggle method merged
with the item args property they are passed as the last argument. |
|||||||||
accelerator |
string |
<optional> |
Name of an accelerator key that will activate the menu item such as "Ctrl+M". The menu widget is only responsible for showing the accelerator text in the menu item. It does not implement the keyboard handling. See Integration with apex.actions. For the best accessibility of the accelerator, it is recommended to follow the naming convention for actions.shortcutName. | |||||||||
menu |
object |
<optional> |
The menu object contain containing items. Only valid for type subMenu.
Properties
|
|||||||||
choices |
Array.<object> |
<optional> |
Only applies to items of type radioGroup. An array of radio items. | |||||||||
choices[].label |
string |
<optional> |
The radioGroup item label. | |||||||||
choices[].labelKey |
string |
<optional> |
The message key to lookup for the localized message to display for radioGroup item label. | |||||||||
choices[].value |
string |
<optional> |
The value to set when this item is activated. | |||||||||
choices[].disabled |
boolean | function |
<optional> |
If true the choice is disabled. | |||||||||
choices[].accelerator |
string |
<optional> |
Name of an accelerator key that will activate the radioGroup item. | |||||||||
current |
boolean |
<optional> |
If true the menu item reflects the current location within the application. This only applies if the menu#behaveLikeTabs option is true. |
This function is called to start the asynchronous process to fetch the menu items and when done assigns them to the menu.items array and then calls callback.
The callback takes an optional bool input parameter that is false to indicate that the menu items could not be fetched.
Parameters:
Name | Type | Description |
---|---|---|
menu |
object | The menu object to fetch items for. |
callback |
function | Call this function with no arguments after menu.items has been assigned. If there is an error getting the menu items call this function with the value false. |