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

 < previousnext > 

 

Show & Hide

 

<action>

     <item type='string' target='string' transition='string' />
     ...
   
</action>
             


Description

The action tags can be added to an object and enclose any number of items, each executes an action when triggered by an event:

 

  • type: The type of action to execute. The type values that show and hide objects are:

    • hide: Hide a visible object.

    • show: Show a hidden object.

    • toggle: If the object is hidden, then show it. If it is visible, then hide it.


  • target: The ID of the object to apply this action to. If this attribute is omitted, then the object that encloses this action is targeted.

  • transition: By default, the above action types hide and show an object instantly. If this transition attribute is added, then an animated transition is applied to the action. Valid transition values and additional related attributes are identical to object transitions.

 

Example

<slickboard>
      
   <!-- blue object -->
   <object id='blue'>   
      <rect x='115' y='100' width='250' height='100' fill_color='8888ff' shadow='default' /> 
   </object >
   
   
   <!-- a button that hides the blue object -->
   <object>   
     <rect x='115' y='50' width='70' height='30' fill_color='FF6600' shadow='default' state='hit' /> 
     <text x='115' y='55' width='70' alpha='.6' align_h='center' shadow='default'>Hide</text>   
     <action><item type='hide' target='blue' /></action>   
   </object >
   
   
   <!-- a button that shows the blue object with a fly transition -->
   <object>   
     <rect x='205' y='50' width='70' height='30' fill_color='FF6600' shadow='default' state='hit' /> 
     <text x='205' y='55' width='70' alpha='.6' align_h='center' shadow='default'>Show</text>   
     <action><item type='show' target='blue' transition='fly' duration='1' easing='strong' /></action>   
   </object >
   
   
   <!-- a button that toggles the blue object -->
   <object>   
     <rect x='295' y='50' width='70' height='30' fill_color='FF6600' shadow='default' state='hit' />   
     <text x='295' y='55' width='70' alpha='.6' align_h='center' shadow='default'>Toggle</text>   
     <action><item type='toggle' target='blue' /></action>
   </object >
   
   
   <filter>
      <shadow id='default' />
   </filter>
 
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us