Foundation - Tabs JavaScript Reference

Foundation provides JavaScript components for the tabs as listed below −

Initializing

You can initialize the pane in JavaScript by using the foundation.tabs.js and foundation.core.js plugins. The foundation.core.js plugin requires the following libraries −

  • foundation.util.keyboard.js

  • foundation.util.timerAndImageLoader.js

Foundation.Tabs

It specifies the instance of tabs as defined below −

var my_element = new Foundation.Tabs(element);

The tabs includes the following values −

Sr.No. Name & Description Type
1

element

It uses the jQuery object for the tabs.

 Number
2

options

It overrides to the default plugin settings for the tabs.

 Object

Plugin Options

You can use the following plugin options to customize the tabs instance.

Sr.No. Name & Description Example
1

autoFocus

If you set this plugin to true, window will scroll to the content of active pane on load.

 false
2

wrapOnKeys

It wraps the content around tab links using keyboard input.

 true
3

matchHeight

It matches the height of tab content panes by setting it to true.

 false
4

linkClass

It is applied to the 'li's in tab link list.

 'tabs-title'
5

panelClass

It is applied to the content containers.

 'tabs-panel'

Events

Tabs provides the following event as listed in the table −

Sr.No. Event & Description
1

change.zf.tabs

It triggers when plugin changes the tab successfully.

Functions

Tabs provide the following functions as defined below −

._handleTabChange

It handles the $targetContent tab specified by $target function as shown in the following table −

Sr.No. Name & Description Type
1

$target

It will open the tab.

 jQuery

.selectTab

It is used to select the content pane for displaying the content and can be specified as shown in the following table −

Sr.No. Name & Description Type
1

elem

It uses jQuery object or id of the pane for displaying content pane.

 jQuery

.destroy

It is used to destroy the tab instance.

foundation_containers.htm
Advertisements