new MenuLayout(configopt)
MenuLayouts combine a menu and a content panel. The menu is positioned relative to the content (after, before, top, or bottom) and its size is customized with the #menuSize config. The content area will fill all remaining space.
Parameters:
Name | Type | Attributes | Description | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
config |
Object |
<optional> |
Configuration options Properties
|
- Source:
Example
var menuLayout = new OO.ui.MenuLayout( {
position: 'top'
} ),
menuPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, scrollable: true } ),
contentPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, scrollable: true } ),
select = new OO.ui.SelectWidget( {
items: [
new OO.ui.OptionWidget( {
data: 'before',
label: 'Before',
} ),
new OO.ui.OptionWidget( {
data: 'after',
label: 'After',
} ),
new OO.ui.OptionWidget( {
data: 'top',
label: 'Top',
} ),
new OO.ui.OptionWidget( {
data: 'bottom',
label: 'Bottom',
} )
]
} ).on( 'select', function ( item ) {
menuLayout.setMenuPosition( item.getData() );
} );
menuLayout.$menu.append(
menuPanel.$element.append( '<b>Menu panel</b>', select.$element )
);
menuLayout.$content.append(
contentPanel.$element.append( '<b>Content panel</b>', '<p>Note that the menu is positioned relative to the content panel: top, bottom, after, before.</p>')
);
$( 'body' ).append( menuLayout.$element );
If menu size needs to be overridden, it can be accomplished using CSS similar to the snippet
below. MenuLayout's CSS will override the appropriate values with 'auto' or '0' to display the
menu correctly. If `menuPosition` is known beforehand, CSS rules corresponding to other positions
may be omitted.
.oo-ui-menuLayout-menu {
height: 200px;
width: 200px;
}
.oo-ui-menuLayout-content {
top: 200px;
left: 200px;
right: 200px;
bottom: 200px;
}
Extends
Members
$content
Content DOM node
Properties:
Type | Description |
---|---|
jQuery |
- Source:
$menu
Menu DOM node
Properties:
Type | Description |
---|---|
jQuery |
- Source:
Methods
getClosestScrollableElementContainer() → {HTMLElement}
Get closest scrollable container.
- Inherited From:
- Source:
Returns:
Closest scrollable container
- Type
- HTMLElement
getData() → {Mixed}
Get element data.
- Inherited From:
- Source:
Returns:
Element data
- Type
- Mixed
getElementDocument() → {HTMLDocument}
Get the DOM document.
- Inherited From:
- Source:
Returns:
Document object
- Type
- HTMLDocument
getElementGroup() → {OO.ui.mixin.GroupElement|null}
Get group element is in.
- Inherited From:
- Source:
Returns:
Group element, null if none
- Type
- OO.ui.mixin.GroupElement | null
getElementId() → {string}
Ensure that the element has an 'id' attribute, setting it to an unique value if it's missing, and return its value.
- Inherited From:
- Source:
Returns:
- Type
- string
getElementWindow() → {Window}
Get the DOM window.
- Inherited From:
- Source:
Returns:
Window object
- Type
- Window
getMenuPosition() → {string}
Get menu position.
- Source:
Returns:
Menu position
- Type
- string
getTagName() → {string}
Get the HTML tag name.
Override this method to base the result on instance information.
- Inherited From:
- Source:
Returns:
HTML tag name
- Type
- string
isElementAttached() → {boolean}
Check if the element is attached to the DOM
- Inherited From:
- Source:
Returns:
The element is attached to the DOM
- Type
- boolean
isMenuVisible() → {boolean}
Check if menu is visible
- Source:
Returns:
Menu is visible
- Type
- boolean
isVisible() → {boolean}
Check if element is visible.
- Inherited From:
- Source:
Returns:
element is visible
- Type
- boolean
(protected) restorePreInfuseState(state)
Restore the pre-infusion dynamic state for this widget.
This method is called after #$element has been inserted into DOM. The parameter is the return value of #gatherPreInfuseState.
Parameters:
Name | Type | Description |
---|---|---|
state |
Object |
- Inherited From:
- Source:
scrollElementIntoView(configopt) → {jQuery.Promise}
Scroll element into view.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
config |
Object |
<optional> |
Configuration options |
- Inherited From:
- Source:
Returns:
Promise which resolves when the scroll is complete
- Type
- jQuery.Promise
setData(data)
Set element data.
Parameters:
Name | Type | Description |
---|---|---|
data |
Mixed | Element data |
- Inherited From:
- Source:
setElementGroup(group)
Set group element is in.
Parameters:
Name | Type | Description |
---|---|---|
group |
OO.ui.mixin.GroupElement | null | Group element, null if none |
- Inherited From:
- Source:
setElementId(id)
Set the element has an 'id' attribute.
Parameters:
Name | Type | Description |
---|---|---|
id |
string |
- Inherited From:
- Source:
setMenuPosition(position)
Set menu position.
Parameters:
Name | Type | Description |
---|---|---|
position |
string | Position of menu, either |
- Source:
Throws:
-
If position value is not supported
- Type
- Error
supports(methods) → {boolean}
Check if element supports one or more methods.
Parameters:
Name | Type | Description |
---|---|---|
methods |
string | Array.<string> | Method or list of methods to check |
- Inherited From:
- Source:
Returns:
All methods are supported
- Type
- boolean
toggle(showopt)
Toggle visibility of an element.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
show |
boolean |
<optional> |
Make element visible, omit to toggle visibility |
- Inherited From:
- Source:
Fires:
- event:visible
toggleMenu(showMenu)
Toggle menu.
Parameters:
Name | Type | Description |
---|---|---|
showMenu |
boolean | Show menu, omit to toggle |
- Source:
updateThemeClasses()
Update the theme-provided classes.
- Inherited From:
- Source: