Tab Panel with Frames

In this second part of our tutorial to create tabs in CSS, after using pages incorporating the Tab Panel and the use of iframes, we are now demonstrating the use of frames.
This is actually the simplest case, as in this case browsers handle the loading of pages, we have just to associated a frame to a link, and the tabs contain links.

The difference for the tabs with the previous cases is that we no more use rel attribute to store the URL of the page to load, it is stored in href.

The CSS code is unchanged.

Frame structure

<frameset rows="248,*">
  <frame src="tabs-menu.html"   />
  <frame src="tab-frame-css.html" name="mainFrame" id="mainFrame"  />
</frameset>

The first frame contains the tabs defined in the page tabs-menu.html.
The second frame is where you load the pages corresponding to the tabs

The file tab-frame-css.html is the page of the default tab.

Structure of the tabs

The modified definition of tabs:

<div id="tabs">
<ul>
     <li><a href="tab-frame-css.html" class="selected" target="mainFrame" 
             onclick="loadit(this)" >CSS</a></li>
     <li><a href="tab-frame-dom.html" target="mainFrame" 
             onclick="loadit(this)" >DOM</a></li>
     <li><a href="tab-frame-javascript.html" target="mainFrame"
            onclick="loadit(this)" >JavaScript</a></li>
</ul>
</div>

The rel attribute disappeared but a target attribute is now added to designate the name of the frame where pages are loaded by the browser.

Loading pages

The simplified loadit function

There is no need to assign the URL of the page as previously, the JavaScript code is needed only to change the appearance of tabs.

var tabs=document.getElementById('tabs').getElementsByTagName("a");
for (var i=0; i < tabs.length; i++)
{
    if(tabs[i].href == element.href) 
         tabs[i].className="selected";
    else
         tabs[i].className="";
}

Note the replacement of rel by the href attribute.

The previous initialization function to load the default page is removed, the default page is given now in the definition of the set of frames.

This JavaScript code is embedded in the source of the tabs-menu.html page.

Demonstration

Conclusion

Which of the three systems should you use? Each one has its advantages:

  1. Pages with the Tab Panel embedded.
    It is ideal for search engines. Use them to build a website.
  2. iFrame.
    Displays gracefully in the same page the content choosen by the user. Convenient to embed images or even forms, but this has limitations for pages using PHP. This is not the best solution for a Web application.
  3. Frames.
    Frames can put a barrier to search engine crawlers, this is not suitable for a website but it is perfect for a Web application.
© 2009-2012 Xul.fr