Time for action — creating simple tabs

  1. We'll get started with our basic HTML file and associated folders, like we created in Chapter 1, Designer, Meet jQuery. Inside the<body> tag, we'll start by setting up our simple example that will work even for users with JavaScript disabled: we'll put a list of anchor links to different areas of the page at the top, then wrap each of our content sections in a div with an id as follows:
    <h1>Simple Tabs Product</h1>
<p>You should buy this, it's great!</p>
<ul>
<li><a href="#description">Description</a></li>
<li><a href="#photos">Photos</a></li>
<li><a href="#details">Details</a></li>
<li><a href="#reviews">Customer Reviews</a></li>
<li><a href="#related">Related Items</a></li>
</ul>
<div id="description">
<h2>Overview</h2>
<p>This section contains a basic overview of our product.</p>
</div>
<div id="photos">
<h2>Photos</h2>
<p>This section contains additional photos of our product.</p>
</div>
<div id="details">
<h2>Details</h2>
<p>This is where we list out all the details of our product—size, weight, color, materials, etc.</p>
</div>
<div id="reviews">
<h2>Customer Reviews</h2>
<p>Here's where we would list all of the glowing reviews our customers had written</p>
</div>
<div id="related">
<h2>Related Items</h2>
<p>And here we would list out other super items that our customers might also like to buy.</p>
</div>

    If we view this HTML in a browser, we'll see a list of links at the top of the page that when clicked, jump down the page to the appropriate section so that the site visitor can easily find each section without scrolling on their own. We've basically created a clickable table of contents for our page.

  2. Now we want to enhance this for our site visitors that have JavaScript enabled. We'll start by adding an id to the<ul> that contains our table of contents and we'll add a class name to each of the<div>s that contain our sections of content — this will make it easier for us to select just the pieces of the page we want with jQuery and will also make it easier for us to style our tabs with CSS.
    <ul id="tabs">
<li><a href="#description">Description</a></li>
<li><a href="#photos">Photos</a></li>
<li><a href="#details">Details</a></li>
<li><a href="#reviews">Customer Reviews</a></li>
<li><a href="#related">Related Items</a></li>
</ul>
<div id="description" class="tab-section">
<h2>Overview</h2>
<p>This section contains a basic overview of our product.</p>
</div>
<div id="photos" class="tab-section">
<h2>Photos</h2>
<p>This section contains additional photos of our product.</p>
</div>
<div id="details" class="tab-section">
<h2>Details</h2>
<p>This is where we list out all the details of our product—size, weight, color, materials, etc.</p>
</div>
<div id="reviews" class="tab-section">
<h2>Customer Reviews</h2>
<p>Here's where we would list all of the glowing reviews our customers had written</p>
</div>
<div id="related" class="tab-section">
<h2>Related Items</h2>
<p>And here we would list out other super items that our customers might also like to buy.</p>
</div>
  3. Next, we'll use jQuery to hide all of our tab-sections. Open up the scripts.js file inside your scripts folder and inside the document ready statement, select the tab-sections and hide them:
    $(document).ready(function(){
$('.tab-section').hide();
});

    Now when we load the page, we'll only see our table of contents.

  4. Next, we need to show the appropriate section when one of our tabs is clicked. We'll start by binding a function to the click event of the links inside our table of contents — just like we did when we opened a link in a new window:
    $(document).ready(function(){
$('.tab-section').hide();
$('#tabs a').bind('click', function(e){
e.preventDefault;
});
});

    With this bit of code, we've selected all of the links inside the <ul> with the id of #tabs and bound a function to the links on click. So far, all this function does is cancel the click — if you load the page in a browser at this point, you'll see that clicking on the links does nothing — the page no longer jumps down to the associated section.

  5. Next, we want to select the appropriate section and show it. To do that, we'll use the hash — or the part of the href attribute that includes the # symbol.
    $('#tabs a').bind('click', function(e){
$(this.hash).show();
e.preventDefault;
});

    When I pass this.hash to the jQuery function, the this I'm dealing with is the link that was just clicked and this.hash is the value of the href attribute starting with the # symbol and continuing to the end. If I were to click on the overview tab, for example, passing this.hash to the jQuery function is the same as writing the following: 

    $('#overview')

    But of course, this is done in a much more flexible way — it will work for any tab linked to any section of the page. So, for example, if I wanted to replace the customer reviews tab with a shipping information tab, I wouldn't have to update my JavaScript, only the HTML markup itself — the JavaScript is flexible enough to adjust to changes.

  6. So now when I click on one of the table of contents links, it will show me the associated section, but if I keep clicking on links, the sections just keep showing up, and after clicking all the links, all the sections are visible — that's not what we want. We'll have to hide the visible section and show only the section we want. Let's add a line to our code to select the visible tab-section and hide it before we show the new section:
    $('#tabs a').bind('click', function(e){
$('.tab-section:visible').hide();
$(this.hash).show();
e.preventDefault;
});

    You're probably familiar with pseudoclass selectors in CSS — they're often used to select the hover, visited, and active states of links (a:hover, a:visited, and a:active). jQuery makes a few additional pseudoclass selectors available to us there are pseudoclass selectors for buttons, empty elements, disabled form fields, checkboxes, and more. You can check out all the available selectors for jQuery in the jQuery documentation at http://api.jquery.com/category/selectors/. Here, we're using the :visible pseudoclass to select the .tab-section that's currently visible. Once we've selected the visible .tab-section, we hide it and then find the correct tab-section and show it.

  7. All we need now is some CSS to get our tabs styles to look like a tabbed section of content. Open the styles.css file that's inside your styles folder, and add some CSS styles as follows. Feel free to customize them to suit your own taste.
    #tabs {
overflow: hidden;
zoom: 1;
}
#tabs li {
display: block;
list-style: none;
margin: 0;
padding: 0;
float: left;
}
#tabs li a {
display: block;
padding: 2px 5px;
border: 2px solid #ccc;
border-bottom: 0 none;
text-align: center;
}
.tab-section {
padding: 10px;
border: 2px solid #ccc;
}
  8. Now if you load this up in a browser, you'll see that there's a little something missing — we should highlight the currently selected tab to make it obvious which one is selected. We can do that by adding a CSS class to the current tab. Go back to your scripts.js file and add a bit of code to add a class to the current tab and remove the class from any non-current tabs as follows:
    $('#tabs a').bind('click', function(e){
$('#tabs a.current').removeClass('current'),
$('.tab-section:visible').hide();
$(this.hash).show();
$(this).addClass('current'),
e.preventDefault;
});

    First, we'll find the tab that has the class current, and remove that class. Then we'll get the tab that was just clicked and add the current class to it. That way, we make sure that only one tab will be marked as the current tab at any given time.

  9. Next, we'll add some styles in our CSS for our new class. Open up styles.css and add a bit of code to distinguish the currently selected tab. Again, feel free to customize this style to suit your own tastes:
    #tabs li a.current {
background: #fff;
color: #000;
}
  10. So now our tabs are working the way we expect, and the only thing left to do is to make the first tab active and show the first content section when the page is first loaded instead of leaving them all hidden. We've already written the function to do this, so now all we have to do is call it for our first tab:
    $('#tabs a').bind('click', function(e){
$('#tabs a.current').removeClass('current'),
$('.tab-section:visible').hide();
$(this.hash).show();
$(this).addClass('current'),
e.preventDefault;
}).filter(':first').click();

    The jQuery object's filter() method will allow us to filter a previously selected set of elements — in this case we're dealing with all of the <a> tags inside the <ul> with the id #tabs. We bind a click function to all of those links, then we'll filter out just the first link using the :first pseudoclass made available to us — in jQuery and tell jQuery to click the first tab for us this will run our function, adding the current class to the first link, and showing the first .tab-section — just the way we would expect the page to look when we load it.

    Time for action — creating simple tabs

What just happened?

We set up a set of simple tabs with jQuery. For site visitors with JavaScript disabled, the tabs will function like a table of contents at the top of the document, jumping them down to the various sections of content when they're clicked. For site visitors with JavaScript, though, the sections of content will be completely hidden until needed. Clicking on each tab reveals the content associated with that tab. This is a great way to save space in a UI — making all the content available on demand in a small space.

We hid the tab contents with JavaScript instead of with CSS to be sure that users without JavaScript enabled would still be able to access all of our content.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.218.156.35