caph-button provides button supporting the caph's focus and key navigation caph.focus
In button option, you can modify the focus option using focusOption such as depth, group, name, and style of button through css.
Additionally, you can set button as 'toggle button'.
When you select toggle button, you can get the $toggle variable(Button is selected or not) as a parameter of selected event handler.
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
| type | option | description |
|---|---|---|
| boolean | 'toggle' | Decide button used as toggle button or not |
| string | 'button-class' | css class name which applied to button |
| 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
var myApp = angular.module('myApp', ['caph.ui', 'caph.focus']);
myApp.controller('myController', ['$scope', 'focusController', function($scope, focusController){
$scope.button1 = {
focusOption : {
initialFocus : true
}
};
$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, $selected, $originalEvent ) {
console.log("$selected", $selected);
};
}]);html
<caph-button toggle="false" focus-option="{{button1.focusOption}}" on-focused="focus($event,$originalEvent)" on-blurred="blur($event,$originalEvent)" button-class="caph-button" >Button test2</caph-button>