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);