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
String Caption of the tab
DOMElement Element that holds the tab
onRename Fires when a tab element caption is changed Number Index of the tab
String A new caption of the tab
onDelete Fires when a specific tab element is deleted Number Index of the deleted tab
String Caption of the tab
DOMElement Element that holds 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.

 

<!-- Resource files -->
<link rel="stylesheet" type="text/css" href="/Shared/UIComponents/Internal/Tabs/css/tabs.css">
<script type="text/javascript" src="/Shared/UIComponents/Internal/Tabs/Scripts/tabs.js"></script>
   
<!-- HTML -->
<div id="tabs"></div>
<div id="layers">
   <div id="tab-lorem">Tab Content 1</div>
   <div id="tab-ipsum">Tab Content 2</div>
   <div id="tab-dolor">Tab Content 3</div>
</div>

<!-- JavaScript -->
<script type="text/javascript">
   new SK.UI.Tabs({
      tabs: [ 'Lorem', 'Ipsum', 'Dolor' ],
      tabs_holder: 'tabs',
      contents: [ 'tab-lorem', 'tab-ipsum', 'tab-dolor' ],
      selected: 0
   });
</script>

 

  • Create a tabs interface with SK.UI.Tabs based on HTML markup.

 

<!-- Resource files -->
<link rel="stylesheet" type="text/css" href="/Shared/UIComponents/Internal/Tabs/css/tabs.css">
<script type="text/javascript" src="/Shared/UIComponents/Internal/Tabs/Scripts/tabs.js"></script>

<!-- HTML -->
<div id="tabs">
   <div>Lorem</div>
   <div>Ipsum</div>
   <div>Dolor</div>
</div>
<div id="layers">
   <div class="tab-container">Tab Content 1</div>
   <div class="tab-container">Tab Content 2</div>
   <div class="tab-container">Tab Content 3</div>
</div>
   
<!-- JavaScript -->
<script type="text/javascript">
   new SK.UI.Tabs({
      tabs_holder      : 'tabs',
      content_holder   : 'layers',
      content_selector : '.tab-container',
      selected         : 2
   });
</script>

 

  • Create a mixed tab interface based on HTML markup and JavaScript.

 

<!-- Resource files -->
<link rel="stylesheet" type="text/css" href="/Shared/UIComponents/Internal/Tabs/css/tabs.css">
<script type="text/javascript" src="/Shared/UIComponents/Internal/Tabs/Scripts/tabs.js"></script>

<!-- HTML -->
<div id="tabs">
   <div>Lorem</div>
   <div>Ipsum</div>
   <div>Dolor</div>
</div>
<div id="layers">
   <div class="tab-container">Tab Content 1</div>
   <div class="tab-container">Tab Content 2</div>
   <div class="tab-container">Tab Content 3</div>
   <div class="tab-container">Tab Content 4</div>
</div>

<!-- JavaScript -->
<script type="text/javascript">
   new SK.UI.Tabs({
      tabs_holder     : 'tabs',
      tabs            : [ 'Sit' ],
      content_holder  : 'layers',
      selected        : 1,
      enable_delete   : true,
      enable_add      : true,
      enable_rename   : true
   });
</script>