OOUI/Layouts/Booklets and Pages

OOUI
Introduction
About the library OOjs primer
Getting started
Creating interfaces programmatically PHP examples Using OOUI in MediaWiki
Working with widgets
Elements GroupElements FlaggedElements LookupElements DraggableElements Widgets Icons, Indicators, and Labels Buttons and Switches Selects and Options Inputs Popups Progress bars Layouts Fields and Fieldsets Forms Stacks and Panels Menus Booklets and Pages Index and TabPanels Windows Simple messages Dialogs Process Dialogs Message Dialogs Window managers Toolbars Themes Other concepts
See also
Fixing scripts and gadgets

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.