This page demonstrates the versatility of the user-friendly and compact new tab control from Wainer-Online your first source for object oriented tools for use in page design. We have deliberately overloaded it with tab within tab so you can study and learn how to use it to its full extent. Many of the special effects are achieved through style sheets the rest is pure Javascript. There are six completely independant tab controls on this page!

This is the basic tab control setup with no defined border on the tab strip
In creating a tab control you provide:
	the placeholder div's id,
	the name of the grid object,
	the tab labels
	the name of the div(s) that are associated with the tab control
		Note that all divs have the same id (this lets them be treated as an array)
		so otab3s.Tabs[0] is linked to news3[0] and so on.

Example:

 <div id='otabdiv3s'>
   <script>
   var otab3s=new woTab('otabdiv3s','otab3s',"Border|Body|BorderTop|BodyTop","news3");
   </script>
 </div>

<div ID="news3" class="clsTabBorder">
  This is automatically associated with TAB ZERO 
  Information to be displayed must be within these div tags
</div>

<div ID="news3" class="clsTabBorder">
  This is automatically associated with TAB ONE
  Information to be displayed must be within these div tags
</div>

and so on for as many tabs as you are defining.

 
The next tab demo uses the "XE" flag requesting the extended tab bar. This displays a 
border at the bottom of the tab strip.

Also we on each of the major tabs we have placed a minor tab controls. Being objects
this nesting can go on forever. We wrap a TABLE around each control to set is width etc.

Illustration of Listview Grid Control Purchase the control here or read more!