TabControl

Top  Previous  Next

A Tab Control is a special element that contains the same amount of Tab Button and Tab Panels with identical names.

If, for argument, a Tab Control contains two tabs then there must be two Tab Panels with names e.g. "Tab1" and "Tab2" in a TabPanelContainer and two TabButtons with names e.g. "Tab1" and "Tab2" in a TabButtonContainer.

Below is an example HTML code that contains necessary definitions for a Tab Control. It is not important what type of HTML elements are used as containers. e.g. TABLE elements could also be used instead of DIV elements. The only requirement is to use the "mo:*" attributes correctly.

  <div mo:type="TabControl" mo:name="TabControl1" mo:needsInit="true" 
       mo:props="initialTab:'Tab1'">
 
     <!-- Tab Buttons -->
     <div mo:type="TabButtonContainer">
 
        <!-- Tab Button 1 -->
        <img mo:name="Tab1" src="n.gif" mo:type="TabButtonAnimated" mo:needInit="true"            
             mo:props="normalSource:'n1.gif', mouseOverSource:'mo1.gif', 
                       mouseDownSource:'mo2.gif', selectedSource:'s1.gif'"/>
 
        <!-- Tab Button 1 -->
       <img mo:name="Tab2" src="n.gif" mo:type="TabButtonAnimated" mo:needInit="true"  
                      mo:props="normalSource:'n2.gif', mouseOverSource:'mo2.gif', 
                                mouseDownSource:'mo2.gif', selectedSource:'s2.gif'"/>
    </div>
 
    <!-- Tab Panels -->
    <div mo:type="TabPanelContainer">
      <div mo:type="TabPanel" mo:name="Tab1">Tab Area 1</div>
      <div mo:type="TabPanel" mo:name="Tab2">Tab Area 2</div>
    </div>
 
 </div>

More than one Tab Control can be used in a page and a Tab Control can nest within another one. The name (the value of mo:name attribute) of the Tab Control must be unique in a page.

Nesting a Tab Control within another:

  <div mo:type="TabControl" mo:name="TabControl1" .. >
     <div mo:type="TabButtonContainer">
       ..
     </div>
 
    <div mo:type="TabPanelContainer">
      <div mo:type="TabPanel" mo:name="Tab1">
 
        <div mo:type="TabControl" mo:name="TabControl2" .. >
          <div mo:type="TabButtonContainer">
           ..
          </div>
 
          <div mo:type="TabPanelContainer">
            <div mo:type="TabPanel" mo:name="Tab1">
 
            </div>
            <div mo:type="TabPanel" mo:name="Tab2">
          </div>
        </div>
 
      </div>
      </div>
      <div mo:type="TabPanel" mo:name="Tab2">
      </div>
    </div>
 </div>

 

See TabControl Function Class In the MoreMotion Face API.

 

Required Javascript File

This element requires that Tabs.js Javascript file is linked to the page in the HEAD section of the HTML document as follows.

  <head> 
    ...
    <script type="text/javascript" src="moremotion/face/Tabs/Tabs.js"></script>
  </head>