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

 next > 

 

Dock

 

<action>

     <item type='string' target='string' edge='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: Determines the type of action to execute. The type values that execute docking functions are:

    • dock: Dock the target object. This object must be already enabled for docking. Otherwise, this action has no effect (see Enable Docking).

    • undock: Undock the target object.


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

  • edge: The edge of the screen to dock the target object to. Valid values are:

    • bottom (defalut)
    • top
    • left
    • right


  • x: The horizontal position where to place the undocked object.

  • y: The vertical position where to place the undocked object.

 

Example

<slickboard>
   
   
   <object id='blue'>
      <!-- a blue square that can be clicked and dragged --> 
      <rect x='50' y='50' width='100' height='100' fill_color='8888ff' state='hit' />   
      <action><item type='drag' /></action>
      
      <!-- enable docking this object at bottom edge -->
      <dock bottom='true' />
      
      <!-- the object's icon is a smaller blue square that can be clicked-->
      <icon>
         <rect x='0' y='0' width='50' height='50' fill_color='aaaaff' state='hit' /> 
      </icon>
      
   </object>   
   
   
   <!-- a button with an action that docks the blue object -->
   <object>
      <rect x='250' y='80' width='80' height='20' fill_color='FF6600' shadow='default' state='hit' />   
      <text x='250' y='81' width='80' height='20' align_h='center'>Dock</text>
      <action>
         <item type='dock' target='blue' edge='bottom' />
      </action>
   </object>   
   
   
   <!-- a button with an action that undocks the blue object -->
   <object>
      <rect x='350' y='80' width='80' height='20' fill_color='FF6600' shadow='default' state='hit' />   
      <text x='350' y='81' width='80' height='20' align_h='center'>Undock</text>
      <action>
         <item type='undock' target='blue' />
      </action>
   </object>
  

</slickboard>

 

 next > 


Copyright © 2010-2017, maani.us