OOUI/Index and TabPanels

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

An IndexLayout contains TabPanelLayouts as well as an optional tab navigation that allows users to easily navigate through the tab panels and select which one to display. By default, only one tab panel is displayed at a time. When a user navigates to a new tab panel, the index layout automatically focuses on the first focusable element, unless the default setting is changed.

The following is an example of an index layout that contains two tab panels that are accessed via a tab navigation. To see this example live, please see the code-generated documentation and click "live preview." For a full list of supported methods and configuration options, please see the code-level documentation for IndexLayouts and TabPanelLayouts. There is also a different live example on the demo.

// Example of a IndexLayout that contains two TabPanelLayouts.

function TabPanelOneLayout( name, config ) {
	TabPanelOneLayout.super.call( this, name, config );
	this.$element.append( '<p>First tab panel</p>' );
}
OO.inheritClass( TabPanelOneLayout, OO.ui.TabPanelLayout );
TabPanelOneLayout.prototype.setupTabItem = function () {
	this.tabItem.setLabel( 'TabPanel 1' );
};

function TabPanelTwoLayout( name, config ) {
	TabPanelTwoLayout.super.call( this, name, config );
	this.$element.append( '<p>Second tab panel</p>' );
}
OO.inheritClass( TabPanelTwoLayout, OO.ui.TabPanelLayout );
TabPanelTwoLayout.prototype.setupTabItem = function () {
	this.tabItem.setLabel( 'TabPanel 2' );
};

var tabPanel1 = new TabPanelOneLayout( 'one' ),
	tabPanel2 = new TabPanelTwoLayout( 'two' ),
	index = new OO.ui.IndexLayout();

index.addTabPanels ( [ tabPanel1, tabPanel2 ] );
$( document.body ).append( index.$element );