Step 1: Creating the Page Template
In the index.html, we have a tab header block and tab contents block, in the
li tags with the attribute of id tabHeader_1, tabHeader_2 tabHeader_3 Which holds the trigger of jQuery onclick event, and the contents block are display in to block, the li id tabHeader_1 we set to active for the default active tab.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Creating a Simple Tab with jQuery | istockphp.com</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
<script type="text/javascript" src="script.js"> </script>
</head>
<body>
<div id="wrapper"> <!--wrapper start-->
<div id="tabContainer"> <!--tabContainer start-->
<div class="tabs">
<ul>
<li id="tabHeader_1" class="active_tab">Tab 1</li>
<li id="tabHeader_2">Tab 2</li>
<li id="tabHeader_3">Register</li>
</ul>
</div> <!--tabs end-->
<div class="tabscontent">
<div class="tabpage" id="tabpage_1">
<h2>Tab 1</h2>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
</div>
<div class="tabpage" id="tabpage_2">
<h2>Tab 2</h2>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
</div>
<div class="tabpage" id="tabpage_3">
<h2>Register</h2>
<form>
<p><label>Name</label> <input name="name" type="text" size="25" /></p>
<p><label>Password</label> <input name="password" type="password" size="25" /></p>
<p><label>Re Password</label> <input name="repassword" type="password" size="25" /></p>
<p><input name="submit" type="button" value="Submit"/></p>
</form>
</div>
</div> <!--tabscontent end-->
</div> <!--tabContainer end-->
</div> <!--wrapper end-->
</body>
</html>
In css in line 45 we set the first tab to active and line 56 we set the first tab page to block.
style.css
body {
background: #CCC;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
padding:0;
margin:0
}
h2{
margin-bottom:10px;
}
div#wrapper{
width:720px;
margin:40px auto 0;
}
div#tabContainer {
width:700px;
padding:15px;
background-color:#2e2e2e;
border-radius: 4px;
}
div.tabs {
height: 36px;
}
div.tabs ul {
font-size: 18px;
list-style: none outside none;
margin:0;
padding:0
}
div.tabs ul li {
background: none repeat scroll 0 0 #666666;
border-radius: 8px 8px 0 0;
color: #FFFFFF;
display: block;
float: left;
margin: 0 2px 0 0;
padding: 7px 10px;
}
div.tabs ul li:hover{
background: #FFFFFF;
cursor:pointer;
color: #333;
}
div.tabs ul li.active_tab {
background: #FFFFFF;
cursor:pointer;
color: #333;
}
.tabscontent {
padding:10px 10px 25px;
background: #FFFFFF; /* old browsers */
margin:0;
color:#333;
}
div.tabpage:first-child {
display:block
}
div.tabpage {
display:none
}
form label {
display: block;
float: left;
width: 90px;
}
Step 2: jQuery Script
In the script, we count the the li element
tabHeader and loop, and every click the li element we apply the jQuery remove class and add class, to remove the active elements in first load of the page and add class it self.
script.js
/* http://istockphp.com */
$(function() {
var tabs = $('div.tabs ul li').length; // count the tab
for(var i = 0; i < tabs + 1; i++) {
$('li#tabHeader_'+ i ).click(function() {
$('li.active_tab').removeClass('active_tab'); // remove class
$(this).addClass('active_tab'); // addClass to tab
var tab_id = $(this).attr('id'); // return: tabHeader_1
var id = tab_id.split("_")[1]; //
var tabpage_id = $('div#tabpage_'+id).attr('id'); // return: tabpage_1
var get_id = tabpage_id.split("_")[1]; // return: 1
$('div.tabpage').css('display', 'none');
$('div.tabscontent div#tabpage_'+ get_id).css('display', 'block');
//if(tabpage_id == 'tabpage_3'){
// ajax here, if the data from database
//}
});
}
});
Step 3: Done
And now we created hard coded simple tab with jQuery, without using the third party plugins, and we sure this tabs are tested all modern browser and internet explorer 7 and 8, Let’s have a look at what we’ve achieved:
- We set the template with default view.
- We creating the tab without using third party plugin tab.
- Tested all modern browsers, including IE 7 and 8
No comments:
Post a Comment