SlickBoard | CSS/XML Timeline (new) | XML/SWF Charts | Timeline Eons

 < previousnext > 

 

Tab

 

Pages with tabs can simply be created with overlapping objects. Each object contains both the page content and its tab. When the tab is clicked, its entire object is floated to top, hiding the other objects underneath it.

The first example below shows simple tabs created with simple buttons. This basic construction can be customized to add roll over and press button states. The second example uses drawers to create tabs that pop up.

 

Example

<slickboard>
 
   <!-- green page -->
   <object shadow='soft'>
      <!-- page background and content --> 
      <rect x='75' y='120' width='300' fill_color='88ff00' corner_br='5' corner_bl='5' /> 
      <text x='75' y='135' width='300' size='50' alpha='.75' align_h='center' shadow='soft'>Green</text> 
      
      <!-- green tab -->
      <rect x='275' y='100' height='35' fill_color='88ff00' corner_tl='20' corner_tr='20' state='hit' /> 
      <text x='275' y='102' width='100' size='12' alpha='.6' align_h='center' shadow='soft'>Green</text>
      <action><item type='float' /></action>
   </object >
   
   
   <!-- red page -->
   <object shadow='soft'> 
      <!-- page background and content --> 
      <rect x='75' y='120' width='300' fill_color='ff6600' corner_br='5' corner_bl='5' /> 
      <text x='75' y='135' width='300' size='50' alpha='.75' align_h='center' shadow='soft'>Red</text>  
      
      <!-- red tab -->
      <rect x='175' y='100' height='35' fill_color='ff6600' corner_tl='20' corner_tr='20' state='hit' /> 
      <text x='175' y='102' width='100' size='12' alpha='.6' align_h='center' shadow='soft'>Red</text>
      <action><item type='float' /></action>
   </object >
   
   
   <!-- blue page -->
   <object shadow='soft'>
      <!-- page background and content --> 
      <rect x='75' y='120' width='300' fill_color='8888ff' corner_br='5' corner_bl='5' /> 
      <text x='75' y='135' width='300' size='50' alpha='.75' align_h='center' shadow='soft'>Blue</text>
      
      <!-- blue tab -->
      <rect x='75' y='100' height='35' fill_color='8888ff' corner_tl='20' corner_tr='20' state='hit' /> 
      <text x='75' y='102' width='100' size='12' alpha='.6' align_h='center' shadow='soft'>Blue</text>
      <action><item type='float' /></action>
   </object > 
   
      
   <filter>
      <shadow id='soft' alpha='.2' />
   </filter>
 
</slickboard>

 


The below example uses drawers to create tabs that pop up.

<slickboard>
   
   <!-- draw shadows below all graphics collectively to prevent them from overlapping-->
   <object shadow='default'>   
      <rect x='75' y='120' width='300' corner_tr='5' corner_br='5' corner_bl='5'  /> 
      <rect x='275' y='100' height='35' corner_tl='20' corner_tr='20' corner_br='5' /> 
      <rect x='175' y='100' height='35' corner_tl='20' corner_tr='20' /> 
      <rect x='75' y='100' height='35' corner_tl='20' corner_tr='20' /> 
   </object >
 
   
   <!-- green page -->
   <object  id='green' bevel='margin'>  
      <!-- page background and content --> 
      <rect x='75' y='120' width='300' fill_color='88ff00' corner_br='5' corner_bl='5' /> 
      <text x='75' y='135' width='300' size='50' alpha='.75' align_h='center' shadow='default'>Green</text>   
      
      <!-- green tab -->
      <object>   
         <rect x='275' y='100' height='35' fill_color='88ff00' corner_tl='20' corner_tr='20' state='hit' /> 
         <text x='275' y='102' width='100' size='12' alpha='.6' align_h='center' shadow='default'>Green</text>
         <drawer depth='10' handle_front='20' handle_back='20' />
         <action><item type='float' target='green' /></action>
      </object >
   </object >
   
   
   <!-- red page -->
   <object id='red' bevel='margin'>  
      <!-- page background and content --> 
      <rect x='75' y='120' width='300' fill_color='ff6600' corner_br='5' corner_bl='5' /> 
      <text x='75' y='135' width='300' size='50' alpha='.75' align_h='center' shadow='default'>Red</text>
      
      <!-- red tab -->
      <object>   
         <rect x='175' y='100' height='35' fill_color='FF6600' corner_tl='20' corner_tr='20' state='hit' /> 
         <text x='175' y='102' width='100' size='12' alpha='.6' align_h='center' shadow='default'>Red</text>
         <drawer depth='10' handle_front='20' handle_back='20' />
         <action><item type='float' target='red' /></action>
      </object >
   </object >
   
   
   <!-- blue page -->
   <object id='blue' bevel='margin'>  
      <!-- page background and content --> 
      <rect x='75' y='120' width='300' fill_color='8888ff'corner_br='5' corner_bl='5' /> 
      <text x='75' y='135' width='300' size='50' alpha='.75' align_h='center' shadow='default'>Blue</text>
      
      <!-- blue tab -->
      <object>   
         <rect x='75' y='100' height='35' fill_color='8888ff' corner_tl='20' corner_tr='20' state='hit' /> 
         <text x='75' y='102' width='100' size='12' alpha='.6' align_h='center' shadow='default'>Blue</text>
         <drawer depth='10' handle_front='20' handle_back='20' />
         <action><item type='float' target='blue' /></action>
      </object > 
   </object > 
  
   
   <filter>
      <shadow id='default' />
      <bevel id='margin' blurX='8' blurY='8' distance='2' highlightAlpha='.25' shadowAlpha='.25' type='inner' />   
   </filter>
 
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us