caphButton

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

Example

js

 $('#button').caphButton({
     onFocused :function(event,originalEvent){
       // add the action you want in Focused
         },
     onBlurred:function(event,originalEvent){
     // add the action you want in Blurred
     },
     focusOption: {
         name :"testtest",
         depth : 0,
         group : "testgroup",
         disabled : false,
         initialFocus: true
         },
     toggle : true,
     onSelected :function(event,originalEvent,selected){
         //In toggle button, 'selected' is passed additionally. Through selected , you can check toggle button is selected or not.
         //In normal button, 'selected' isn't passed to select event handler
     }
});

html

<div id="button">Sample Button</div>