Title for Section 0
Content for Tab 0!
Title for Section 1
Content for Tab 1 !
Title for Section 2
Content for Tab 2!
Tab navigation is one of the most successful metaphors we can find in web interface and it is widely used today.
In spite of being user-friendly, there are some few points you should consider before using tabs:
Note that each tab section is tagged with the section
element, and therefore with its associated title, also necessary to ease keyboard navigation.
You should adjust the level of the title based on your the structure of your document (use The HTML5 Outliner in order to check and finetune the outline of your document).
Content for Tab 0!
Content for Tab 1 !
Content for Tab 2!
<div class="k-tabbed-data">
<ul class="tabs">
<li><a href="#panel0">Tab Name 0</a></li>
<li><a href="#panel1">Tab Name 1</a></li>
<li><a href="#panel2">Tab Name 2</a></li>
</ul>
<section id="panel0" class="content">
<h3>Title for Section 0</h3>
<p><strong>Content for Tab 0</strong>!</p>
</section>
<section id="panel1" class="content">
<h3>Title for Section 1</h3>
<p><strong>Content for Tab 1</strong> !</p>
<p><a href="#">With a link for keyboard test</a></p>
</section>
<section id="panel2" class="content">
<h3>Title for Section 2</h3>
<p><strong>Content for Tab 2</strong>!</p>
</section>
</div>
.k-tabbed-data {clear: both;}
ul.tabs {padding: 0; margin: 0;}
ul.tabs > li {
display: inline-block;
list-style-type: none;
font-size: 1em;
text-transform: uppercase;
padding: 0;
margin-right: 0.5rem;
}
ul.tabs a, ul.tabs a:link, ul.tabs a:visited {
display: block;
text-decoration: none;
color: #000;
background: #FFF;
padding: 0.5em 1em;
border: 1px solid gray;
border-bottom: none
}
ul.tabs a:hover, ul.tabs a:focus {
color: #FFF;
background: #A40800;
}
/* Active tab*/
ul.tabs a.active, ul.tabs a.active:link, ul.tabs a.active:visited {
color: #FFF;
background: #000;
border: 1px solid #000;
}
ul.tabs a.active:hover, ul.tabs a.active:focus {
color: #FFF;
background: #A40800;
border-color: #A40800;
}
/* Disabled tab */
ul.tabs a.off, ul.tabs a.off:link, ul.tabs a.off:visited {
color: #CCC;
background: #FFF;
border: 1px solid #CCC;
}
ul.tabs a.off:focus {
color: #CCC;
background: #FFF;
}
ul.tabs strong.off {
display: block;
font-weight: normal;
text-decoration: none;
color: #ccc;
background: #FFF;
padding: 0.5em 1em;
border: 1px solid #CCC;
border-bottom: none;
}
/* Content block */
.k-tabbed-data > .content {
clear: both;
overflow: auto;
color: #000;
background: #FFF;
padding: 1rem;
margin-bottom: 2em;
border: 1px solid #000;
}
/* Small view - when tabs don't fit anymore */
.k-tabbed-data.adaptive {position: relative;}
.k-tabbed-data.adaptive ul.tabs {clear: both;}
.k-tabbed-data.adaptive ul.tabs > li {
display: block;
margin: 0;
}
.k-tabbed-data.adaptive ul.tabs a, .k-tabbed-data.adaptive ul.tabs a:link, .k-tabbed-data.adaptive ul.tabs a:visited {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #000;
padding: 0.5em 50px 0.5em 0.7em;
}
.k-tabbed-data.adaptive ul.tabs a.transformed,
.k-tabbed-data.adaptive ul.tabs a.transformed:link,
.k-tabbed-data.adaptive ul.tabs a.transformed:visited {
position: absolute;
width: 100%;
top: 0;
left: 0;
opacity: 0;
z-index: 0;
}
.k-tabbed-data.adaptive ul.tabs a.transformed.active,
.k-tabbed-data.adaptive ul.tabs a.transformed.active:link,
.k-tabbed-data.adaptive ul.tabs a.transformed.active:visited {
background-image: url(../img/k-theme0/nav-control.svg);
background-position: right 2px;
background-repeat: no-repeat;
background-size: 32px;
opacity: 1;
z-index: 100
}
.k-tabbed-data.adaptive ul.tabs a:hover,
.k-tabbed-data.adaptive ul.tabs a:focus {
color: #FFF;
background-color: #A40800;
border-color: #A40800;
}
(function($){
'use strict';
$(document).ready(function(){
if (jQuery.fn.kTabs) {
jQuery('.k-tabbed-data').kTabs();
}
});
})(jQuery);
In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:
Here is a very simple integration of the tabs widget. It's actually a mixin nammed "kawwa/tabs" you can apply on an "any" component. You can use the "options" parameter to pass a JSON object when initializing the tabs in order to customize the behaviour. See the official documentation to see what options you can use.
Example :
<div t:type="any" t:mixins="kawwa/tabs" class="k-tabbed-data" tabs.options="{selected: 3}">
...
</div>
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"
xmlns:p="tapestry:parameter">
<body>
<div t:type="any" t:mixins="kawwa2/tabs" class="k-tabbed-data">
<ul class="tabs">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="tab1" class="content">
<p><strong>Content for Tab 1</strong>!</p>
</div>
<div id="tab2" class="content">
<p><strong>Content for Tab 2</strong> !</p>
</div>
<div id="tab3" class="content">
<p><strong>Content for Tab 3</strong>!</p>
</div>
</div>
</body>
</html>