University of Minnesota Extension
/
612-624-1222
Menu Menu

Extension > Template documentation > Web style guide > Folder tabs

Folder tabs

Folder tabs are useful when you have a lot of information that you want to display concisely in a horizontal tab structure. The new version of our tabs come with back-button history support and linking/loading a specific tab. Before you implement tabs on your pages please take a moment to view the tab usability guidelines at useit.com.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis accumsan ipsum eget pharetra. Suspendisse non lorem dolor, quis venenatis metus. Nulla blandit pulvinar venenatis. Morbi lacinia tempor lectus vel mattis. Aliquam et dui nibh, et blandit arcu. Vivamus iaculis, erat vel condimentum sodales, ipsum mauris varius ligula, vitae euismod turpis eros vel enim. Proin eu tellus quis ante adipiscing rhoncus non quis sem. Nullam vitae laoreet diam. Phasellus sodales cursus porta. Suspendisse faucibus pellentesque orci, eget porttitor tellus consectetur et. Proin sagittis interdum nibh sit amet molestie. Donec rhoncus tempor libero sit amet scelerisque. Nullam aliquet felis et diam pharetra id ultrices est pellentesque. Aenean condimentum bibendum mi sed malesuada. Sed posuere, lectus tempor laoreet tristique, dui risus varius tellus, eu posuere leo arcu ac neque. Etiam gravida viverra metus, sit amet commodo urna ultricies quis. Proin scelerisque consequat ante, eu pretium felis scelerisque non.

Aenean arcu leo, iaculis vel consectetur eget, auctor et dolor. Nullam condimentum quam sit amet velit cursus sit amet aliquet augue imperdiet. Phasellus nec nisl non leo lobortis semper vitae nec justo. Pellentesque nisi enim, mattis at molestie nec, feugiat eu quam. Nam diam quam, bibendum at viverra nec, facilisis at augue. Donec ac arcu magna. Phasellus porta justo non enim pharetra quis fermentum metus sodales. Pellentesque feugiat mi id magna feugiat vitae tristique augue vehicula. In vitae eros quis metus molestie suscipit. Curabitur leo purus, vulputate sit amet porttitor ultricies, vestibulum et elit. Morbi lacinia metus a elit scelerisque ullamcorper. In aliquam lorem a sapien tempus fermentum. Vestibulum sit amet leo libero. Vestibulum fermentum ornare lacus ut placerat. Pellentesque porta ligula molestie mauris porta at rutrum leo accumsan. Nulla facilisi. Phasellus posuere, arcu ac suscipit dignissim, elit purus luctus lacus, ac faucibus lacus purus ac sapien. Nam sed pretium lorem. Etiam nulla neque, pellentesque eu sollicitudin non, rutrum at nunc. Vivamus volutpat eleifend felis, eu accumsan nibh faucibus vitae.

Etiam et magna sit amet lorem consequat accumsan ac eu velit. Duis laoreet aliquam justo, eu varius nulla adipiscing in. Sed vulputate dapibus purus nec hendrerit. Quisque quis nunc sapien, sed vestibulum mauris. Proin aliquam libero sed dui convallis a dictum elit vestibulum. Sed eros massa, mattis ac pulvinar vitae, blandit sit amet ipsum. Maecenas porta rutrum libero, sed suscipit neque consequat venenatis. Nam blandit quam erat. Nulla non risus nec metus consectetur blandit. Donec ultrices neque et massa dignissim faucibus. Nulla rhoncus, metus et ornare vulputate, elit sapien ornare metus, eu dignissim enim sapien quis felis. Vivamus ac metus non turpis dignissim auctor ut et augue. Ut feugiat, purus a lacinia vehicula, orci erat volutpat sem, a posuere dolor est eu velit.

Basic usage

This example will provide you with tabs that function the way you're used to. No back-button support or loading/linking to a specific tab.

HTML

<ul class="tabs">
	<li><a href="#first-tab">First tab</a></li>
	<li><a href="#second-tab">Second tab</a></li>
	<li><a href="#third-tab">Third tab</a></li>
</ul>
<div class="panes">
	<div class="pane">
		<p>First tab contents.</p>
	</div>
	<div class="pane">
		<p>Second tab contents.</p>
	</div>
	<div class="pane">
		<p>Third tab contents.</p>
	</div>
</div>

JavaScript

This should be placed in the <head> of the document.

<script type="text/javascript">
$(document).ready(function() {
	$("ul.tabs").tabs("div.panes > div.pane");
});
</script>

Back-button history support

This version should be used anytime you anticipate the user clicking on something within a tab, leaving the page and then coming back. It should now remember which tab the user was on. This also enables you to link to specific tabs from other pages by use the hash (#second-tab for example).

HTML

Same as the "Basic usage" example.

JavaScript

This should be placed in the <head> of the document.

<script type="text/javascript">
$(document).ready(function() {
	$("ul.tabs").tabs("div.panes > div.pane", { history: true });
});
</script>

Load a specific tab

This example will display a specific tab when the page loads.

HTML

Same as the "Basic usage" example.

JavaScript

This should be placed in the <head> of the document. InitialIndex: 0 will open the first tab, InitialIndex: 1 will open the second and so forth.

<script type="text/javascript">
$(document).ready(function() {
	$("ul.tabs").tabs("div.panes > div.pane", { initialIndex: 1 });
});
</script>

Sources


  • © 2013 Regents of the University of Minnesota. All rights reserved.
  • The University of Minnesota is an equal opportunity educator and employer. Privacy