KAWWA Markup Pattern Library


Blocks

Tabs Component Information

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

Add to list

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

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!

HTML5 Plain Code

COPY
  1. <div class="k-tabbed-data">
  2. 	<ul class="tabs">
  3. 		<li><a href="#panel0">Tab Name 0</a></li>
  4. 		<li><a href="#panel1">Tab Name 1</a></li>
  5. 		<li><a href="#panel2">Tab Name 2</a></li>
  6. 	</ul>
  7. 	<section id="panel0" class="content">
  8. 		<h3>Title for Section 0</h3>
  9. 		<p><strong>Content for Tab 0</strong>!</p>
  10. 	</section>
  11. 	<section id="panel1" class="content">
  12. 		<h3>Title for Section 1</h3>
  13. 		<p><strong>Content for Tab 1</strong> !</p>
  14. 		<p><a href="#">With a link for keyboard test</a></p>
  15. 	</section>
  16. 	<section id="panel2" class="content">
  17. 		<h3>Title for Section 2</h3>
  18. 		<p><strong>Content for Tab 2</strong>!</p>
  19. 	</section>
  20. </div>
  21. 
                                
  22. 
                                

CSS Code

COPY
  1. .k-tabbed-data {clear: both;}
  2. 
                                
  3. ul.tabs {padding: 0; margin: 0;}
  4. 
                                
  5. 	ul.tabs > li {
  6. 		display: inline-block;
  7. 		list-style-type: none;
  8. 		font-size: 1em;
  9. 		text-transform: uppercase;
  10. 		padding: 0;
  11. 		margin-right: 0.5rem;
  12. 	}
  13. 	ul.tabs a, ul.tabs a:link, ul.tabs a:visited {
  14. 		display: block;
  15. 		text-decoration: none;
  16. 		color: #000;
  17. 		background: #FFF;
  18. 		padding: 0.5em 1em;
  19. 		border: 1px solid gray;
  20. 		border-bottom: none
  21. 	}
  22. 	ul.tabs a:hover, ul.tabs a:focus {
  23. 		color: #FFF;
  24. 		background: #A40800;
  25. 	}
  26. 
                                
  27. 	/* Active tab*/
  28. 	ul.tabs a.active, ul.tabs a.active:link, ul.tabs a.active:visited {
  29. 		color: #FFF;
  30. 		background: #000;
  31. 		border: 1px solid #000;
  32. 	}
  33. 	ul.tabs a.active:hover, ul.tabs a.active:focus {
  34. 		color: #FFF;
  35. 		background: #A40800;
  36. 		border-color: #A40800;
  37. 	}
  38. 
                                
  39. 	/* Disabled tab */
  40. 	ul.tabs a.off, ul.tabs a.off:link, ul.tabs a.off:visited {
  41. 		color: #CCC;
  42. 		background: #FFF;
  43. 		border: 1px solid #CCC;
  44. 	}
  45. 	ul.tabs a.off:focus {
  46. 		color: #CCC;
  47. 		background: #FFF;
  48. 	}
  49. 	ul.tabs strong.off {
  50. 		display: block;
  51. 		font-weight: normal;
  52. 		text-decoration: none;
  53. 		color: #ccc;
  54. 		background: #FFF;
  55. 		padding: 0.5em 1em;
  56. 		border: 1px solid #CCC;
  57. 		border-bottom: none;
  58. 	}
  59. 
                                
  60. /* Content block */
  61. 
                                
  62. .k-tabbed-data > .content {
  63. 	clear: both;
  64. 	overflow: auto;
  65. 	color: #000;
  66. 	background: #FFF;
  67. 	padding: 1rem;
  68. 	margin-bottom: 2em;
  69. 	border: 1px solid #000;
  70. }
  71. 
                                
  72. /* Small view - when tabs don't fit anymore */
  73. 
                                
  74. .k-tabbed-data.adaptive {position: relative;}
  75. .k-tabbed-data.adaptive ul.tabs {clear: both;}
  76. 
                                
  77. .k-tabbed-data.adaptive ul.tabs > li {
  78. 	display: block;
  79. 	margin: 0;
  80. }
  81. 
                                
  82. .k-tabbed-data.adaptive ul.tabs a, .k-tabbed-data.adaptive ul.tabs a:link, .k-tabbed-data.adaptive ul.tabs a:visited {
  83. 	-moz-box-sizing: border-box;
  84. 	-ms-box-sizing: border-box;
  85. 	-o-box-sizing: border-box;
  86. 	-webkit-box-sizing: border-box;
  87. 	box-sizing: border-box;
  88. 	color: #FFF;
  89. 	background-color: #000;
  90. 	padding: 0.5em 50px 0.5em 0.7em;
  91. }
  92. 
                                
  93. .k-tabbed-data.adaptive ul.tabs a.transformed,
  94. .k-tabbed-data.adaptive ul.tabs a.transformed:link,
  95. .k-tabbed-data.adaptive ul.tabs a.transformed:visited {
  96. 	position: absolute;
  97. 	width: 100%;
  98. 	top: 0;
  99. 	left: 0;
  100. 	opacity: 0;
  101. 	z-index: 0;
  102. }
  103. .k-tabbed-data.adaptive ul.tabs a.transformed.active,
  104. .k-tabbed-data.adaptive ul.tabs a.transformed.active:link,
  105. .k-tabbed-data.adaptive ul.tabs a.transformed.active:visited {
  106. 	background-image: url(../img/k-theme0/nav-control.svg);
  107. 	background-position: right 2px;
  108. 	background-repeat: no-repeat;
  109. 	background-size: 32px;
  110. 	opacity: 1;
  111. 	z-index: 100
  112. }
  113. .k-tabbed-data.adaptive ul.tabs a:hover,
  114. .k-tabbed-data.adaptive ul.tabs a:focus {
  115. 	color: #FFF;
  116. 	background-color: #A40800;
  117. 	border-color: #A40800;
  118. }
  119. 
                                

How to apply

COPY
  1. (function($){
  2. 	'use strict';
  3. 
                                
  4. 	$(document).ready(function(){
  5. 		if (jQuery.fn.kTabs) {
  6. 			jQuery('.k-tabbed-data').kTabs();
  7. 		}
  8. 	});
  9. })(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
  1. <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" 
  2. 	xmlns:p="tapestry:parameter">
  3. <body>
  4. 	<div t:type="any"  t:mixins="kawwa2/tabs"  class="k-tabbed-data">
  5. 		<ul class="tabs">
  6. 			<li><a href="#tab1">Tab 1</a></li>
  7. 			<li><a href="#tab2">Tab 2</a></li>
  8. 			<li><a href="#tab3">Tab 3</a></li>
  9. 		</ul>
  10. 		<div id="tab1" class="content">
  11. 			<p><strong>Content for Tab 1</strong>!</p>
  12. 		</div>
  13. 		<div id="tab2" class="content">
  14. 			<p><strong>Content for Tab 2</strong> !</p>
  15. 		</div>
  16. 		<div id="tab3" class="content">
  17. 			<p><strong>Content for Tab 3</strong>!</p>
  18. 		</div>
  19. 	</div>
  20. </body>
  21. </html>

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce