How to Create Custom AJAX Tabs using jQuery. Download Source Code.

How to Create Custom AJAX Tabs using jQuery

Tags: Ajax, beginner's guide, jQuery, tabs, Tutorial

Today’s morning started a little hot here at ajaxBlender. We had some free time before starting the production meeting, and Mike (our lead developer guy) and Justin (newbie who joined us in November) started arguing about their respective abilities of creating cross-browser markup code (HTML, CSS, JS) by hand without mistakes, but also doing it really fast.The exchange went a little like this:

J: I am sure, there is no way you can create scripts from scratch fast. First thing is you integrate the 3rd party stuff. This is easy but when you have to create your custom code, it will require time for debugging, planning the structure, etc – even for small scripts.

M: Ha, do you want to try me? ;) You select a script and I do it. If I do it you owe me a pizza and make me coffee each morning for a week, otherwise I will for you.

J: Hm.. Sounds good. What about ajax tabs?

M: No problem :) How much time?

J: 10 minutes?

M: Great!

As you see, resolution to the matter involved a little fun and a wager (pizza).

Experience took its part – Justin lost. We recorded the process for proof ;) and now we’re posting it with a quick tutorial. You can watch Mike “cook” the code in the time-lapse YouTube video below, and you can download his AJAX tabs here.

That’s it ;) Click the Demo button to see it in action.

Here’s the code he created:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Tabs Demo</title>
     <link rel="stylesheet" href="./main.css" />
     <script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
     <script type="text/javascript" src="./main.js"></script>
</head>
<body>
     <div id="page">
          <ul id="tabs">
               <li><a href="./tabs/tab-1.html">Tab 1</a></li>
               <li><a href="./tabs/tab-2.html">Tab 2</a></li>
               <li><a href="./tabs/tab-3.html">Tab 3</a></li>
          </ul>
          <div id="tabs-container">
               Loading. Please Wait...
          </div>
</div>
</body>
</html>

CSS

BODY {
     margin: 20px;
     padding: 20px;
     font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #333333;
}
#page {
     margin: auto;
     width: 1000px;
}
UL.mytabs {
     position: relative;
     z-index: 2;
}
UL.mytabs, UL.mytabs LI {
     margin: 0;
     padding: 0;
     list-style: none;
     float: left;
}
UL.mytabs LI { padding: 0 5px; }
UL.mytabs LI A {
     float: left;
     padding: 7px;
     border: 1px solid #CCCCCC;
     border-bottom: 1px solid #E0E0E0;
     background: #F0F0F0;
     text-decoration: none;
     color: #333333;
     height: 22px;
}
UL.mytabs LI A:HOVER, UL.mytabs LI.current A {
     background: #FFFFFF;
}
UL.mytabs LI.current A {
     font-weight: bold;
     font-size: 14px;
     border-bottom: 1px solid #FFFFFF;
}
.mytabs-container {
     position: relative;
     z-index: 1;
     clear: both;
     border: 1px solid #E0E0E0;
     padding: 10px;
     top: -1px;
}

JavaScript


var containerId = '#tabs-container';

var tabsId = '#tabs';
$(document).ready(function(){
     // Preload tab on page load
     if($(tabsId + ' LI.current A').length > 0){
          loadTab($(tabsId + ' LI.current A'));
     }
     $(tabsId + ' A').click(function(){
          if($(this).parent().hasClass('current')){ return >false; }
          $(tabsId + ' LI.current').removeClass('current');
          $(this).parent().addClass('current');
          loadTab($(this));
          return >false;
     });
});
function loadTab(tabObj){
     if(!tabObj || !tabObj.length){ return; }
     $(containerId).addClass('loading');
     $(containerId).fadeOut('fast');
     $(containerId).load(tabObj.attr('href'), function(){
          $(containerId).removeClass('loading');
          $(containerId).fadeIn('fast');
     });
}

View Demo

Leave a Comment

Andreas

November 14, 2009

GREAT!!! really fast. very good work. You are great man, go on!

Davide

December 4, 2009

thanks, that was very useful. You rock!

Brad

December 5, 2009

Can you target the tabs?

ajaxBlender.com

December 7, 2009

Thanks for your question, but I’m not sure I understand it fully. I assume you are not wanting to link them to a new target, as this would not technically require AJAX (or even be AJAX).

Are you asking if the content on the AJAX tabs can be crawled by the search engines? If so, then yes. The code for the AJAX tabs is SEO friendly, as it is built using unordered lists and with links to the tabs. All search engines will crawl and index the content of each tab. If this is not what you are asking, please clarify and we will try to help. Thanks!

Joshua Sortino

December 16, 2009

You guys should start “The National Speed Coding League” (NSCL) and advertise on ESPN (with all their channels, maybe they’ll cater one for the geeks.)

Alex.f

January 26, 2010

Hey, nice script there. I got a problem using it with Google Chrome though, the content within the tabs will look really weird, it works fine in other browser though…

http://www.sundsvallsolutions.se/index2.html

Darren – ajaxBlender

January 26, 2010

Alex.f, I see that the HTML files you’re trying to embed (i.e. http://www.sundsvallsolutions.se/foretag2.html) have <html><body> tags in them. This is not needed for the implementation of the tabs. You should leave <div id=”container1″>…</div> in the file only. This should fix it. Let us know, if not. Thanks!

Alex.f

January 26, 2010

That did the job, thank you very much for this excellent script and the help!

Brian

February 1, 2010

Very nice but if I replace the .html pages with ColdFusion pages (ie tab-1.html replaced with tab-1.cfm), the pages will not display. Must the linked pages be in .html format?

Darren – ajaxBlender

February 3, 2010

Brian, the extension type should not matter. It should work fine with .cfm. If you could provide us with the link to view the implementation, we will try to help fix the problem. Thanks!

Darren

February 5, 2010

Darren -

Thanks for the reply. Shortly after I posted the message, I found that it did work fine with other browsers such as FireFox and Chrome but not IE 7. I don’t have this on the web, just testing on a development server. If I can get it working on the dev server, it will then be moved to prod.

Thanks for the reply.