Tabs

Examples

Tab 1

Tab 2

Tab 3

Stuff goes here 1

Stuff goes here 2

Stuff goes here 3

HTML

<div id="tabs" class="hx-tabs hx-flag-tabs">
  <div id="tab1" class="hx-tab" data-content="tab-content-1">Tab 1</div>
  <div id="tab2" class="hx-tab" data-content="tab-content-2">Tab 2</div>
  <div id="tab3" class="hx-tab" data-content="tab-content-3">Tab 3</div>
  <div class="hx-tabs-content demo-tabs-content-padded">
    <div id="tab-content-1" class="hx-tab-content">Stuff goes here 1</div>
    <div id="tab-content-2" class="hx-tab-content">Stuff goes here 2</div>
    <div id="tab-content-3" class="hx-tab-content">Stuff goes here 3</div>
  </div>
</div>

JavaScript

var tabs = new hx.Tabs('#tabs');

Tab 1

Tab 2

Tab 3

Tab 4

Tab 5

Tab 6

Tab 7

HTML

<div id="tabs-script" class="hx-tabs hx-flag-tabs">
  <div id="tab1" class="hx-tab">Tab 1</div>
  <div id="tab2" class="hx-tab hx-action">Tab 2</div>
  <div id="tab3" class="hx-tab hx-positive">Tab 3</div>
  <div id="tab4" class="hx-tab hx-warning">Tab 4</div>
  <div id="tab5" class="hx-tab hx-negative">Tab 5</div>
  <div id="tab6" class="hx-tab hx-info">Tab 6</div>
  <div id="tab7" class="hx-tab hx-contrast">Tab 7</div>
  <div class="hx-tabs-content"></div>
</div>

JavaScript

var tabs = new hx.Tabs('#tabs-script');

tabs.on('change', function(data){
  hx.select('#tabs-script')
    .select('.hx-tabs-content')
      .text('Tab ' + (data.id+1) + ' selected')
});

tabs.select(0, true);

1.x tabs styles

Tab 1

Tab 2

Tab 3

Stuff goes here 1

Stuff goes here 2

Stuff goes here 3

HTML

<p class="hx-header-medium">1.x tabs styles</p>
<div id="tabs-old" class="hx-tabs">
  <div id="tab1" class="hx-tab" data-content="tab-content-1">Tab 1</div>
  <div id="tab2" class="hx-tab" data-content="tab-content-2">Tab 2</div>
  <div id="tab3" class="hx-tab" data-content="tab-content-3">Tab 3</div>
  <div class="hx-tabs-content demo-tabs-content-padded">
    <div id="tab-content-1" class="hx-tab-content">Stuff goes here 1</div>
    <div id="tab-content-2" class="hx-tab-content">Stuff goes here 2</div>
    <div id="tab-content-3" class="hx-tab-content">Stuff goes here 3</div>
  </div>
</div>

JavaScript

var tabs = new hx.Tabs('#tabs-old');

Api

Change Log

Prototypes

hx.TabsextendsEventEmitter

A layout type for displaying multiple pieces of content in the same area of the page.

Constructors

hx.TabsselectionString / HTMLElement

Sets up a tabs layout.

Arguments

selectionString / HTMLElement

A unique css selector or a HTMLElement that identifies the tabs section.

Properties

selectedNumber

The index of the selected tab.

Events

change

Emitted when the selected tab is changed.

Methods

selectindexNumberforceBooleanTabs

Selects a tab by index.

Arguments

indexNumber

The index of the tab to select. This will reveal the content for that tab.

forceBoolean

By default selections that do not actually change the selected tab will be ignored. Supply true here to force the selection to be updated even if it is the same (and thus cause a 'change' event to be emitted).

Returns

Tabs

This Tabs

Classes

hx-flag-tabs

Applies the updated tabs style. The updates are intended to make the tabs more readable and easier to identify what tab is active.

The key differences are the removal of context class support, with all tabs using the same colour and border, and the addition of padding to the content area to ensure the tabs always line up with the content.

hx-tabs

The class to give to the tabs container

Classes

hx-tab

The class to give to each tab in the tabs container

Extra Classes

hx-action

Colors the tab with the action color.

hx-complement

Colors the tab with the complement color.

hx-contrast

Colors the tab with the contrast color.

hx-info

Colors the tab with the info color.

hx-negative

Colors the tab with the negative color.

hx-positive

Colors the tab with the positive color.

hx-warning

Colors the tab with the warning color.