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

 < previousnext > 

 

Note

 

Notes are one way to display information about a board element. Notes can be created by showing and hiding any object that displays any information (text, image, etc.). Notes differ from tooltips in that they can be any custom design, and they are triggered by actions:

 

The below examples show simple notes that can be customized to create unlimited designs.

 

Example

<slickboard>
  
   <object>
      
      <!-- red square -->   
      <rect x='190' y='100' fill_color='ff4400' shadow='default' state='hit' /> 
      
      <action>
         <!-- make the red square draggable -->   
         <item type='drag' />
         
         <!-- show the note object when the mouse is over the red square -->
         <item type='show' target='note' event='mouse_over' transition='photo' duration='.5' easing='strong' />   

         <!-- hide the note object when the mouse is off the red square -->
         <item type='hide' target='note' event='mouse_out' />
      </action>   
      

      <!-- the note object, which is initially hidden -->
      <!-- the note object is a child of the red square to be dragged along with it -->      
      <object id='note' hide='true' offset_x='240' offset_y='25' shadow='default' bevel='smooth'>  
         <rect x='10' y='0' width='120' height='60' fill_color='aaaaff' corner_tl='15' corner_tr='25' /> 
         <polygon fill_color='aaaaff'>
            <point x='0' y='50' />
            <point x='0' y='90' />
            <point x='30' y='50' />
         </polygon>
         
         <rect x='0' y='0' width='120' height='50' fill_color='8888ff' corner_tl='15' corner_tr='15' /> 
         <polygon fill_color='8888ff'>
            <point x='0' y='50' />
            <point x='0' y='90' />
            <point x='20' y='50' />
         </polygon>
         <text x='10' y='0' width='120' size='35' shadow='hole'>Hello!</text>
      </object>
      
   </object>     
   
   
   <filter>
      <shadow id='default' />
      <shadow id='hole' knockout='true' inner='true' alpha='1' blurX='20' blurY='20' />
      <bevel id='smooth' distance='2' blurX='15' blurY='15' highlightAlpha='.75' shadowAlpha='.6' quality='3' />
   </filter>
   
</slickboard>

 


<slickboard>
  
   <object offset_x='190' offset_y='100'>
      
      <!-- draggable red square -->   
      <rect x='0' y='0' fill_color='ff4400' shadow='default' state='hit' /> 
      <action><item type='drag' /></action>
      
      <!-- the information checkbox inside the red square -->   
      <object id='information_checkbox'>  
         <circle x='80' y='20' radius='10' fill_color='ffffff' state='hit' />
         <circle x='80' y='20' radius='8' fill_color='aaaaaa' state='checked' />  
         <text x='75' y='7' size='20'>i</text>
         
         <action>
            <!-- when the inormation checkbox is clicked (checked), show the 'note' object -->
            <item type='show' target='note' event='check' transition='fly' startPoint='2' duration='.5' easing='back' />
            <!-- when the inormation icon is clicked again (unchecked), hide the 'note' object -->
            <item type='hide' target='note' event='uncheck' transition='fade' duration='.1' easing='strong' />   
         </action>   
      </object> 
      

      <!-- the note object, which is initially hidden -->   
      <!-- the note object is a child of the red square to be dragged along with it -->   
      <object id='note' offset_x='50' offset_y='-55' hide='true' shadow='default'>  
         <polygon fill_color='4444aa'>
            <point x='0' y='30' />
            <point x='30' y='60' />
            <point x='25' y='30' />
         </polygon>
         <rect width='150' height='30' fill_color='8888ff' line_color='aaaaff' line_thickness='1' /> 
         <text x='10' y='2' width='120' size='18' alpha='.7' shadow='default'>Hello World!</text>
          
         <!-- the 'x' icon inside the note -->   
         <object offset_x='128' offset_y='7' >
            <rect x='0' y='0' width='15' height='15' fill_color='ffffff' state='hit' />
            <line x1='2' y1='2' x2='12' y2='12' thickness='2' /> 
            <line x1='12' y1='2' x2='2' y2='12' thickness='2' /> 
            
            <!-- when the 'x' icon is clicked, uncheck the inormation checkbox and hide the note object -->
            <action>
               <item type='uncheck' target='information_checkbox' />
            </action>   
         </object> 
          
      </object>
   </object>     
   
   
   <filter>
      <shadow id='default' />
   </filter>
   
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us