Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe AIR

  • Print
  • + Share This
From the author of

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

  • + Share This
  • 🔖 Save To Your Account