jQuery UI: Tabs Widget


jQuery UI Tabs Widget Tutorial. Tabs is popular technique to show many content in limited area. The UI tabs widget is used to toggle visibility across a set of different elements. Each element containing content that can be accessed by clicking on its heading with appears as an individual tab.

The tabs are structured so that they line up next to each other, whereas the content sections are layered on top of each other, with only the top one visible. Clicking a tab will highlight the tab and bring its associated content panel to the top of the stack. Only one content panel can be open at a time

jQuery UI Tabs Widget Structure Tutorial

The tabs must be created from a list element (ordered or unordered) and each list item must contain an element. Each link will need to have a corresponding element with a specified id that it is associated with the link's href attribute.

<div id="myTabs">
	<ul>
	<li><a href="#a">Tab 1</a></li>
	<li><a href="#b">Tab 2</a></li>
	</ul>
	<div id="a">This is the content panel linked to the first tab,
	it is shown by default.</div>
	<div id="b">This content is linked to the second tab and will
	be shown when its tab is clicked.</div>
</div>

The following script and CSS resources are needed for the default tab widget instantiation

  • ui.all.css
  • jquery-1.4.2.js
  • jquery.widget.js
  • jquery.tabs.js

Complete code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Tabs Example 1</title>
<link rel="stylesheet" type="text/css" href="development-bundle/themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="development-bundle/jquery-1.4.2.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.tabs.js"></script>
<script type="text/javascript">
	$(function(){
		$("#myTabs").tabs();		
	});
</script>
</head>
<body>
<div id="myTabs">
	<ul>
	<li><a href="#a">Tab 1</a></li>
	<li><a href="#b">Tab 2</a></li>
	</ul>
	<div id="a">This is the content panel linked to the first tab,
	it is shown by default.</div>
	<div id="b">This content is linked to the second tab and will
	be shown when its tab is clicked.</div>
</div>
</body>
</html>
jQuery UI Creating Tabs Widget Tutorial



Bookmark and Share Tag: jQuery, JavaScript, JavaScript Framework, User Interface Category: JavaScript Post : September 16th 2010 Read: 33,860

advertisements


blog comments powered by Disqus