Skip to content

Commit

Permalink
Modifies tabs to no long require a specific HTML tag
Browse files Browse the repository at this point in the history 
You can how use ULs or simply DIVs to create tabs, no DL dependency
(still backwards compatible though)
  • Loading branch information
Jonathan Smiley committed May 20, 2014
1 parent 1badca9 commit 0608559
Show file tree
Hide file tree
Showing 7 changed files with 42 additions and 40 deletions.
12 changes: 6 additions & 6 deletions doc/includes/tabs/examples_tabs_basic.html
View file
@@ -1,9 +1,9 @@
<dl class="tabs" data-tab>
<dd class="active"><a href="#panel2-1">Tab 1</a></dd>
<dd><a href="#panel2-2">Tab 2</a></dd>
<dd><a href="#panel2-3">Tab 3</a></dd>
<dd><a href="#panel2-4">Tab 4</a></dd>
</dl>
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
<li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
<li class="tab-title"><a href="#panel2-3">Tab 3</a></li>
<li class="tab-title"><a href="#panel2-4">Tab 4</a></li>
</ul>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<p>First panel content goes here...</p>
Expand Down
12 changes: 6 additions & 6 deletions doc/includes/tabs/examples_tabs_basic_rendered.html
View file
@@ -1,9 +1,9 @@
<dl class="tabs" data-tab>
<dd class="active"><a href="#panel2-1">Tab 1</a></dd>
<dd><a href="#panel2-2">Tab 2</a></dd>
<dd><a href="#panel2-3">Tab 3</a></dd>
<dd><a href="#panel2-4">Tab 4</a></dd>
</dl>
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
<li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
<li class="tab-title"><a href="#panel2-3">Tab 3</a></li>
<li class="tab-title"><a href="#panel2-4">Tab 4</a></li>
</ul>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<p>This is the first panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, pariatur accusantium magni cumque vel voluptates illum repellendus sed dignissimos magnam! Deleniti, fugit tempore quibusdam molestias iusto asperiores incidunt sint nemo?</p>
Expand Down
12 changes: 6 additions & 6 deletions doc/includes/tabs/examples_tabs_intro.html
View file
@@ -1,9 +1,9 @@
<dl class="radius tabs" data-tab>
<dd class="active"><a href="#panel1">Tab 1</a></dd>
<dd><a href="#panel2">Tab 2</a></dd>
<dd><a href="#panel3">Tab 3</a></dd>
<dd><a href="#panel4">Tab 4</a></dd>
</dl>
<ul class="radius tabs" data-tab>
<li class="tab-title active"><a href="#panel1">Tab 1</a></li>
<li class="tab-title"><a href="#panel2">Tab 2</a></li>
<li class="tab-title"><a href="#panel3">Tab 3</a></li>
<li class="tab-title"><a href="#panel4">Tab 4</a></li>
</ul>
<div class="tabs-content">
<div class="content active" id="panel1">
<p>First panel content goes here. Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
Expand Down
12 changes: 6 additions & 6 deletions doc/includes/tabs/examples_tabs_vertical_basic.html
View file
@@ -1,9 +1,9 @@
<dl class="tabs vertical" data-tab>
<dd class="active"><a href="#panel1a">Tab 1</a></dd>
<dd><a href="#panel2a">Tab 2</a></dd>
<dd><a href="#panel3a">Tab 3</a></dd>
<dd><a href="#panel4a">Tab 4</a></dd>
</dl>
<ul class="tabs vertical" data-tab>
<li class="tab-title active"><a href="#panel1a">Tab 1</a></li>
<li class="tab-title"><a href="#panel2a">Tab 2</a></li>
<li class="tab-title"><a href="#panel3a">Tab 3</a></li>
<li class="tab-title"><a href="#panel4a">Tab 4</a></li>
</ul>
<div class="tabs-content vertical">
<div class="content active" id="panel1a">
<p>Panel 1 content goes here.</p>
Expand Down
12 changes: 6 additions & 6 deletions doc/includes/tabs/examples_tabs_vertical_basic_rendered.html
View file
@@ -1,9 +1,9 @@
<dl class="tabs vertical" data-tab>
<dd class="active"><a href="#panel1a">Tab 1</a></dd>
<dd><a href="#panel2a">Tab 2</a></dd>
<dd><a href="#panel3a">Tab 3</a></dd>
<dd><a href="#panel4a">Tab 4</a></dd>
</dl>
<ul class="tabs vertical" data-tab>
<li class="tab-title active"><a href="#panel1a">Tab 1</a></li>
<li class="tab-title"><a href="#panel2a">Tab 2</a></li>
<li class="tab-title"><a href="#panel3a">Tab 3</a></li>
<li class="tab-title"><a href="#panel4a">Tab 4</a></li>
</ul>
<div class="tabs-content vertical">
<div class="content active" id="panel1a">
<p>Panel 1 content goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, culpa, eos, laboriosam delectus sequi asperiores labore fuga ex molestias a assumenda nesciunt libero consequatur nulla deserunt eveniet ea nobis magni!</p>
Expand Down
12 changes: 6 additions & 6 deletions js/foundation/foundation.tab.js
View file
Expand Up @@ -26,7 +26,7 @@
// Store the default active tabs which will be referenced when the
// location hash is absent, as in the case of navigating the tabs and
// returning to the first viewing via the browser Back button.
S('[' + this.attr_name() + '] > dd.active > a', this.scope).each(function () {
S('[' + this.attr_name() + '] > .active > a', this.scope).each(function () {
self.default_tab_hashes.push(this.hash);
});
},
Expand All @@ -38,7 +38,7 @@
S(this.scope)
.off('.tab')
// Click event: tab title
.on('click.fndtn.tab', '[' + this.attr_name() + '] > dd > a', function (e) {
.on('click.fndtn.tab', '[' + this.attr_name() + '] > * > a', function (e) {
var settings = S(this).closest('[' + self.attr_name() +']').data(self.attr_name(true) + '-init');
if (!settings.is_hover || Modernizr.touch) {
e.preventDefault();
Expand All @@ -47,7 +47,7 @@
}
})
// Hover event: tab title
.on('mouseenter.fndtn.tab', '[' + this.attr_name() + '] > dd > a', function (e) {
.on('mouseenter.fndtn.tab', '[' + this.attr_name() + '] > * > a', function (e) {
var settings = S(this).closest('[' + self.attr_name() +']').data(self.attr_name(true) + '-init');
if (settings.is_hover) self.toggle_active_tab(S(this).parent());
});
Expand All @@ -74,19 +74,19 @@
var hash_element = S(hash);
if (hash_element.hasClass('content') && hash_element.parent().hasClass('tab-content')) {
// Tab content div
self.toggle_active_tab($('[' + self.attr_name() + '] > dd > a[href=' + hash + ']').parent());
self.toggle_active_tab($('[' + self.attr_name() + '] > * > a[href=' + hash + ']').parent());
} else {
// Not the tab content div. If inside the tab content, find the
// containing tab and toggle it as active.
var hash_tab_container_id = hash_element.closest('.content').attr('id');
if (hash_tab_container_id != undefined) {
self.toggle_active_tab($('[' + self.attr_name() + '] > dd > a[href=#' + hash_tab_container_id + ']').parent(), hash);
self.toggle_active_tab($('[' + self.attr_name() + '] > * > a[href=#' + hash_tab_container_id + ']').parent(), hash);
}
}
} else {
// Reference the default tab hashes which were initialized in the init function
for (var ind in self.default_tab_hashes) {
self.toggle_active_tab($('[' + self.attr_name() + '] > dd > a[href=' + self.default_tab_hashes[ind] + ']').parent());
self.toggle_active_tab($('[' + self.attr_name() + '] > * > a[href=' + self.default_tab_hashes[ind] + ']').parent());
}
}
}
Expand Down
10 changes: 6 additions & 4 deletions scss/foundation/components/_tabs.scss
View file
Expand Up @@ -30,9 +30,11 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
.tabs {
@include clearfix;
margin-bottom: 0 !important;
dd {
margin-left: 0;
dd, .tab-title {
position: relative;
margin-bottom: 0 !important;
list-style: none;
float: $default-float;
> a {
display: block;
Expand All @@ -46,15 +48,15 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
&.active a { background: $tabs-navigation-active-bg-color; }
}
&.radius {
dd:first-child {
dd:first-child, .tab:first-child {
a { @include side-radius($default-float, $global-radius); }
}
dd:last-child {
dd:last-child, .tab:last-child {
a { @include side-radius($opposite-direction, $global-radius); }
}
}
&.vertical {
dd {
dd, .tab {
position: inherit;
float: none;
display: block;
Expand Down

0 comments on commit 0608559

Please sign in to comment.