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

 < previousnext > 

 

Drawer

 

<drawer type='string' 
        depth='number' 
        handle_front='number'  
        handle_back='number' 
        scroll='boolean' 
        
        auto_open='boolean'
        auto_close='boolean'
        />
      


Description

Drawer can be added to an object to make it behave like a drawer that slides in and out. This can be used to create tabs that pop up, buttons that appear only when needed, expanding menus, etc. Drawer can also be used to create a dock-like component, but unlike the dock, the drawer's objects cannot be dynamically removed and added.

Drawer objects must initially be drawn in the closed position. They can be completely or partially covered by other elements. Drawers slide out automatically when the cursor is moved in from of them:

 

The drawer attributes are:

  • type: The direction the drawer opens. Valid values are up, down, left, and right. the default is up.

  • depth: Determines the number of pixels the drawer slides out. If this attribute is omitted, then the entire drawer slides out.

  • handle_front: Determines the amount of space in front of the drawer that triggers the drawer to slide out. When the cursor is within this space, the drawer automatically slides out. The front of the drawer is defined by the type of the drawer: if the drawer slides up, then the front of the drawer is above it; if the drawer slides right, then the front of the drawer is to its right; and so on. If this attribute is omitted, then handle_front equals depth.

  • handle_back: Determines the amount of space behind the handle_front that triggers the drawer to slide out. When the cursor is within this space, the drawer automatically slides out. The space behind the handle_front is defined by the type of the drawer: if the drawer slides up, then the handle_back is below the handle_front; if the drawer slides right, then handle_back is to the left of the handle_front; and so on. If this attribute is omitted, then handle_back equals depth.

  • scroll: If the drawer is wider than the board, then this attribute determines if the drawer slides sideways, perpendicular to the normal in and out motion. This enables showing hidden drawer parts beyond the board, and enables creating drawers that contain more element that can be displayed in one screen. Scrolling takes place automatically if the mouse is moved to the edge of the visible drawer parts. Valid values are true and false. The default is true.

  • auto_open: Determines whether the drawer opens automatically when the mouse is near its handle or not. Valid values are true and false. The default is true. When this attribute is set to false, then the drawer opens only by an action. This can be used to create menus that slide open only when the menu title is clicked for example.

  • auto_close: Determines whether the drawer closes automatically when the mouse moves away from its handle or not. Valid values are true and false. The default is true. When this attribute is set to false, then the drawer closes only by an action. This can be used to create menus that close only when a menu item is clicked for example.

 


Event Action

When a drawer opens or closes, actions enclosed by the same object with the event='drawer_open' or event='drawer_close' are automatically executed. This can be used to play sounds or execute other actions triggered by drawers:

<object>
   <!-- drawer graphic -->
   <rect x='125' y='100' width='50' height='40' /> 
      
   <!-- drawer function -->
   <drawer type='up' depth='40' />
      
   <action>
      <!-- actions excuted when this drawer opens and closes -->   
      <item type='sound_play' target='woosh' event='drawer_open' />
      <item type='alert' text='Hello World!' event='drawer_open' />
      <item type='sound_play' target='woosh' event='drawer_close' />   
   </action>

</object>

 

Example

<slickboard>
   
    <!-- 3 drawers at the top of the blue rectangle-->
   <object>   
      <rect x='125' y='100' width='50' height='40' fill_color='FF6600' corner_tl='10' corner_tr='10' /> 
      <text x='125' y='100' width='50' height='40' size='30' alpha='.6' align_h='center' shadow='low'>1</text>   
      <drawer type='up' />
   </object >
   <object>   
      <rect x='175' y='100' width='50' height='40' fill_color='FF6600' corner_tl='10' corner_tr='10' /> 
      <text x='175' y='100' width='50' height='40' size='30' alpha='.6' align_h='center' shadow='low'>2</text>   
      <drawer type='up' />
   </object >
   <object>   
      <rect x='225' y='100' width='50' height='40' fill_color='FF6600' corner_tl='10' corner_tr='10' /> 
      <text x='225' y='100' width='50' height='40' size='30' alpha='.6' align_h='center' shadow='low'>3</text>   
      <drawer type='up' />
   </object >
 
   
   <!-- drwaer at the right side of the blue rectangle -->
   <object> 
      <!-- make part of the drawer stick out underneath the blue rectangle  -->
      <rect x='150' y='105' width='160' height='90' fill_color='FF6600' /> 
      <image url='images/image_flower.jpg' fill='normal' x='150' y='105' width='150' height='90' /> 
      <drawer type='right' depth='150' handle_front='0' handle_back='30' />
      
      <action>
         <!-- action triggered when openning the drawer to play a sound -->
         <item type='sound_play' target='woosh' event='drawer_open' />
      </action>
   </object >
   

   <!-- a blue rectangle that covers the drawers -->
   <rect x='100' y='100' width='200' height='100' fill_color='8888ff' shadow='low' /> 
   
   
   <filter>
      <shadow id='low' alpha='.5' blurX='10' blurY='10' />
   </filter>
   
   <sound>
      <clip id='woosh' url="sounds/woosh.mp3" />
   </sound>
 
</slickboard>

 


<slickboard>
   
   <!-- Move the mouse to the bottom of the board to see the drawer -->
   <!-- Move the mouse to the sides of the drawer to make it scorll -->
   <!-- Unlike a dock, objects cannot be dragged to and from from drawers -->
   
   <object>
   
      <!-- drawer's background, wider than the board -->
      <rect x='-100' y='295' width='680' height='50' fill_color='8888ff' corner_tl='10' corner_tr='10' shadow='low' />   
      
      <!-- transparent reactangle that adds 10 pixels padding on each side of the drawer -->
      <rect x='-110' y='290' width='700' height='50' fill_alpha='0' /> 
      
      <!-- drawer content -->
      <text x='-50' y='300' width='200' size='30' alpha='.6' shadow='low'>Hello World!</text>
      <image url='images/image_flower.jpg' x='500' y='302' width='60' height='36' shadow='low' /> 
      
      <!-- make the drawer scroll to show hidden parts beyound the board's edges -->
      <drawer type='up' depth='45' scroll='true' />
      
   </object >
   
   
   <filter>
      <shadow id='low' alpha='.5' blurX='10' blurY='10' />
   </filter>
 
</slickboard>

 


<slickboard>
   
   <!-- the drawer object at the bottom of the blue rectangle -->
   <object>
           
      <!-- draw the drawer's background -->
      <rect x='60' y='175' width='360' height='50' fill_color='FF6600' shadow='high' />
      <rect x='60' y='225' width='360' height='5' fill_color='FF6600' bevel='bg' shadow='high' /> 
     
      <!-- draw the drawer's three buttons (you may add roll over and press states) -->
      <object>
         <rect x='80' y='186' width='50' height='30' fill_color='ff6600' corner_tl='10' 
               corner_tr='10' corner_bl='10' corner_br='10' state='hit' bevel='button' />   
         <text x='80' y='186' width='50' height='30' size='20' alpha='.6' align_h='center'shadow='low'>1</text>   
         <action><item type='float' target='one' /></action>
      </object> 
     
      <object>
         <rect bevel='button' x='215' y='186' width='50' height='30' fill_color='ff6600' corner_tl='10' 
               corner_tr='10' corner_bl='10' corner_br='10' state='hit' />   
         <text x='215' y='186' width='50' height='30' size='20' alpha='.6' align_h='center' shadow='low'>2</text>   
         <action><item type='float' target='two' /></action>
      </object> 
     
      <object>
         <rect bevel='button' x='350' y='186' width='50' height='30' fill_color='ff6600' corner_tl='10' 
               corner_tr='10' corner_bl='10' corner_br='10' state='hit' />   
         <text x='350' y='186' width='50' height='30' size='20' alpha='.6' align_h='center' shadow='low'>3</text>   
         <action><item type='float' target='three' /></action>
      </object> 
      
      <!-- set the drawer's attributes -->
      <drawer type='down' depth='50' />  
      
   </object >
   
   
   <!-- The blue rectangle -->
   <rect x='50' y='25' width='380' height='200' fill_color='8888ff' 
         corner_tr='50' corner_tl='50' corner_br='5' corner_bl='5' bevel='bg' shadow='high' /> 
   
   
   <!-- The three pages, each floats to the top when its corresponding button is clicked -->
   <object id='three'> 
      <rect x='100' y='50' width='280' height='150' fill_color='8888ff' /> 
      <text x='100' y='60' width='280' height='150' size='100' alpha='.6' align_h='center' shadow='low'>Three</text>   
   </object>
   
   <object id='two'> 
      <rect x='100' y='50' width='280' height='150' fill_color='8888ff' /> 
      <text x='100' y='60' width='280' height='150' size='100' alpha='.6' align_h='center' shadow='low'>Two</text>   
   </object>
   
   <object id='one'> 
      <rect x='100' y='50' width='280' height='150' fill_color='8888ff' /> 
      <text x='100' y='60' width='280' height='150' size='100' alpha='.6' align_h='center' shadow='low'>One</text>   
   </object>
     
     
   <filter>
      <shadow id='high' distance='4' alpha='.5' blurX='10' blurY='10' />
      <shadow id='low' distance='2' alpha='.5' blurX='5' blurY='5' />
      <bevel id='bg' distance='3' blurX='5' blurY='5' highlightAlpha='.25' shadowAlpha='.25' quality='2' /> 
      <bevel id='button' distance='2' blurX='8' blurY='3' highlightAlpha='.25' shadowAlpha='.25' type='full' />   
   </filter>
   
</slickboard>

 


<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