[ KAWWA PORTAL ] Components : Tabs

Blocks

Tabs

Class name: (k-tabbed-data)
Version: 1.2
jQuery Interactive feature
Tapestry Integration

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:

tabbed structures should be used to alternate between views within the same context (the user can easily identify a distinct group of content)
tabs are a parellel navigation in nature (the content of each tab share a same level of content type)
tab labels should be short, so they can be easily scannable
as to any other form of navigation, avoid having too much tab entries (a maximum of nine tabs would be acceptable)

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

Demo
Snippets
Tapestry Integration

Tab Name 0
Tab Name 1
Tab Name 2

Title for Section 0

Content for Tab 0!

Title for Section 1

Content for Tab 1 !

With a link for keyboard test

Title for Section 2

Content for Tab 2!

CSS Code

COPY

```
.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;
```
```
}
```

How to apply

COPY

```
(function($){
```
```
	'use strict';
```
```
	$(document).ready(function(){
```
```
		if (jQuery.fn.kTabs) {
```
```
			jQuery('.k-tabbed-data').kTabs();
```
```
		}
```
```
	});
```
```
})(jQuery);
```

IE Backward Compatibility

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:

Simple Tapestry Integration

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>

The Template

COPY

<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>
```

Top

KAWWA Markup Pattern Library

Blocks

Tabs

Title for Section 0

Title for Section 1

Title for Section 2

HTML5 Plain Code

CSS Code

How to apply

IE Backward Compatibility

Simple Tapestry Integration

The Template

Download List (0)

Dependencies:

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce