Thursday, May 26, 2011

Creating Tabs and making a Tab link shareable

Tabs are used to show data of same context. Below we will discuss how to create Tab's using simple HTML CSS and Javascript and then we will discuss a behavior users demanded from these Tabs and how we applied "Fragement Identifier Pattern" a frontend design pattern to modify the functionality. You can skip the code if you are just interested in understanding the design pattern.

                            Here in the Code we are trying to create Tabs for describing a Car.


 *******************************CODE***********************************

HTML

<div id='tabs'>
<!--- Tabs ---> 
<ul>
<li class='inactiveTab'   id='OverviewTab'     >
<a href='#Overview' >Overview</a>             Overview Tab
</li>
<li class='activeTab'     id='SpecificationTab'     >
<a href='#Specification'>Specification</a>    Specification Tab
</li>
<li class='inactiveTab'   id='FeaturesTab'     >
<a href='#Features'>Features</a>                Features  Tab
</li>
<li class='inactiveTab'   id='ColorsTab'     >            Colors  Tab
<a href='#Colors' > Colors </a>                
</li>
</ul>

<!—Tab Content--> 
<div id='Overview' class='inactive' >   Overview of the Car XXXXX </div>
<div id='Specification' class='active' > Basic Specification XXXX </div>
<div id='Features' class='inactive'    >     Features XXX </div>
<div id='Colors' class='inactive'    >         Colors XXXXX </div>
</div>



CSS

#tabs ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

#tabs ul li {
position: relative;
display: inline;
margin: 0px;
z-index: 2;
}

div.inactive {
display: none;
width: 300px;
padding: 0px;
background-color: white;
}

div.active {
border: 1px solid black;
width: 300px;
padding: 0px;
background-color: white;
margin-top: -1px;
}

li.activeTab
{
border-bottom: none;
border-top:  1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
background-color: white;
margin-bottom: 1px;
z-index: 1;
}

li.inactiveTab
{
border-bottom:1px solid black;
line-height:2px;
border-top: 1px solid black;
border-left:1px solid black;
border-right:1px solid black;
background-color:#cccccc;
top:-1px;
}
 
Now we will add a little jQuery to be able to switch between tabs.

jQuery(document).ready(function(){                // document load function

jQuery("#tabs ul li").click(function(){                 // registering the tab click event
$(this).addClass("activeTab");                               //making this tab active
$(this).removeClass("inactiveTab");                    
$(this).siblings().addClass("inactiveTab");               //making all other tabs inactive
$(this).siblings().removeClass("activeTab");
$('#'+$(this).html()).addClass("active");              //making container active    
$('#'+$(this).html()).removeClass("inactive");       
$('#'+$(this).html()).siblings().addClass("inactive");    //making other container inactive
$('#'+$(this).html()).siblings().addClass("active");
});
});

************************************************************************
Read More for Enhanced Tab and Fragement Identifier Pattern


User wanted to share Tab Links with other users so in case if he wants somebody to read the specifications or show somebody the colors available he could send him a link and the person with the link lands on the specification or color tab. 


The Fragement Identifier pattern uses Hash that can be appended to a link.The hash is then read by the client script and based on what is in the Fragement corresponding Tab is shown.


So If the URL is like
http://www.example.com/tabs.html#Colors
the hash value colors will be captured by the client script and corresponding Tab will be shown. 





jQuery(document).ready(function(){                // document load function


var currentTab = window.location.hash;               // reading the Fragment
currentTab = currentTab +"Tab";                          
if(currentTab)                            // Based on the Fragment activate the Tab
{
jQuery(currentTab).addClass("activeTab");
jQuery(currentTab).removeClass("inactiveTab");
$(currentTab).siblings().addClass("inactiveTab");
$(currentTab).siblings().removeClass("activeTab");
$('#'+$(currentTab).html()).addClass("active");
$('#'+$(currentTab).html()).removeClass("inactive");
$('#'+$(currentTab).html()).siblings().addClass("inactive");
$('#'+$(currentTab).html()).siblings().addClass("active");
}

jQuery("#tabs ul li").click(function(){                 // registering the tab click event
$(this).addClass("activeTab");                               //making this tab active
$(this).removeClass("inactiveTab");                    
$(this).siblings().addClass("inactiveTab");               //making all other tabs inactive
$(this).siblings().removeClass("activeTab");
$('#'+$(this).html()).addClass("active");              //making container active    
$('#'+$(this).html()).removeClass("inactive");       
$('#'+$(this).html()).siblings().addClass("inactive");    //other container inactive
$('#'+$(this).html()).siblings().addClass("active");
});
});

2 comments:

  1. Great stuff for Tab specification. Anyone can directly share the tab content. Usually, when we share a link, it open the page withe default tab. To switch to the actual tab, takes time.

    In the above script, sometimes you have used the jQuery keyword, as well as sometimes you have used $ only. Is there any specific reason behind this!

    ReplyDelete
  2. i gone through the post and i need little help from you.
    bellow is my help requirements:
    1. how can i add insert image spaceific contents insde the sub menus.
    2. Is it possible to add sub menus under sub menus (chain menus) in your design.

    Thanks

    ReplyDelete