OOUI/Layouts/Booklets and Pages

A BookletLayout is a rich layout that contains PageLayouts as well as an outline (generated by an OutlineSelectWidget) 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 widget 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.

In general, PageLayouts are highly customized for a specific application and are built by extending the class to include the desired functionality. The example below uses two very simple pages to illustrate the BookletLayout and its behavior.

// Example of a BookletLayout that contains two PageLayouts.
// PageLayouts are extended so that the build-out of their content and the 
// behavior of interacting with the content is encapsulated.


// Extend the PageLayout class to customize it. 
// Set a label for each page (e.g., 'Page One', in this example)
function PageOneLayout( name, config ) {
	PageOneLayout.super.call( this, name, config );
	this.$element.append( '<p>First page</p>' );
}
OO.inheritClass( PageOneLayout, OO.ui.PageLayout );
PageOneLayout.prototype.setupOutlineItem = function () {
	this.outlineItem.setLabel( 'Page One' );
};

function PageTwoLayout( name, config ) {
	PageTwoLayout.super.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' );
};

// Create the pages.
var page1 = new PageOneLayout( 'one' ),
	page2 = new PageTwoLayout( 'two' ),

// Create a booklet. Set 'outlined' to 'true' to display the 
// outline labels (e.g., 'Page One') on the left side of the booklet.
	booklet = new OO.ui.BookletLayout( { 
		outlined: true
	} );

// Add pages to the booklet with the addPages() method.
booklet.addPages ( [ page1, page2 ] );    
 
$( document.body ).append( booklet.$element );

For more information, please see the code-generated documentation for BookletLayouts and PageLayouts.