API
Tabs has a powerful JavaScript API that makes it extremely easy for developers to programatically interact with tabs and respond to events.
On this page
Getting started
All API methods and events are available on the window.Station.Apps.Tabs
object after the {% include 'station-tabs' %}
snippet has been rendered by the theme.
<!-- layout/theme.liquid --> <body> ... {{ content_for_layout }} {% include 'station-tabs' %} ... <script> window.Station.Apps.Tabs.on('ready', function(){ console.log('Tabs are ready'); }); </script> ... </body>
You can also use the Custom JavaScript area under Settings > Scripts in the app.
JavaScript added there will be run after the API has been initialized but before the tabs are constructed, allowing you to easily modify any settings prior to the tabs being displayed.
Methods
.on()
.on(event, callback)
Register a callback for an event.
Parameters
event
string, required The name of the event to watch for. Available values are: open
string Fires when a tab is opened. See the open event for more information. ready
string Fires when the tabs are constructed and ready for interaction. See the ready event for more information. transitionEnd
string Fires when a tab content panel finishes animating open or closed. See the transitionEnd event for more information.
callback
function, required The function to be called when the specified event is fired. The callback function is bound to the Station.Apps.Tabs
object.
Station.Apps.Tabs.on('ready', function(){ console.log('Tabs are ready'); }); // Output 'Tabs are ready'
.open()
.open(id, options)
Open a tab using the tab ID.
Parameters
id
string, required The href
value of the tab link to open.
options
object A JSON object of options. animate: true
boolean Animate the opening of the tab (vertical layout only). deepLink: true
boolean Add the tab id to the URL parameters. preventClose: true
boolean Prevent the tab from closing if it's already open (vertical layout only). scrollIntoView: false
boolean Scroll the tab into view. Uses element.scrollIntoView, so behaviour is dependent on the browser. skipCallback: false
boolean Prevent the .on('open')
event from firing.
content
, instance
and link
elements.
content
object The tab's content element.
instance
object The tab group's wrapping element.
link
object The tab's link element.
Station.Apps.Tabs.open('description_0-1', { animate: true, deepLink: true, preventClose: true, scrollIntoView: false, skipCallback: false }); // Return { content: {...}, instance: {...}, link: {...} }
.openByTitle()
.openByTitle(title, options)
Open a tab using the tab title.
Parameters
title
string, required The title of the tab link. If multiple tabs have the same title then only the first one will be opened.
options
object A JSON object of options. animate: true
boolean Animate the opening of the tab (vertical layout only). deepLink: true
boolean Add the tab id to the URL parameters. preventClose: true
boolean Prevent the tab from closing if it's already open (vertical layout only). scrollIntoView: false
boolean Scroll the tab into view. Uses element.scrollIntoView, so behaviour is dependent on the browser. skipCallback: false
boolean Prevent the .on('open')
event from firing.
content
, instance
and link
elements.
content
object The tab's content element.
instance
object The tab group's wrapping element.
link
object The tab's link element.
Station.Apps.Tabs.openByTitle('Reviews', { animate: true, deepLink: true, preventClose: true, scrollIntoView: false, skipCallback: false }); // Return { content: {...}, instance: {...}, link: {...} }
.settings
.settings
Return an object containing the app settings. You can use the custom JavaScript panel under Settings > Scripts to programatically change the settings before the app is initialized.
Example
Station.Apps.Tabs.settings // Return { clean_content: true clean_content_level: "no_attrs" clean_content_nodes: (4) ["div", "span", "section", "article"] deep_links: true dev_mode: false fix_known_issues: true force_full: false force_wrap: false full_open: true full_single_active: true product_autosplit: true product_autosplit_heading: "h4" product_description_tab: true product_description_tab_title: "Description" show_content_after: false }
.version
.version
Return a string containing the semantic version of the app that the theme is using.
Example
Station.Apps.Tabs.version // Return "2.3.2"
Events
Events to be used by the .on() method.
open
open
Fires when a tab is opened. An object with the following properties is passed to the callback function:
content
object The tab's content element.
instance
object The tab group's wrapping element.
link
object The tab's link element.
(function(tabs) { tabs.on('open', function(data) { let videos = data.content.getElementsByTagName('video'); videos[0].play(); }); })(Station.Apps.Tabs);
ready
ready
Fires when the tabs are constructed and ready for interaction. The ready event should be used any time a script needs to be run when the page loads.
Example
(function(tabs) { tabs.on('ready', function() { // Tabs are ready for interaction }); })(Station.Apps.Tabs);
transitionEnd
transitionEnd
Fires when a tab content panel finishes animating open or closed. An object with the following properties is passed to the callback function:
content
object The tab's content element.
instance
object The tab group's wrapping element.
link
object The tab's link element.
(function(tabs) { tabs.on('transitionEnd', function(data) { if (data.content.classList.contains('is-active')) { let height = data.content.offsetHeight; console.log(height); } }); })(Station.Apps.Tabs);