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

 < previousnext > 

 

Radio Button

 

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


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

      


Description

Radio buttons are a group of buttons, only one of which can be selected at any given time. By selecting one radio button, the other buttons in the same group become deselected.

To create multiple radio buttons that work as a group, simply place their objects on the same level (the parent of all radio button objects must be either the board itself or one other object).

A radio button is initially deselected, unless specified otherwise by adding the selected attribute to its object tag.

A radio button 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.

  • selected: Display this graphic element only if the radio button is selected.

  • deselected: Display this graphic element only if the radio button is deselected.

  • selected_over: Display this graphic element only if the radio button is selected and the mouse hovers over it.

  • selected_press: Display this graphic element only if the radio button is selected and the mouse is pressed over it.

  • deselected_over: Display this graphic element only if the radio button is deselected and the mouse hovers over it.

  • deselected_press: Display this graphic element only if the radio button is deselected and the mouse is pressed over it.

  • idle: Display this graphic only when the mouse is not over it, whether the radio button is selected or not.

  • over: Display this graphic only when the mouse hovers over it, whether the radio button is selected or not.

  • press: Display this graphic only when the mouse is pressed over it, whether the radio button is selected or not.

 

Example

<slickboard>
   
   <!-- a simple radio button that controls a circle. This radio button is initially selected -->
   <object selected='true' offset_x='100' offset_y='100'>
      <circle radius='10' fill_color='ff4400' shadow='default' state='hit' />    
      <circle radius='5' state='selected' />    
      <text x='15' y='-8' alpha='.7'>Circle</text>
      
      <!-- execute 2 action when the radio button is selected -->
      <action>
         <item type='show' target='circle' />
         <item type='hide' target='square' />
      </action>
   </object>    
   
   
   <!-- a similar radio button that controls a square. This radio button is initially unselected -->   
   <object selected='false' offset_x='100' offset_y='150'>
      <circle radius='10' fill_color='ff4400' shadow='default' state='hit' />    
      <circle radius='5' state='selected' />    
      <text x='15' y='-8' alpha='.7'>Square</text>

      <action>
         <item type='show' target='square' />
         <item type='hide' target='circle' />
      </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>

</slickboard>

 


<slickboard>
   
   <!-- two blue radio buttons enclosed by an object to make them function as a group --> 
   <object>
   
      <object selected='true' offset_x='100' offset_y='100'>
         <circle radius='10' fill_color='8888ff' shadow='default' state='hit' />    
         <circle radius='5' state='selected' />    
         <text x='15' y='-8' alpha='.7'>Day</text>
      </object>    
   
      <object selected='false' offset_x='100' offset_y='135'>
         <circle radius='10' fill_color='8888ff' shadow='default' state='hit' />    
         <circle radius='5' state='selected' />    
         <text x='15' y='-8' alpha='.7'>Night</text>
      </object>    
 
   </object>
   
   
   
   <!-- three red radio buttons enclosed by another object to make them function as a seperate group -->   
   <object offset_x='200'>

      <object selected='true' offset_x='100' offset_y='100'>
         <circle radius='10' fill_color='ff4400' shadow='default' state='hit' />    
         <circle radius='5' state='selected' />    
         <text x='15' y='-8' alpha='.7'>One</text>
      </object>    
   
   
      <object selected='false' offset_x='100' offset_y='135'>
         <circle radius='10' fill_color='ff4400' shadow='default' state='hit' />    
         <circle radius='5' state='selected' />    
         <text x='15' y='-8' alpha='.7'>Two</text>
      </object>   
   
      <object selected='false' offset_x='100' offset_y='170'>
         <circle radius='10' fill_color='ff4400' shadow='default' state='hit' />    
         <circle radius='5' state='selected' />    
         <text x='15' y='-8' alpha='.7'>Three</text>
      </object>    
 
   </object>
  
   
   <filter>
      <shadow id='default' />
   </filter>

</slickboard>

 


<slickboard>
   
   <!-- more elaborate radio buttons with press and over states -->
   <object selected='true' offset_x='200' offset_y='100'>
   
      <!-- the hit area is transparent and covers both the radio button and the text (the text can be clicked too) -->
      <rect x='-10' y='-10' width='55' height='20' fill_alpha='0' state='hit' /> 
      
      <!-- when the mouse hovers over the hit area, a glow is added under both the radio button and text -->
      <circle radius='10' glow='green' state='over' /> 
      <text x='15' y='-8' alpha='.7' glow='green' state='over'>One</text>
      
      <!-- deselected graphic (circle) -->
      <circle radius='10' fill_color='ff4400' line_color='ffffff' line_thickness='2' bevel='up' state='deselected' /> 
      
      <!-- selected graphics (circle with a central spot) -->      
      <circle radius='10' fill_color='ff4400' bevel='down' state='selected' /> 
      <circle radius='5' fill_alpha='.75' state='selected' />
            
      <!-- when the mouse is clicked, a transparent black circle is added over the radio button to darken it -->
      <circle radius='10' fill_alpha='.4' state='press' /> 
         
      <!-- the radio button text -->          
      <text x='15' y='-8' alpha='.7' shadow='soft'>One</text>
      
   </object>   
   
   
   <!-- a similar second radio button -->
   <object offset_x='200' offset_y='140'>
      <rect x='-10' y='-10' width='55' height='20' fill_alpha='0' state='hit' /> 
      <circle radius='10' glow='green' state='over' /> 
      <text x='15' y='-8' alpha='.7' glow='green' state='over'>Two</text>
      <circle radius='10' fill_color='ff4400' line_color='ffffff' line_thickness='2' bevel='up' state='deselected' /> 
      <circle radius='10' fill_color='ff4400' bevel='down' state='selected' /> 
      <circle radius='5' fill_alpha='.75' state='selected' />
      <circle radius='10' fill_alpha='.4' state='press' /> 
      <text x='15' y='-8' alpha='.7' shadow='soft'>Two</text>
   </object>   
   
   
   <filter>
      <shadow id='soft' alpha='.2' />
      <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>

 

 < previousnext > 


Copyright © 2010-2017, maani.us