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

 < previousnext > 

 

Checkbox

 

<object checked='boolean'>

   <circle ... state='string' />
   <image ... state='string' />
   <line ... state='string' />
   <polygon ... state='string'>...</polygon>
   <rect ... state='string' />
   <text ... state='string'>...</text>

</object>
      


Description

A checkbox is a button with two states (checked and unchecked).

A checkbox is initially unchecked, unless specified otherwise by adding the checked attribute to its object tag.

A checkbox is created by adding the state attribute to any drawing tag (circle, image, line, polygon, rect, and text). Valid state values are:

  • hit: Defines the area that can be clicked. A graphic with this state is always displayed, but can be transparent (alpha='0') or covered by other graphics.

  • checked: Display this graphic element only if the checkbox is checked.

  • unchecked: Display this graphic element only if the checkbox is unchecked.

  • checked_over: Display this graphic element only if the checkbox is checked and the mouse hovers over it.

  • checked_press: Display this graphic element only if the checkbox is checked and the mouse is pressed over it.

  • unchecked_over: Display this graphic element only if the checkbox is unchecked and the mouse hovers over it.

  • unchecked_press: Display this graphic element only if the checkbox is unchecked and the mouse is pressed over it.

  • idle: Display this graphic only when the mouse is not over it, whether the checkbox is checked or unchecked.

  • over: Display this graphic only when the mouse hovers over it, whether the checkbox is checked or unchecked.

  • press: Display this graphic only when the mouse is pressed over it, whether the checkbox is checked or unchecked.

 


Event Action

When a checkbox is checked or unchecked, actions enclosed by the same object with the event='check' or event='uncheck' are automatically executed. This can be used to execute actions triggered by the status of the checkbox:

<object >

   <rect x='0' y='0' width='20' height='20' fill_color='ff4400' state='hit' />    
   <rect x='5' y='5' width='10' height='10' fill_color='000000' state='checked' /> 
      
   <!-- execute one action when the checkbox is checked -->
   <!-- execute another action when the checkbox is unchecked -->
   <action>
      <item type='show' target='circle' event='check' />
      <item type='hide' target='circle' event='uncheck' />
   </action>
   
</object> 

 

Example

<slickboard>
   
   <!-- a simple checkbox that controls a circle. This checkbox is initially checked -->
   <object checked='true' offset_x='100' offset_y='100'>
      <rect x='0' y='0' width='20' height='20' fill_color='ff4400' shadow='default' state='hit' />    
      <line x1='5' y1='5' x2='15' y2='15' thickness='2' caps='round' state='checked' /> 
      <line x1='15' y1='5' x2='5' y2='15' thickness='2' caps='round' state='checked' /> 
      <text x='25' y='2' alpha='.7' shadow='default'>Circle</text>
      
      <!-- execute one action when the checkbox is checked -->
      <!-- execute another action when the checkbox is unchecked -->
      <!-- play a sound when the checkbox is both checked and unchecked -->
      <action>
         <item type='hide' target='circle' event='uncheck' />
         <item type='show' target='circle' event='check' />
         <item type='sound_play' target='woosh' />
      </action>
   </object>    
   
   
   <!-- a similar checkbox that controls a square. This checkbox is initially unchecked -->   
   <object checked='false' offset_x='100' offset_y='150'>
      <rect x='0' y='0' width='20' height='20' fill_color='ff4400' shadow='default' state='hit' />    
      <line x1='5' y1='5' x2='15' y2='15' thickness='2' caps='round' state='checked' /> 
      <line x1='15' y1='5' x2='5' y2='15' thickness='2' caps='round' state='checked' />   
      <text x='25' y='2' alpha='.7' shadow='default'>Square</text>

      <action>
         <item type='hide' target='square' event='uncheck' />
         <item type='show' target='square' event='check' />
         <item type='sound_play' target='woosh' />
      </action>
   </object>    
 
   
   <!-- the circle object. -->
   <object id='circle'>
      <circle x='350' y='75' radius='50' fill_color='8888ff' shadow='default' />    
   </object>
   
   <!-- the square object, which is initially hidden -->
   <object id='square' hide='true'>
      <rect x='300' y='175' fill_color='8888ff' shadow='default' />    
   </object>     

   
   <filter>
      <shadow id='default' />
   </filter>
   
   <sound>
      <clip id='woosh' url="sounds/woosh.mp3" />
   </sound>
   
</slickboard>

 


<slickboard>
   
   <!-- a more elaborate checkbox with a press and over states -->
   <object checked='true' offset_x='100' offset_y='100'>
   
      <!-- the hit area is transparent and covers both the checkbox and the text (the text can be clicked too) -->
      <rect x='0' y='0' width='75' height='20' fill_alpha='0' state='hit' />    
      
      <!-- when the mouse hovers over the hit area, a glow is added under both the checkbox and text -->
      <rect x='0' y='0' width='20' height='20' glow='green' state='over' /> 
      <text x='27' y='0' color='ffffff' alpha='.7' size='16' glow='green' state='over'>Circle</text>
      
      <!-- unchecked graphic (square) -->
      <rect x='0' y='0' width='20' height='20' fill_color='ff4400' line_color='ffffff' line_thickness='2' 
            shadow='low' bevel='up' state='unchecked' /> 
      
      <!-- checked graphics (square with an X) -->
      <rect x='0' y='0' width='20' height='20' fill_color='ff4400' shadow='low' bevel='down' state='checked' />    
      <line x1='5' y1='5' x2='15' y2='15' color='666666' thickness='4' caps='round' shadow='hole' state='checked' /> 
      <line x1='15' y1='5' x2='5' y2='15' color='666666' thickness='4' caps='round' shadow='hole' state='checked' /> 
      
      <!-- when the mouse is clicked, a transparent black rectangle is added over the checkbox to darken it -->
      <rect x='0' y='0' width='20' height='20' fill_alpha='.4' state='press' /> 
      
      <!-- the checkbox text -->
      <text x='27' y='0' color='ffffff' alpha='.7' size='16' shadow='low'>Circle</text>
      
      <!-- execute one action when the checkbox is checked -->
      <!-- execute another action when the checkbox is unchecked -->
      <action>
         <item type='hide' target='circle' event='uncheck' />
         <item type='show' target='circle' event='check' />
      </action>
   </object>    
   
      
   <!-- the circle object -->
   <object id='circle'>
      <circle x='350' y='110' radius='50' fill_color='8888ff' shadow='low' bevel='up' />    
   </object>
   
   
   <filter>
      <shadow id='low' alpha='.5' blurX='10' blurY='10' />
      <shadow id='hole' alpha='.5' blurX='5' blurY='5' inner='true' />
      <bevel id='up' blurX='3' blurY='3' distance='2' highlightAlpha='.25' shadowAlpha='.5' type='full' />
      <bevel id='down' angle='315' blurX='3' blurY='3' distance='2' highlightAlpha='.25' shadowAlpha='.5' type='full' />   
      <glow id='green' color='88ff00' alpha='.75' blurX='25' blurY='25' inner='false' />   
   </filter>
   
</slickboard>

 


A checkbox does not have to always be a square with a check mark (X). This example uses a regular button combined with a checkbox behavior. Instead of a check mark (X), the button changes its text.

<slickboard>

   <!-- a regular button with a checkbox behavior -->
   <object>
   
      <!-- a standard button with over and press states -->
      <rect x='190' y='100' width='100' height='30' fill_color='ff4400' line_color='ffffff' line_thickness='3' 
            corner_tl='15' corner_tr='15' corner_bl='15' corner_br='15' bevel='margin' shadow='default' state='hit' />
      <rect x='190' y='100' width='100' height='30' fill_color='ff4400' line_color='ffffff' line_thickness='3' 
            corner_tl='15' corner_tr='15' corner_bl='15' corner_br='15' bevel='margin' glow='blue' state='over' />
      <rect x='190' y='100' width='100' height='30' fill_color='ff0044' line_color='ffffff' line_thickness='3' 
            corner_tl='15' corner_tr='15' corner_bl='15' corner_br='15' bevel='margin' state='press' />
      
      
      <!-- two button titles that have a checked and unchecked states -->
      <text x='190' y='103' width='100' align_h='center' size='16' alpha='.7' state='unchecked' shadow='default'>Show</text>   
      <text x='190' y='103' width='100' align_h='center' size='16' alpha='.7' state='checked' shadow='default'>Hide</text>
      
      
      <!-- the checkbox actions show or hide a circle -->
      <action>
         <item type='hide' target='circle' event='uncheck' />
         <item type='show' target='circle' event='check' />
      </action>
      
   </object>


   <!-- the circle object -->
   <object id='circle' hide='true'>
      <circle x='240' y='200' radius='50' fill_color='8888ff' shadow='default' bevel='margin' />    
   </object>

   
   <filter>
      <shadow id='default' />
      <bevel id='margin' blurX='10' blurY='10' distance='3' highlightAlpha='.5' shadowAlpha='.5' type='inner' />
      <glow id='blue' color='0088ff' alpha='.5' blurX='20' blurY='20' inner='false' />   
   </filter>
   
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us