Class: UWA.Controls.TabView

UWA/Controls/TabView. UWA.Controls.TabView

new UWA.Controls.TabView(options)

The TabView component is designed to create navigable tabbed views of content.

Available Events
Event Description
onAddTab Triggered when a tab is added
onPreSelectTab Triggered before a tab is selected
onSelectTab Triggered after a tab is selected
onRemoveTab Triggered after a tab is removed
onOverflowChange Triggered when tab list overflow/underflow its scroller wrapper.
Usage
var tabView = new UWA.Controls.TabView({
    className: 'nav',
    tabs: [
        // Use Simple object
        {
            id: 'tab1',
            text: 'Tab 1'
        },
        // Or custom UWA.Controls.TabView.Tab that you can extend
        new UWA.Controls.TabView.Tab({
            id: 'tab2',
            text: 'Tab 2'
        })
    ],
    events: {
        onSelectTab: function (newTab, oldTab, event) {
            newTab.setContent('some content');
        }
    }
}).inject(widget.body);

// Select first tab
tabView.selectTab('tab2');

Output HTML:

 <div class="uwa-tabview nav">
     [div class="uwa-carousel">]
         <ul class="uwa-tablist">
             <li class="uwa-tab [uwa-tab-dropdown]"><a href="#tab1"><span class="title">Tab 1</span></a></li>
             <li class="uwa-tab [selected]"><a href="#tab2"><span class="title">Tab 2</span></a></li>
         </ul>
         [<a class="uwa-carousel-button-next"><span></span></a>]
         [<a class="uwa-carousel-button-previous"><span></span></a>]
      [</div>]
     <div class="uwa-tabview-panel">
         <div id="tab1" class="uwa-tab-panel [hidden]">some content</div>
         <div id="tab2" class="uwa-tab-panel [selected]">some content</div>
     </div>
 </div>
Parameters
Name Type Description
options Object

Options hash or a option/value pair.

Properties
Name Type Argument Default Description
element HTMLElement <optional>
 null

The tabview element
className String <optional>
 ''

The tabview CSS class for theming
tabs Tab[] <optional>
 null

An array of tabs
selectedTab Tab | String <optional>
 null

Tab to make active on DOM injection
tabScroller Boolean <optional>
 false

Enable tab scroller feature
noContent Boolean <optional>
 false

Disable content panels
tabSelector String <optional>
 .uwa-tab

Tab element CSS selector
allowReload Boolean <optional>
 false

Force onSelectTab event on active tab

Extends

  • UWA.Controls.Abstract

Index

Members

Methods

Members

tabs :Tab[]

List of tab instances.

Type
  • Tab[]

selectedTab :UWA.Controls.TabView.Tab

Active tab instance.

Type
  • UWA.Controls.TabView.Tab

Methods

addTab(tab, index) → {UWA.Controls.TabView}

Add a Tab at the end of the TabView or at the specified index.

Examples

Add a tab with a config Object

tabView.addTab({id: 'xxx', text: 'Tab 1'});

Add a Tab instance

tabView.addTab(new UWA.Controls.TabView.Tab({id: 'xxx', text: 'Tab 1'}));

Add a custom Tab instance

tabView.addTab(new MyTab({id: 'xxx', text: 'Tab 1'}));
Parameters
Name Type Argument Description
tab Object | Tab

Tab instance
index Number <optional>

0-based index position
Returns

Fluent interface

Type
UWA.Controls.TabView

removeTab(tab) → {TabView}

Removes the specified Tab from TabView and DOM.

Parameters
Name Type Description
tab Tab | Number | String

Tab to remove
Fires
  • event:onRemoveTab
Returns

Fluent interface

Type
TabView

selectTab(tab, event)

Select the specified Tab.

Examples

Select a tab by its name or ID

tabView.selectTab('tab2344');

Select a tab by its index position

tabView.selectTab(0);
Parameters
Name Type Argument Description
tab Tab | Number | String

Tab to select
event Event <optional>

Browser event
Fires
  • event:onPreSelectTab
  • event:onSelectTab

enableTab(tab, enabled)

Enable or disable a tab.

Parameters
Name Type Argument Default Description
tab Tab | Number | String

Tab to enable
enabled Boolean <optional>
 false

true to enable, false to disable

getTab(id) → {Tab}

Retrieves the specified Tab from the TabView.

Example
tabView.getTab(0);      // get Tab at index 0
tabView.getTab('myId'); // get Tab by id
tabView.getTab(li);     // get Tab from LI element
tabView.getTab();       // get Current Tab
Parameters
Name Type Description
id Tab | Number | String

Identifier of the tab to retrieve
Returns

Tab instance if retrieved, otherwise false.

Type
Tab

moveTab(id, newIndex) → {Boolean}

Move the given tab to the specified index position.

Parameters
Name Type Description
id Tab | Number | String

Tab to move.
newIndex Number

New index position (0-based)
Returns
  • true if position has changed, false otherwise.
Type
Boolean

setTabContent(tab, content) → {UWA.Controls.TabView}

Set HTML content for the given tab. If the tab panel is not empty, the previous content is cleared.

Parameters
Name Type Description
tab Tab | Number | String
content String | Element

The content to set to the given tab
Returns

This - Fluent interface.

Type
UWA.Controls.TabView

getTabContent(tab)

Get the Tab panel HTML element for the given tab.

Parameters
Name Type Description
tab Tab | Number | String
Returns

HTMLElement

handleEvent(event)

Implements EventHandler interface (DOM2). Overrides this method to handle specific actions.

Parameters
Name Type Description
event Event

Browser event

getTabFromEvent(e) → {UWA.Controls.TabView.Tab}

Helper method to retrieve the Tab instance from a Browser event.

Parameters
Name Type Description
e Event

Browser event
Returns

Closest tab on which event happened

Type
UWA.Controls.TabView.Tab

reload()

Force TabView instance to refresh itself.

showTabList()

Show the list of tabs.

hideTabList()

Hide the list of tabs.

isTabVisible(id, partially) → {Boolean}

When using a scroller, whether or not the tab is visible.

Parameters
Name Type Description
id Tab | Number | String
partially Boolean
Returns

true if the tab is visible, otherwise false.

Type
Boolean

ensureTabIsVisible(id, partially, duration)

When using a scroller, scroll to the tab if not strictly visible. Automatically called by the selectTab method.

Parameters
Name Type Description
id Tab | Number | String
partially Boolean
duration Number

Scroll duration (ms)

scrollNext()

Scroll the tabs forward.

scrollPrevious()

Scroll the tabs backward.

scrollToTab(id, duration)

Scroll to the specified tab.

Parameters
Name Type Description
id Tab | Number | String

Tab to scroll
duration Number

Scroll duration (ms)

selectTabItem(id, property, value, selectTab) → {TabView}

Select the specified DropdownTab menu item.

Example
tabView.selectTabItem('mydropdownTab', 'url', feedUrl);
Parameters
Name Type Argument Default Description
id Tab | Number | String

Dropdown tab
property String

Menu item property to lookup
value String

Menu item value to compare
selectTab Boolean <optional>
 true

true to select tab if not selected
Returns

Fluent interface (this)

Type
TabView

onResize()

Adjust tabstrip scroll size.