Media WebUI

Tab Classes

The following tables describe the classes available in WebUI for tabs.

Tab Classes

Class
Description
tabs
Defines a container for one or more tabs.
tab-item
Defines a single tab element.
tab-activator
Toggles the element specified by the data target attribute.

Data Attributes

Attribute
Description
data-target
Specifies an element that will be toggled by a tab activator.

Tabs

Basic Tabs

Example
Tab 1 content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Tab 2 content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Tab 3 content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Markup
<div id="tabs1" class="tabs">
  <div class="control-group text-sm">
    <button type="button" data-target="#tab1" class="tab-activator menu-button menu-button-accent-4 transition-long rounded-top-sm width-md">Tab 1</button>
    <button type="button" data-target="#tab2" class="tab-activator menu-button menu-button-accent-4 transition-long rounded-top-sm width-md">Tab 2</button>
    <button type="button" data-target="#tab3" class="tab-activator menu-button menu-button-accent-4 transition-long rounded-top-sm width-md">Tab 3</button>
  </div>
  <div class="tab-item primary border-sm border-accent-4 height-lg" id="tab1">
    <div class="area">
      Tab 1 content
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
    </div>
  </div>
  <div class="tab-item primary border-sm border-accent-4 height-lg" id="tab2">
    <div class="area">
      Tab 2 content
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
    </div>
  </div>
  <div class="tab-item primary border-sm border-accent-4 height-lg" id="tab3">
    <div class="area">
      Tab 3 content
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
    </div>
  </div>
</div>
Script
webui.ready(function() {

  ui("#tabs1").tabControl({ 
    activeTabId: "#tab1", 
    activeTabFocused: true,
    transitionDuration: 1000,
    transitionType: "fade"
  });

});

Nesting Tabs

Example
Tab 1a content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Tab 2a content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Tab 3a content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Tab 2 content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Tab 3 content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Markup
<div id="tabsNested1" class="tabs">
  <div class="control-group text-sm">
    <button type="button" data-target="#tabNested1" class="tab-activator menu-button menu-button-accent-4 transition-long rounded-top-sm width-md">Tab 1</button>
    <button type="button" data-target="#tabNested2" class="tab-activator menu-button menu-button-accent-4 transition-long rounded-top-sm width-md">Tab 2</button>
    <button type="button" data-target="#tabNested3" class="tab-activator menu-button menu-button-accent-4 transition-long rounded-top-sm width-md">Tab 3</button>
  </div>
  <div class="tab-item primary border-sm border-accent-4 height-lg-xl" id="tabNested1">
    <div class="panel">
      <div class="tabs" id="tabsNested1a">
        <div class="control-group text-sm">
          <button type="button" data-target="#tabNested1a" class="tab-activator menu-button menu-button-accent-4 transition-long rounded-top-sm width-md">Tab 1a</button>
          <button type="button" data-target="#tabNested2a" class="tab-activator menu-button menu-button-accent-4 transition-long rounded-top-sm width-md">Tab 2a</button>
          <button type="button" data-target="#tabNested3a" class="tab-activator menu-button menu-button-accent-4 transition-long rounded-top-sm width-md">Tab 3a</button>
        </div>
        <div class="tab-item primary border-sm border-accent-4 height-lg" id="tabNested1a">
          <div class="area">
            Tab 1a content
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
          </div>
        </div>
        <div class="tab-item primary border-sm border-accent-4 height-lg" id="tabNested2a">
          <div class="area">
            Tab 2a content
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
          </div>
        </div>
        <div class="tab-item primary border-sm border-accent-4 height-lg" id="tabNested3a">
          <div class="area">
            Tab 3a content
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
          </div>
        </div>
      </div>      
    </div>
  </div>
  <div class="tab-item primary border-sm border-accent-4 height-lg-xl" id="tabNested2">
    <div class="area">
      Tab 2 content
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
    </div>
  </div>
  <div class="tab-item primary border-sm border-accent-4 height-lg-xl" id="tabNested3">
    <div class="area">
      Tab 3 content
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
    </div>
  </div>
</div>
Script
webui.ready(function() {

  ui("#tabsNested1").tabControl({ 
    activeTabId: "#tabNested1", 
    activeTabFocused: false,
    transitionDuration: 1000,
    transitionType: "fade"
  });

});
Initialisation

The JavaScript initialisation is required for fully working tabs. However, you do not have to set any properties as the default settings will take effect.

Events

There are 2 event callbacks that can be used, ui.tabs.change.before and ui.tabs.change.after. The before event is fired just before the tab change occurs, and the after event is fired just after the tab has changed. The following script shows how to setup the event callbacks.

Script
webui.ready(function() {
  
  ui( "#tabs1" ).on("ui.tabs.change.before", function(e) {
    // Take some action
  });

  ui( "#tabs1" ).on("ui.tabs.change.after", function(e) {
    console.log("Previous tab id: " + e.detail[0] + ", New tab id: " + e.detail[1]);

    // Take some action
  });

});