Name

Description

SK.UI.Properties.RadioGroup(
   form_element,
   radio_group_name
)

Constructor

The library should be used within the property sheet of an application. Its intended to make certain radio buttons appear as clickable images instead of the native browser look. For a group of radio buttons it displays all visuals on a horizontal stripe. 

For this purpose a group of radio buttons should be specified as normal HTML code (without any text labels). You can set "onclick" events on the radio too. It will work seamlessly when the user clicks on the images.

The following attributes can be extra set on the radio button to customize the look of the radio:

- appearance — a CSS class that will be set to the visual that will represent the radio button. Usually it should contain width, height and background-url.

- title — will appear under the visual

- description — will appear under the stripe of visuals when the user clicks on the image

- toggle — DOM element ID that will be displayed (the CSS "display" attribute will be set to "block") when a user clicks on the image and will hide all the rest. NOTE: All such "toggle" elements should be hidden by default. 


The radio button that has a "clicked" attribute will be pre-selected after the library finishes its work.


 

Examples
A radio buttons group that displays a title below the visual, a description and toggles DOM elements.

<!-- Pretend we are inside an application property sheet -->
<script type="text/javascript">
   $( window ).addEvent( 'load', function( ) {
      var mgr = new SK.UI.Properties( );
      mgr.addEvent( "afterinit", function( ) {
         new SK.UI.Properties.RadioGroup( this.getForm( ), 'property__Style' );
      }.bind( mgr ) );
      mgr.init( );
   });
</script>

<!-- The radio buttons -->
<input type="radio" name="property__Style" title="Light" value="light" appearance="style light" description="Displays a bright colored interface" toggle="light_screenshot">

<input type="radio" name="property__Style" title="Dark" value="dark" appearance="style dark" description="Displays a much darker colored interface" toggle="dark_screenshot">

<!-- The CSS -->
<style type="text/css">
.style {
   width: 50px;
   height: 50px;
}

.style.light {
   background-color: #CCCCCC;
}

.style.dark {
   background-color: #555555;
}
</style>


<!-- The toggled layers -->
<div id="light_screenshot" style="display: none;">
   Light screenshot here...
</div>

<div id="dark_screenshot" style="display: none;">
   Dark screenshot here...
</div>