I am creating a tab plugin. I want to know if there is a better way of doing this or if what I have is good. It works just fine, but there may be some shortcuts or a more optimized way of accomplishing this. I plan to replace the startTab variable with an options set, but I am not quite there yet. Thanks!
[View the current updated version here][1]
Here is what I have so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul.tabNavigation {
list-style: none;
margin: 0;
padding: 0;
}
ul.tabNavigation li {
display: inline;
}
ul.tabNavigation li a {
text-decoration: none;
color:#000;
}
.tabViews {
width: 100%;
border: #8db2e3 solid 1px;
clear:both;
height:18px;
margin-top: -12px;
background: url(css/tabs/images/tabs_Lower_Header_Background.png) repeat-x;
}
.tab {
height: 25px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
font-size:14px;
float:left;
padding-left: 4px;
position: relative;
top: 1px
}
.tab .right {
float:left;
background:url(css/tabs/images/tab_Selected_Right.png) no-repeat;
height:25px;
width: 8px;
}
.tab .content {
float:left;
background:url(css/tabs/images/tab_Selected_Content.png) repeat-x;
height:25px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
padding-top: 4px;
}
.tab .left {
float:left;
background:url(css/tabs/images/tab_Selected_Left.png) no-repeat;
height:25px;
width: 6px;
}
.tabHover {
height: 25px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
font-size:14px;
float:left;
padding-left: 4px;
position: relative;
top: 1px;
cursor: pointer;
}
.h1 {
float:left;
height:25px;
width: 14px;
}
.h2 {
float:left;
height:25px;
text-align: center;
padding-left: 7px;
padding-right: 5px;
padding-top: 4px;
}
.h3 {
float:left;
height:25px;
width: 10px;
}
.tabHover:hover .h1 {
background:url(css/tabs/images/tab_Hover_Right.png) no-repeat;
}
.tabHover:hover .h2 {
background:url(css/tabs/images/tab_Hover_Content.png) repeat-x;
}
.tabHover:hover .h3 {
background:url(css/tabs/images/tab_Hover_Left.png) no-repeat;
}
</style>
<script type="text/javascript" src="javascript/jquery/jquery.js"></script>
<script>
$.fn.tabs = function(startTab){
//Set currentIndex
var currentIndex = 0;
//Get all tab views
var tabViews = $('.tabViews > div',$(this));
//Current tab container
var tabsContainer = $(this);
//Hide all tabView containers
tabViews.hide();
//Get all tabs
var $tabs = $('ul > li', tabsContainer);
$tabs.each(function(index){
$('a',$(this)).click(function(){
changeTab(index);
});
});
//call the changeTab method for the first time and selected the starting tab.
changeTab(startTab);
function changeTab(selectedIndex){
if(selectedIndex != currentIndex){
switchClass(selectedIndex);
var previousSelectedTab = $('a',$tabs[currentIndex]);
var currentSelectedTab = $('a',$tabs[selectedIndex]);
$(previousSelectedTab.attr('href')).hide();
$(currentSelectedTab.attr('href')).show();
currentIndex = selectedIndex;
}
}
//Method to switch the calles for selected and non selected tabs.
function switchClass(selectedIndex){
$tabs.each(function(index){
//Get Child Left, Content, right divs
var classBuilder = $('div > div',$(this))
//Current Selected Tab
if(index == selectedIndex){
var tabContainer = $('a > div',$(this))
tabContainer.removeClass('tabHover');
tabContainer.addClass('tab');
$(classBuilder[0]).removeClass('h3');
$(classBuilder[0]).addClass('left');
$(classBuilder[1]).removeClass('h2');
$(classBuilder[1]).addClass('content');
$(classBuilder[2]).removeClass('h1');
$(classBuilder[2]).addClass('right');
}
//Previously selected tab
if(index == currentIndex){
var tabContainer = $('a > div',$(this))
tabContainer.removeClass('tab');
tabContainer.addClass('tabHover');
$(classBuilder[0]).removeClass('left');
$(classBuilder[0]).addClass('h3');
$(classBuilder[1]).removeClass('content');
$(classBuilder[1]).addClass('h2');
$(classBuilder[2]).removeClass('right');
$(classBuilder[2]).addClass('h1');
}
});
}
}
$(function() {
$('#rfiTabs').tabs(0);
});
</script>
</head>
<body>
<div id="rfiTabs">
<ul class="tabNavigation">
<li><a href="#rfiBasic">
<div class="tab">
<div class="left"></div>
<div class="content">Basic</div>
<div class="right"></div>
</div>
</a></li>
<li><a href="#rfiHome">
<div class="tabHover">
<div style="" class="h3"></div>
<div style="" class="h2">Home</div>
<div class="h1"></div>
</div>
</a></li>
</ul>
<div class="tabViews" style="">
<div id="rfiBasic">Test</div>
<div id="rfiHome">test this</div>
</div>
</div>
</body>
</html>
Update:
I realized I can optimize the left, content, and center part of the tabs by updating the CSS and Jquery for the hover section:
.tabHover .right {
float:left;
height:25px;
width: 14px;
}
.tabHover .content {
float:left;
height:25px;
text-align: center;
padding-left: 7px;
padding-right: 5px;
padding-top: 4px;
}
.tabHover .left {
float:left;
height:25px;
width: 10px;
}
.tabHover:hover .right {
background:url(css/tabs/images/tab_Hover_Right.png) no-repeat;
}
.tabHover:hover .content {
background:url(css/tabs/images/tab_Hover_Content.png) repeat-x;
}
.tabHover:hover .left {
background:url(css/tabs/images/tab_Hover_Left.png) no-repeat;
}
function switchClass(selectedIndex){
$tabs.each(function(index){
//Get Child Lef, Content, right divs
var classBuilder = $('div > div',$(this))
if(index == selectedIndex){
var tabContainer = $('a > div',$(this))
tabContainer.removeClass('tabHover');
tabContainer.addClass('tab');
//$(classBuilder[0]).removeClass('h3');
// $(classBuilder[0]).addClass('left');
// $(classBuilder[1]).removeClass('h2');
// $(classBuilder[1]).addClass('content');
// $(classBuilder[2]).removeClass('h1');
// $(classBuilder[2]).addClass('right');
}
if(index == currentIndex){
var tabContainer = $('a > div',$(this))
tabContainer.removeClass('tab');
tabContainer.addClass('tabHover');
//$(classBuilder[0]).removeClass('left');
// $(classBuilder[0]).addClass('h3');
// $(classBuilder[1]).removeClass('content');
// $(classBuilder[1]).addClass('h2');
// $(classBuilder[2]).removeClass('right');
// $(classBuilder[2]).addClass('h1');
}
});
}
Update 2: Here is further optimized code as suggessted by jcubic:
<script>
$.fn.tabs = function (startTab) {
//Set currentIndex
var currentIndex = 0;
//Get all tab views
var tabViews = $('.tabViews > div', $(this));
//Hide all tabView containers
tabViews.hide();
//Get all tabs
var $tabs = $('ul > li', $(this));
$tabs.each(function (index) {
$('a', $(this)).click(function () {
changeTab(index);
});
});
changeTab(startTab);
function changeTab(selectedIndex) {
if (selectedIndex != currentIndex) {
switchClass(selectedIndex);
var previousSelectedTab = $('a', $tabs[currentIndex]);
var currentSelectedTab = $('a', $tabs[selectedIndex]);
$(previousSelectedTab.attr('href')).hide();
$(currentSelectedTab.attr('href')).show();
currentIndex = selectedIndex;
}
}
function switchClass(selectedIndex) { $tabs.eq(selectedIndex).find('a > div').removeClass('tabHover').addClass('tab'); $tabs.eq(currentIndex).find('a > div').removeClass('tab').addClass('tabHover');
} return this;
}
$(function () {
$('#rfiTabs').tabs(1); });
</script> </head> <body> <div id="rfiTabs"> <ul class="tabNavigation">
<li><a href="#rfiBasic" title="Basic">
<div class="tab">
<div class="left"></div>
<div class="content">Basic</div>
<div class="right"></div>
</div>
</a></li>
<li><a href="#rfiHome" title="Home">
<div class="tabHover">
<div style="" class="left"></div>
<div style="" class="content">Home</div>
<div class="right"></div>
</div>
</a></li> </ul> <div class="tabViews" style="">
<div id="rfiBasic" class="tabView">This is the Basic Tab View</div>
<div id="rfiHome" class="tabView">This is the Home Tab View</div> </div> </div> </body>
[1]: http://www.mail-apps.com/tabplugin/TabPluginWorkFile.html