new CapsuleMultiselectWidget(configopt)
CapsuleMultiselectWidgets are something like a combo box widget
that allows for selecting multiple values.
For more information about menus and options, please see the [OOUI documentation on MediaWiki][1].
Parameters:
Name | Type | Attributes | Description | |||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
config |
Object |
<optional> |
Configuration options
Properties
|
- Mixes In:
- Source:
Example
// Example: A CapsuleMultiselectWidget.
var capsule = new OO.ui.CapsuleMultiselectWidget( {
label: 'CapsuleMultiselectWidget',
selected: [ 'Option 1', 'Option 3' ],
menu: {
items: [
new OO.ui.MenuOptionWidget( {
data: 'Option 1',
label: 'Option One'
} ),
new OO.ui.MenuOptionWidget( {
data: 'Option 2',
label: 'Option Two'
} ),
new OO.ui.MenuOptionWidget( {
data: 'Option 3',
label: 'Option Three'
} ),
new OO.ui.MenuOptionWidget( {
data: 'Option 4',
label: 'Option Four'
} ),
new OO.ui.MenuOptionWidget( {
data: 'Option 5',
label: 'Option Five'
} )
]
}
} );
$( 'body' ).append( capsule.$element );
[1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options#Menu_selects_and_options
Extends
Methods
addItemFromLabel(label) → {boolean}
Add items to the capsule by providing a label
Parameters:
Name | Type | Description |
---|---|---|
label |
string |
Returns:
Whether the item was added or not
- Type
- boolean
addItems()
addItemsFromData(datas) → {OO.ui.CapsuleMultiselectWidget}
Add items to the capsule by providing their data
Parameters:
Name | Type | Description |
---|---|---|
datas |
Array.<Mixed> |
Returns:
clearItems()
(protected) createItemWidget(data, label) → {OO.ui.CapsuleItemWidget|null}
Construct a OO.ui.CapsuleItemWidget (or a subclass thereof) from given label and data.
May return `null` if the given label and data are not valid.
Parameters:
Name | Type | Description |
---|---|---|
data |
Mixed | Custom data of any type. |
label |
string | The label text. |
Returns:
- Type
- OO.ui.CapsuleItemWidget | null
editItem(item)
Removes the item from the list and copies its label to `this.$input`.
Parameters:
Name | Type | Description |
---|---|---|
item |
Object |
focus()
Focus the widget
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
getInputId() → {string|null}
Get an ID of a labelable node which is part of this widget, if any, to be used for `
- Overrides:
- Source:
Returns:
The ID of the labelable element
- Type
- string | null
getItemsData() → {Array.<Mixed>}
Get the data of the items in the capsule
Returns:
- Type
- Array.<Mixed>
getMenu() → {OO.ui.MenuSelectWidget}
Get the capsule widget's menu.
Returns:
Menu widget
getNextItem(itemopt) → {OO.ui.CapsuleItemWidget|jQuery|boolean}
Given an item, returns the item after it. If its the last item,
returns `this.$input`. If no item is passed, returns the very first
item.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
item |
OO.ui.CapsuleItemWidget |
<optional> |
Returns:
- Type
- OO.ui.CapsuleItemWidget | jQuery | boolean
getPreviousItem(itemopt) → {OO.ui.CapsuleItemWidget|jQuery|boolean}
Given an item, returns the item before it. If its the first item,
returns `this.$input`. If no item is passed, returns the very last
item.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
item |
OO.ui.CapsuleItemWidget |
<optional> |
Returns:
- Type
- OO.ui.CapsuleItemWidget | jQuery | boolean
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
isDisabled() → {boolean}
Check if the widget is disabled.
- Inherited From:
- Source:
Returns:
Widget is disabled
- Type
- boolean
isElementAttached() → {boolean}
Check if the element is attached to the DOM
- Inherited From:
- Source:
Returns:
The element is attached to the DOM
- Type
- boolean
isVisible() → {boolean}
Check if element is visible.
- Inherited From:
- Source:
Returns:
element is visible
- Type
- boolean
removeItems()
removeItemsFromData(datas) → {OO.ui.CapsuleMultiselectWidget}
Remove items by data
Parameters:
Name | Type | Description |
---|---|---|
datas |
Array.<Mixed> |
Returns:
(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:
setDisabled(disabled)
Set the 'disabled' state of the widget.
When a widget is disabled, it cannot be used and its appearance is updated to reflect this state.
Parameters:
Name | Type | Description |
---|---|---|
disabled |
boolean | Disable widget |
- Overrides:
- 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:
setItemsFromData(datas) → {OO.ui.CapsuleMultiselectWidget}
Set the items in the capsule by providing data
Parameters:
Name | Type | Description |
---|---|---|
datas |
Array.<Mixed> |
Returns:
simulateLabelClick()
Simulate the behavior of clicking on a label (a HTML `
- Inherited From:
- Source:
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
updateDisabled()
Update the disabled state, in case of changes in parent widget.
- Inherited From:
- Source:
updateThemeClasses()
Update the theme-provided classes.
- Inherited From:
- Source: