Lamia's Java Blog - A Pinoy Java Blog

Creating a tab control/component functionality with DHTML

I'd like to share something I've made recently(though this may be so 1999). This post could either make your life easier or worse, it all depends on you whether you want to use it or not. I don't know if this kind of functionality already exists on any web framework(JMaki, .Net) but in case you haven't found one then I hope this could be of some use to you.

The functionality I tried to this is something like what you can find here, but I didn't use any code there

You migh need some basic understanding of Javascript and CSS to make this work for you. You DON'T need AJAX to do this kind of functionality. 

Just so you know, I'm not a Javascript or CSS expert. This post is also not intended for the OOP purists, but your constructive comments are most welcome if you think it would help other readers. I just use those technologies occasinaly or on worse situations, have to do front-end designs. So any mistake you see, I hope that you could forgive me. Try to inform me if you see anything wrong. Now to get to the thing:

------------------------------------------------------------ 

First, let's create  an unordered list and its lists which would function as our tabs

[code language="HTML"]

<ul id="NavBar" class="NavBar">
                  <li><a href="#" id="a"><span>Tab1</span></a></li>
                  <li><a href="#" id="b"><span>Tab2</span></a></li>
                  <li><a href="#" id="c"><span>Tab3</span></a></li>
                </ul>

[/code]  

We will need the id's for the anchor tags later. Next, let's create a div where the contents of each tabs  will go.

[code language="HTML"] 

<div id="ContentDiv"></div>

[/code] 

If you noticed, it doesn't contain anything... Yet.

Next, we create three more divs to put the content of each tabs

[code language="HTML"]

 <div id="Tab1Div" class="HiddenDiv">
      Content1
    </div>

    <div id="Tab2Div" class="HiddenDiv">
      Content2
    </div>

    <div id="Tab3Div" class="HiddenDiv">
      Content3
    </div>

[/code]

You will need a CSS class that looks like this to hide the divs

[code language="CSS"]

.HiddenDiv
{
    visibility: hidden;
    float: left
}

[/code]

Before anything else, I'd like us to style our lists so we could turn them into actual tabs...

[code language="CSS"]

.NavBar
{
    position:relative;
    float:left;
    width:800px;
    padding:0px 0px 0px 0px;
    margin:0;
    list-style:none;
    line-height:1em;
}

.NavBar li
{
   float: left;
   margin: 0px;
}

/**
 * Rounded Edges, if you have the images
 *
 */
.NavBar a.Default
{
    /*display:block;*/
    color: #000;
    background: #E1E1E1 url(./../img/left_tab.gif) left top no-repeat;
    text-decoration: none;
    font-family: arial;
    font-size: 14px;
    padding-left: 10px
}

.NavBar a.Default span
{
    background: url(./../img/right_tab.gif) right top no-repeat;
    text-decoration: none;
    font-family: arial;
    font-size: 14px;
    padding-right: 10px
}

.NavBar a.Selected
{
    color: #fff;
    background: #f90 url(./../img/left_tab_selected.gif) left top no-repeat;
    font-family: arial;
    font-size:12px;
    text-decoration: none;
    padding-left: 14px
}

.NavBar a.Selected span
{
    color: #fff;
    text-decoration: none;
    font-family: arial;
    font-size: 14px;
    background: #f90 url(./../img/right_tab_selected.gif) right top no-repeat;
    padding-left: 10px

}

[/code]

I don't have any images to share... I'll leave it up to you to provide that. Alternatively, you could omit the images and just use colors for the background.

Now, we want to be able to change content when we click on a tab. We have to make a sllight modification to our list. But first, type this javascript on the head part of your HTML.

[code language="Javascript"]

<script>

      function changeContent(contentToChange, contentToGet, _tabObj)
      {
          var content1 = document.getElementById(contentToChange);
          var content2 = document.getElementById(contentToGet);

          //alert(toChangeObj.innerHTML);
          content1.innerHTML = content2.innerHTML;

          var tabObj = document.getElementById(_tabObj);

          if (tabObj != null)
          {
              resetTabs(); 
              tabObj.className = "Selected";
          }
 
      }

      function resetTabs()
      {
          var navBarObj = document.getElementById("NavBar");
          var elements = navBarObj.getElementsByTagName("li");
       
          for(var i = 0; i < elements.length; i++)
          {
              var anchors = elements.getElementsByTagName("a");
            
              for(var n = 0; n < anchors.length; n++)
              {
                  anchors.className = "Default";
              }

              //alert("element.anchor: " + anchor);
          }

      }

      window.onload = function()
      {
          changeContent('ContentDiv', 'Tab1Div', 'a');
      }

    </script>
[/code]

 and your list to this

[code language="HTML"]

<li><a href="#" onClick="BLOCKED SCRIPTchangeContent('ContentDiv', 'Tab1Div', 'a');" id="a"><span>Tab1</span></a></li>
                  <li><a href="#" onClick="BLOCKED SCRIPTchangeContent('ContentDiv', 'Tab2Div', 'b');" id="b"><span>Tab2</span></a></li>
                  <li><a href="#" onClick="BLOCKED SCRIPTchangeContent('ContentDiv', 'Tab3Div', 'c');" id="c"><span>Tab3</span></a></li>
[/code]

Now when you click on a tab, it will reset everything to its "Default" class defined in the CSS above, then it will change the image/backgroun/text(depending on your CSS entry) for the selected tab.