dojo/_KeyNavContainer

Authors:Bill Keese since:V1.0

Contents

• dojo/_KeyNavContainer
  • Introduction
  • Examples
  • See also

Introduction

_KeyNavContainer extends dijit/_Container to provide keyboard navigation support. Specifically:

• The user can navigate using the arrow keys, either LEFT/RIGHT or UP/DOWN depending on the orientation of the widget, and HOME/END keys.
• The user can jump to any given widget by typing one or more letters of the label of that widget.

To use this mixin, call connectKeyNavHandlers() in postCreate(), listing the keys for navigating to the previous and next widgets.

Also, child widgets must implement a focus() method.

Examples

require([
    "dojo/_base/declare", "dojo/keys", "dojo/parser", "dojo/query",
    "dijit/_WidgetBase", "dijit/_KeyNavContainer", "dojo/domReady!"
], function(declare, keys, parser, query,  _WidgetBase, _KeyNavContainer){
    MyMenu = declare([_WidgetBase, _KeyNavContainer], {
        buildRendering: function(){
            // This is a behavioral widget so we'll just use the existing DOM.
            // Alternately we could have a template.
            this.inherited(arguments);

            // Set containerNode.   Usually this is set in the template.
            this.containerNode = this.domNode;
        },

        postCreate: function(){
            // Don't forget the this.inherited() call
            this.inherited(arguments);

            // Setup keyboard navigation
            this.connectKeyNavHandlers([keys.UP_ARROW], [keys.DOWN_ARROW]);

            // Set tabIndex on the container <table> node, since by default it's not tab navigable
            this.domNode.setAttribute("tabIndex", "0");
        }
    });

    MyMenuItem = declare(_WidgetBase, {
        postCreate: function(){
            this.domNode.setAttribute("tabIndex", "-1");
        },
        focus: function(){
            this.domNode.focus();
        }
    });

    parser.parse();
});

require([ "dojo/_base/declare", "dojo/keys", "dojo/parser", "dojo/query", "dijit/_WidgetBase", "dijit/_KeyNavContainer", "dojo/domReady!" ], function(declare, keys, parser, query, _WidgetBase, _KeyNavContainer){ MyMenu = declare([_WidgetBase, _KeyNavContainer], { buildRendering: function(){ // This is a behavioral widget so we'll just use the existing DOM. // Alternately we could have a template. this.inherited(arguments); // Set containerNode. Usually this is set in the template. this.containerNode = this.domNode; }, postCreate: function(){ // Don't forget the this.inherited() call this.inherited(arguments); // Setup keyboard navigation this.connectKeyNavHandlers([keys.UP_ARROW], [keys.DOWN_ARROW]); // Set tabIndex on the container <table> node, since by default it's not tab navigable this.domNode.setAttribute("tabIndex", "0"); } }); MyMenuItem = declare(_WidgetBase, { postCreate: function(){ this.domNode.setAttribute("tabIndex", "-1"); }, focus: function(){ this.domNode.focus(); } }); parser.parse(); });

table, td {
    border: 1px solid gray;
}
td:focus {
    background-color: yellow;
}

table, td { border: 1px solid gray; } td:focus { background-color: yellow; }

<table data-dojo-type="MyMenu">
        <tr><td data-dojo-type="MyMenuItem">apple</td></tr>
        <tr><td data-dojo-type="MyMenuItem">banana</td></tr>
        <tr><td data-dojo-type="MyMenuItem">orange</td></tr>
        <tr><td data-dojo-type="MyMenuItem">pear</td></tr>
        <tr><td data-dojo-type="MyMenuItem">grapes</td></tr>
        <tr><td data-dojo-type="MyMenuItem">strawberry</td></tr>
</table>

<table data-dojo-type="MyMenu"> <tr><td data-dojo-type="MyMenuItem">apple</td></tr> <tr><td data-dojo-type="MyMenuItem">banana</td></tr> <tr><td data-dojo-type="MyMenuItem">orange</td></tr> <tr><td data-dojo-type="MyMenuItem">pear</td></tr> <tr><td data-dojo-type="MyMenuItem">grapes</td></tr> <tr><td data-dojo-type="MyMenuItem">strawberry</td></tr> </table>

See also

• dijit/_KeyNavMixin
• dijit/_Container

Table of Contents

• dojo/_KeyNavContainer
  • Introduction
  • Examples
  • See also