1. Home
  2. Classes
  3. linkedin-tool~TabbedUI

new TabbedUI( name )

Description

Implement HTML for a tabbed user interface.

This version uses radio button/label pairs to select the active panel.

Parameters
Name Type Description
name string

Used to distinguish HTML elements and CSS classes.
Examples
const tabby = new TabbedUI('Tabby Cat');
			document.body.append(tabby.container);
			tabby.addTab(helpTabDefinition);
			tabby.addTab(docTabDefinition);
			tabby.addTab(contactTabDefinition);
			tabby.goto(helpTabDefinition.name);  // Set initial tab
			tabby.next();
			const entry = tabby.tabs.get(contactTabDefinition.name);
			entry.classList.add('random-css');
			entry.innerHTML += '<p>More contact info.</p>';
Details

linkedin-tool.user.js, line 590

Members

container :external:Element

Details
external:Element

linkedin-tool.user.js, line 613

tabs :Map.<string, TabEntry>

Details
Map.<string, TabEntry>

linkedin-tool.user.js, line 627

Methods

addTab( tab )

Parameters
Name Type Description
tab TabDefinition

The new tab.
Details

linkedin-tool.user.js, line 656

next()

Description

Activate the next tab.

Details

linkedin-tool.user.js, line 689

prev()

Description

Activate the previous tab.

Details

linkedin-tool.user.js, line 699

goto( name )

Parameters
Name Type Description
name string

Name of the tab to activate.
Details

linkedin-tool.user.js, line 709

<private> installStyle()

Description

Installs basic CSS styles for the UI.

Details

linkedin-tool.user.js, line 736

<private> getTabControls() → {Array.<Element>}

Description

Get the tab controls currently in the container.

Returns

Control elements for the tabs.

Details

linkedin-tool.user.js, line 775

<private> switchTab( direction )

Description

Switch to an adjacent tab.

Parameters
Name Type Description
direction number

Either 1 or -1.
Fires
Details

linkedin-tool.user.js, line 789

<private> createInput( name, idName ) → {external:Element}

Parameters
Name Type Description
name string

Human readable name for tab.
idName string

Normalized to be CSS class friendly.
Returns

Input portion of the tab.

Details

linkedin-tool.user.js, line 812

<private> createLabel( name, input, idName ) → {external:Element}

Parameters
Name Type Description
name string

Human readable name for tab.
input external:Element

Input element associated with this label.
idName string

Normalized to be CSS class friendly.
Returns

Label portion of the tab.

Details

linkedin-tool.user.js, line 835

<private> createPanel( name, idName, content ) → {external:Element}

Parameters
Name Type Description
name string

Human readable name for tab.
idName string

Normalized to be CSS class friendly.
content TabContent

Initial content.
Returns

Panel portion of the tab.

Details

linkedin-tool.user.js, line 856

<private> onChange( panel, evt )

Description

Event handler for change events. When the active tab changes, this will resend an 'expose' event to the associated panel.

Parameters
Name Type Description
panel external:Element

The panel associated with this tab.
evt Event

The original change event.
Fires
Details

linkedin-tool.user.js, line 883

<private> installControls()

Description

Installs navigational control elements.

Details

linkedin-tool.user.js, line 897

Type Definitions

TabEntry

Properties
Name Type Description
name string

Tab name.
label external:Element

Tab label, so CSS can be applied.
panel external:Element

Tab panel, so content can be updated.
Details
object

linkedin-tool.user.js, line 617

TabContent

Description

A string of HTML or a prebuilt Element.

Details
string | Element

linkedin-tool.user.js, line 642

TabDefinition

Properties
Name Type Description
name string

Tab name.
content TabContent

Initial content.
Details
object

linkedin-tool.user.js, line 648