new BookletLayout(configopt)
BookletLayouts contain page layouts as well as an outline that allows users to easily navigate through the pages and select which one to display. By default, only one page is displayed at a time and the outline is hidden. When a user navigates to a new page, the booklet layout automatically focuses on the first focusable element, unless the default setting is changed. Optionally, booklets can be configured to show controls for adding, moving, and removing items.
Parameters:
Name | Type | Attributes | Description | |||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
config |
Object |
<optional> |
Configuration options Properties
|
- Source:
Example
// Example of a BookletLayout that contains two PageLayouts.
function PageOneLayout( name, config ) {
PageOneLayout.parent.call( this, name, config );
this.$element.append( '<p>First page</p><p>(This booklet has an outline, displayed on the left)</p>' );
}
OO.inheritClass( PageOneLayout, OO.ui.PageLayout );
PageOneLayout.prototype.setupOutlineItem = function () {
this.outlineItem.setLabel( 'Page One' );
};
function PageTwoLayout( name, config ) {
PageTwoLayout.parent.call( this, name, config );
this.$element.append( '<p>Second page</p>' );
}
OO.inheritClass( PageTwoLayout, OO.ui.PageLayout );
PageTwoLayout.prototype.setupOutlineItem = function () {
this.outlineItem.setLabel( 'Page Two' );
};
var page1 = new PageOneLayout( 'one' ),
page2 = new PageTwoLayout( 'two' );
var booklet = new OO.ui.BookletLayout( {
outlined: true
} );
booklet.addPages ( [ page1, page2 ] );
$( 'body' ).append( booklet.$element );
Extends
Members
$content
Content DOM node
Properties:
Type | Description |
---|---|
jQuery |
- Inherited From:
- Source:
$menu
Menu DOM node
Properties:
Type | Description |
---|---|
jQuery |
- Inherited From:
- Source:
Methods
addPages(pages, index)
Add pages to the booklet layout
When pages are added with the same names as existing pages, the existing pages will be automatically removed before the new pages are added.
Parameters:
Name | Type | Description |
---|---|---|
pages |
Array.<OO.ui.PageLayout> | Pages to add |
index |
number | Index of the insertion point |
- Source:
Fires:
clearPages()
Clear all pages from the booklet layout.
To remove only a subset of pages from the booklet, use the #removePages method.
- Source:
Fires:
findClosestPage(page) → {OO.ui.PageLayout|null}
Find the page closest to the specified page.
Parameters:
Name | Type | Description |
---|---|---|
page |
OO.ui.PageLayout | Page to use as a reference point |
- Source:
Returns:
Page closest to the specified page
- Type
- OO.ui.PageLayout | null
focus(itemIndexopt)
Focus the first input in the current page.
If no page is selected, the first selectable page will be selected. If the focus is already in an element on the current page, nothing will happen.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
itemIndex |
number |
<optional> |
A specific item to focus on |
- Source:
focusFirstFocusable()
Find the first focusable input in the booklet layout and focus on it.
- Source:
getClosestScrollableElementContainer() → {HTMLElement}
Get closest scrollable container.
- Inherited From:
- Source:
Returns:
Closest scrollable container
- Type
- HTMLElement
getCurrentPage() → {OO.ui.PageLayout|undefined}
Get the current page.
- Source:
Returns:
Current page, if found
- Type
- OO.ui.PageLayout | undefined
getCurrentPageName() → {string|null}
Get the symbolic name of the current page.
- Source:
Returns:
Symbolic name of the current page
- Type
- string | null
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.
- Inherited From:
- Source:
Returns:
Menu position
- Type
- string
getOutline() → {OO.ui.OutlineSelectWidget|null}
Get the outline widget.
If the booklet is not outlined, the method will return null
.
- Source:
Returns:
Outline widget, or null if the booklet is not outlined
- Type
- OO.ui.OutlineSelectWidget | null
getOutlineControls() → {OO.ui.OutlineControlsWidget|null}
Get the outline controls widget.
If the outline is not editable, the method will return null
.
- Source:
Returns:
The outline controls widget.
- Type
- OO.ui.OutlineControlsWidget | null
getPage(name) → {OO.ui.PageLayout|undefined}
Get a page by its symbolic name.
Parameters:
Name | Type | Description |
---|---|---|
name |
string | Symbolic name of page |
- Source:
Returns:
Page, if found
- Type
- OO.ui.PageLayout | undefined
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
isEditable() → {boolean}
Check if booklet has editing controls.
- Source:
Returns:
Booklet is editable
- 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
isMenuVisible() → {boolean}
Check if menu is visible
- Inherited From:
- Source:
Returns:
Menu is visible
- Type
- boolean
isOutlined() → {boolean}
Check if booklet has an outline.
- Source:
Returns:
Booklet has an outline
- Type
- boolean
isOutlineVisible() → {boolean}
Check if booklet has a visible outline.
- Source:
Returns:
Outline is visible
- Type
- boolean
isVisible() → {boolean}
Check if element is visible.
- Inherited From:
- Source:
Returns:
element is visible
- Type
- boolean
onStackLayoutVisibleItemChange(page)
Handle visibleItemChange events from the stackLayout
The next visible page is set as the current page by selecting it in the outline
Parameters:
Name | Type | Description |
---|---|---|
page |
OO.ui.PageLayout | The next visible page in the layout |
- Source:
removePages(pages)
Remove the specified pages from the booklet layout.
To remove all pages from the booklet, you may wish to use the #clearPages method instead.
Parameters:
Name | Type | Description |
---|---|---|
pages |
Array.<OO.ui.PageLayout> | An array of pages to remove |
- Source:
Fires:
(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
selectFirstSelectablePage()
Select the first selectable page.
- Source:
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 |
- Inherited From:
- Source:
Throws:
-
If position value is not supported
- Type
- Error
setPage(name)
Set the current page by symbolic name.
Parameters:
Name | Type | Description |
---|---|---|
name |
string | Symbolic name of page |
- Source:
Fires:
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 |
- Inherited From:
- Source:
toggleOutline(showopt)
Hide or show the outline.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
show |
boolean |
<optional> |
Show outline, omit to invert current state |
- Source:
updateThemeClasses()
Update the theme-provided classes.
- Inherited From:
- Source: