caph-checkbox provides checkbox supporting the caph's focus and key navigation caph.focus
With caph-checkbox, you can set the text and checkbox.
Caph checkbox is set default action, you can change style or action through option and event handler
When checkbox is focused or blurred, 'focused' class is attached or detached automatically
Also, when checked the 'checked' class attached at the checkbox. You can set focus/blur/check action easily through css class.
Details about available
You can set event handler action like example.
| type | option | description |
|---|---|---|
| object | 'focus-option' | focus name, focus group, disabled, initialfocus.... |
| string | 'checkbox-class' | Default checkbox class which applied in unchecked checkbox. When checked, 'checked' css class added automatically. |
| boolean | 'checked' | Set the initial status of checkbox (checked, unchecked) |
| function | 'on-focused' | Set the event handler when Checkbox is focused. Checkbox passes two parameters '$event' and '$originalEvent' |
| function | 'on-blurred' | Set the event handler when Checkbox is blurred. Checkbox passes two parameters '$event' and '$originalEvent' |
| function | 'on-selected' | Set the event handler when Checkbox is selected. Checkbox passes three parameters '$event', '$originalEvent' ,and '$checked'. '$checked' variable notifies checkbox is checked or not. |
Example
js
var myApp = angular.module('myApp', ['caph.ui', 'caph.focus']);
myApp.controller('myController', ['$scope', 'focusController', function($scope, focusController){
$scope.checkbox = {
//checked, focusOption, initial css
focusOption : {
name : '0716'
},
checkboxClass :'caph-checkbox',
checked : ''
};
$scope.focus = function($event,$originalEvent) {
$($event.currentTarget).css({
border : '1px solid red'
});
};
$scope.blur = function($event,$originalEvent) {
$($event.currentTarget).css({
border : ''
});
};
$scope.selectIt = function($event, $checked, $originalEvent ) {
//$checked variable notify you checkbox is checked or not
};
}]);html
<caph-checkbox checked="false" on-blurred="blur($event, $originalEvent)" on-focused="focus($event, $originalEvent)" on-selected="selectIt($event, $checked, $originalEvent)"><span style="font-size:24px">check</span></caph-checkbox>