.net technique jquery
jQuery build a jQ notched tab system ial CD Your essent ’ll require All the files you al can be for this tutori issue’s CD. found on this
Ben Bodien and Marc Roberts, co-founders of Neutron Creations, explain how to build a simple, semantically clean and extensible jQuery tab system Knowledge needed Basic jQuery, HTML and CSS Requires Text editor/IDE, graphics application, jQuery + plug-ins Project time Less than one hour To power our tabbed navigation, we’ll be using and then extending the jQuery Tools plug-in, which makes setting up tabs (and a number of other useful interaction design patterns) incredibly easy. To start with, we’ll lay out some basic markup for our navigation: <nav> <ul id="tabs"> <li><a class="current" href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> </nav> We’ve created an unordered list of anchors, with an id of tabs so we can directly target it with jQuery. We’ve also wrapped the list in an HTML5 nav element. This adds some semantic structure to our document, and potentially aids assistive technologies in providing a better user experience. We’ve also added a class of current to the first tab. The Tabs plug-in will move this class automatically between the anchors, and we can use this to emphasise the current anchor with CSS. We’ll then need to create the structure to hold the content that we’ll be switching between using the tabs: <div id="content"> <section>First section</section> <section>Second section</section> ... <section>Fifth and final section</section> </div> Here we have five section elements (another HTML5 tag) wrapped in a division identified as our content. We need one section for each navigation item we created earlier. We don’t need to do anything to connect the links to the sections, because the jQuery Tools plug-in will map them for us based on their order. Note: In the demo code on the CD, we’ve replaced the text in each section with snippets of Einstein’s Relativity: The Special and General Theory, just to fill it out a bit. We’ve also used paragraph tags to mark the text up. Now let’s style what we’ve put together so far into a horizontal row of links (see below):
Links styled Having divided our content into five sections, we’ve created and styled up a horizontal row of links
80
.net october 2010
Expert tip Setting the initial position A neat trick for determining the appropriate starting left value for your indicator is to complete the tutorial code, then load it in your web browser. Inspect the indicator element and see what left value has been set on the element’s inline style by the jQuery code. You can then use the same value in your CSS to avoid the indicator jumping if your jQuery takes a moment to download and execute.
nav { margin-bottom: 30px; } nav ul { overflow: hidden; padding-bottom: 10px; border-bottom: 5px solid #bbb; } nav li { float: left; margin-right: 35px; } nav li a { color: #666; font-weight: bold; } nav li a:hover, nav li a:focus, nav li a.current { color: #000; }
A sprinkling of style
At the end here, we’re setting hover and focus styles for our links, and also applying the same black colour treatment to links that have a class of current. Before we can get started on making our tabs work, we need to hide the sections of our content so that the Tabs plug-in can control which section is currently visible: #content section { display: none; }
The JavaScript
Now we’re all set with our basic markup and CSS, but before we can dive into writing our jQuery, we’ll need to bring in some libraries to give us the tools we need: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.tools.min.js"></script>
Indicator added We’ve positioned our notched indicator below our navigation. Next, we need to make it slide along to point to the selected item