- Basic jQuery Syntax Usage
- jQuery Core Capabilities
- Extending jQuery to Create Tabs
- Using Ajax to Fetch XML Data
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Extending jQuery to Create Tabs
The jQuery framework is reasonably capable, but it's also ingenious enough to be extended via plug-ins. To create tabs, I used the jQuery plug-in Tabs from http://stilbuero.de/tabs/. To use it, include the plug-in's JavaScript and CSS files in the HTML page:
<script src="js/jquery.tabs.min.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="assets/jquery.tabs.css" type="text/css" media="print, projection, screen">
Next, within the HTML body, I created a DIV with a meaningful id value of content. Within the DIV I added an unordered list, with one list element for each tab. Each list item is also a link to a DIV to follow, where the actual content for that tab is found. It begins like so:
<div id="content">
<ul>
<li><a href="#home"><span>Home</span></a></li>
<li><a href="#flotsam"><span>Flotsam</span></a></li>
<li><a href="#jetsam"><span>Jetsam</span></a></li>
<li><a href="#foofarah"><span>Foofarah</span></a></li>
</ul>
<div id="home">
This is the initial content. It's very exciting stuff.
</div>
<div id="flotsam">
Once the HTML that defines the content has been added, the tabs are created by selecting the content DIV and applying the tabs() method to it:
$('#content').tabs();
Of course, that line of code is executed within the main setup function (again, see the downloaded code for clarification).