js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 11:09:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add show/hide events

Browse Source
This commit is contained in:
Cory LaViska
2017-08-07 10:33:23 -04:00
parent adce9e3c98
commit 0608a479e0
1 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
source/js/tabs.js
View File

@@ -24,11 +24,6 @@
//
// To disable a tab, add the "disabled" class to the appropriate tab nav.
//
// To programmatically show or hide a tab, apply the "active" class to the appropriate tab nav and
// tab pane. (Make sure to remove the "active" class from other active navs/panes first!)
//
// TODO - add show/hide events when tabs are shown/hidden
//
if(typeof jQuery === 'undefined') {
throw new Error('The Shoelace tabs script requires jQuery.');
} else {
@@ -39,21 +34,31 @@ if(typeof jQuery === 'undefined') {
$(document).on('click', '.tabs-nav a', function(event) {
var tabs = $(this).closest('.tabs');
var tabNav = this;
var selectedPane = $(tabs).find(tabNav.hash).get(0);
event.preventDefault();
// Ignore tabs without an href or with the "disabled" class
if(!tabNav.hash || $(tabNav).is('.disabled')) return;
if(!tabNav.hash || $(tabNav).is('.disabled')) {
return;
}
// Make the selected tab active
$(tabNav)
.siblings().removeClass('active').end()
.addClass('active');
// Make the appropriate tab pane active
$(tabs)
.find('.tabs-pane').removeClass('active').end()
.find(tabNav.hash).addClass('active');
// Hide active tab panes that aren't getting selected
$(tabs).find('.tabs-pane.active').not(selectedPane).each(function() {
$(this).removeClass('active');
$(tabs).trigger('hide', this);
});
// Show the selected tab pane
if(selectedPane && !$(selectedPane).is('.active')) {
$(selectedPane).addClass('active');
$(tabs).trigger('show', selectedPane);
}
});
});
}