UI Patterns → Tabs

Tab Interface

Christopher Columbus

Italian navigator, colonizer and explorer whose voyages led to general European awareness of the American continents.

Isaac Newton

English physicist, mathematician, astronomer, natural philosopher, alchemist, and theologian. His law of universal gravitation and three laws of motion laid the groundwork for classical mechanics.

Johannes Gutenberg

German printer who invented the mechanical printing press.

Pattern and Usage

The tabbed functionality seen above is a key mechanism for organizing content. This approach is seen throughout the DotNetNuke administrative interface, and is intended to be used similarly in custom module development. However, this pattern can also be used just as easily outside of an administrative experience.

The tabs are implemented using JavaScript, more specifically a jQuery plugin. First you will organize your content into logical regions, and then it can be turned into tabs. View the markup, css, and jQuery above to see how it is done.

For more technical information, please visit the dnnTabs Wiki entry for this plugin.

<div class="dnnForm" id="tabs-demo"> <ul class="dnnAdminTabNav"> <li><a href="#ChristopherColumbus">Christopher Columbus</a></li> <li><a href="#IsaacNewton">Isaac Newton</a></li> <li><a href="#JohannesGutenberg">Johannes Gutenberg</a></li> </ul> <div id="ChristopherColumbus" class="dnnClear"> <img src="<%=ResolveUrl("Images/498px-Christopher_Columbus.PNG") %>" alt="Christopher Columbus" width="32%" class="dnnLeft" /> <div class="dnnRight" style="width:62%;margin-left:2%"> <h1>Christopher Columbus</h1> <p>Italian navigator, colonizer and explorer whose voyages led to general European awareness of the American continents.</p> </div> </div> <div id="IsaacNewton" class="dnnClear"> <img src="<%=ResolveUrl("Images/GodfreyKneller-IsaacNewton-1689.jpg") %>" alt="Isaac Newton" width="32%" class="dnnLeft" /> <div class="dnnRight" style="width:62%;margin-left:2%"> <h1>Isaac Newton</h1> <p>English physicist, mathematician, astronomer, natural philosopher, alchemist, and theologian. His law of universal gravitation and three laws of motion laid the groundwork for classical mechanics.</p> </div> </div> <div id="JohannesGutenberg" class="dnnClear"> <img src="<%=ResolveUrl("Images/Gutenberg.jpg") %>" alt="Johannes Gutenberg" width="32%" class="dnnLeft" /> <div class="dnnRight" style="width:62%;margin-left:2%"> <h1>Johannes Gutenberg</h1> <p>German printer who invented the mechanical printing press.</p> </div> </div> </div>

.dnnForm .ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ .dnnForm .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } .dnnForm .ui-tabs .ui-tabs-nav li, ul.dnnAdminTabNav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; } .dnnForm .ui-tabs .ui-tabs-nav li a, ul.dnnAdminTabNav li a { float: left; padding: .5em 1em; text-decoration: none; font-weight: bold; color: #fff; text-decoration: none; display: block; margin: 0; letter-spacing: -0.03em; background: #818181; background: -moz-linear-gradient(top, #818181 0%, #656565 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#818181), color-stop(100%,#656565)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#818181', endColorstr='#656565',GradientType=0 ); -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; text-shadow: 0px 1px 1px #000; } .dnnForm .ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; } .dnnForm .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .dnnForm .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .dnnForm .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } .dnnForm .ui-tabs .ui-tabs-nav li a, .dnnForm .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ .dnnForm .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } .dnnForm .ui-tabs-panel { position: relative; } .dnnForm .ui-tabs-hide { display: none !important; }