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
{code type=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>
{/code}
CSS
{code type=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;
}
{/code}
JavaScript
{code type=php}
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’);
});
}
{/code}
Clik here to view.