- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
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.
To Continue Learning Please Login
Login with Google