Overview
Tabs is a UI that gives a way to break content into multiple sections which can be switched.
Each tab can be defined in HTML markup or by initializing of the Tabs UI.
The content of each tab can be defined in separate element, that can be instantiated by:
HTML elements with different IDs that are specified on initialization
A given tabs content placeholder that wraps all tab bodies with speicified selector.
Include resource files
/Shared/UIComponents/Internal/Tabs
css/tabs.css
<link rel="stylesheet" type="text/css" href="/Shared/UIComponents/Internal/Tabs/css/tabs.css"></li>
Scripts/tabs.js
<script type="text/javascript" src="/Shared/UIComponents/Internal/Tabs/Scripts/tabs.js"></script>
Default Options
Name | Description | Type | Default Value |
|---|---|---|---|
default_prefix | Default tab caption prefix when creating a new tab | String | Tab |
tabs | Contains the captions of the tabs | Array | [] |
contents | Contains IDs of the elements that holds tabs content. Each element will be associated with a particular tab | Array | [] |
tabs_holder | ID of the DOM element that contains all tab elements with the given tabs_selector | DOMElement | tabs |
tabs_selector | Default selector of the DOM element that wraps tab caption | String | div |
content_holder | ID of the DOM element (container) that contains all body elements which are associated with tab captions. Each tab body will be referenced with content_selector value. | DOMElement | - |
content_selector | Default class selector of the tab bodies DOM elements. For bigger flexibility, each element with this class will be considered as tab body element | String | .tab-container |
selected | Index (zero-indexed) of the tab that is selected by default | Number | 0 |
default_tab_class | Default class attribute of the tab elements | String | sk-tab |
enable_delete | Possibility to delete an existing tab elements | Boolean | false |
enable_add | Possibility to add new tab elements | Boolean | false |
enable_rename | Possibility to edit tabs caption | Boolean | false |
min_tabs | Minimum number of the tabs | Number | 1 |
max_tabs | Maximum number of the existing tabs | Number | 0 |
NOTE: If you specify in options parameter both "tabs" and "tabs_holder", firstly Tabs UI will display the tabs that comes from HTML markup (from element with ID equals to the value from "tabs_holder") and then will append the tabs from "tabs" array. Make sure that you have tab body elements for all of your tabs.
Methods
Name | Description | Parameters | Returns |
|---|---|---|---|
add | Insert new tab by a specified caption. Returns DOM element that wraps tab caption | String Caption of the tab | DOMElement |
remove | Deleting element by a specified tab index (zero-indexed) | Number Tab index | - |
select | Change currently selected tab by a specified tab element index (zero-indexed) | Number Tab index | - |
enableTabs | Enables switching between different tabs | - | - |
disableTabs | Disables switching between different tabs | - | - |
getTabElement | Get a DOM element by a specified tab index (zero-indexed) | Number Tab index | DOMElement |
getTabsCount | Returns the count of existing tabs | - | Number |
Events
Name | Description | Arguments |
|---|---|---|
onAdd | Fires when a new tab element is created | Number Index of the added tab |
onRename | Fires when a tab element caption is changed | Number Index of the tab |
onDelete | Fires when a specific tab element is deleted | Number Index of the deleted tab |
onSelect | Fires when a tab element is selected | Number Index of the selected tab |
onBeforeDeselect | Fires before to change selection on the other tab | Number Index of the tab |
onDeselect | Fires when a tab element was deselected | Number Index of deselected tab |
Examples
Create a simple Tabs UI dynamically with SK.UI.Tabs.
Create a tabs interface with SK.UI.Tabs based on HTML markup.
Create a mixed tab interface based on HTML markup and JavaScript.