caph-radioButton provides radiobutton supporting the caph's focus and key navigation caph.focus
In radioButton option, you can modify the focus option using focusOption such as depth, group, name, and style of button through css.
If caph button is focused or blurred, 'focused' css class attached and detached automatically.
You can set the focus class using 'focused'. Also you can set the event handler action through handler like example.
Details about the focus option or event handling, please check the caph.focus
You can set the radiobutton group through 'group' of options. 'group' is same with 'name' of . Only one radiobutton can be selected in same group. If group isn't set, the group is set to 'default' group. Value which radiobutton selected or not can be checked by 'selected' attribute. 'selected' attribute and 'selected' class are automatically attached and detached followed by selecting radiobutton or not.
| type | option | description |
|---|---|---|
| string | 'selected' | Indicates this radiobutton is selected or not. When selected added at the radiobutton, radiobutton is selected. |
| string | 'radiobutton-class' | css class name which applied to radiobutton |
| string | 'group' | group name of the radio button group. Group is same with the name of 'input=radio' |
| object | 'focus-option' | focus name, focus group, disabled, initialfocus.... |
| function | 'on-focused' | Set the event handler when button is focused. Button passes two parameters '$event' and '$originalEvent' |
| function | 'on-blurred' | Set the event handler when button is blurred. Button passes two parameters '$event' and '$originalEvent' |
| function | 'on-selected' | Set the event handler when button is selected. Button passes two parameters '$event' and '$originalEvent'. In toggle button, selected indicating selected or not is passed as third parameter additionally. |
Example
js
$('#radioButton').caphRadiobutton({
onFocused :function(event,originalEvent){
//console.log('originalEvent',originalEvent);
},
onBlurred:function(event,originalEvent){
// console.log("onBlurred");
},
selected : true,
group : 'group1'
});html
<div id="radioButton">Radio1</div>