Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Nav keys (gallery-event-nav-keys) on cdn

Last Updated: 03/25/11

+ 1 -

Luke Smith

YUI Contributor

See 19 more by this user.

Created: 02/26/10
Last CDN Push: 02/2/11
Build Tag: gallery-2011.02.02-21-07
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0
Free for use.

Using the synthetic event API, creates custom DOM events for subscribing to keydown that reports a specific keyCode in the event. The end result is something like node.on('enter', function (e) { MyApp.sendData(); e.preventDefault(); });

Arrow key events are presented as individual events "up", "down", "left", and "right". So node.on('left', function (e) { /* left arrow was pressed */ });

These events are mainly to simplify adding keyboard navigation support for accessibility and for rapid prototyping. They also (hopefully) have the effect of making the code a bit more human readable.

Increase or decrease a number in an input using the arrow keys. Bump the value up or down by increments of 10 using the pageUp and down and set it to 0 by hitting escape.

Code Sample

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.02.02-21-07'
}).use('gallery-event-nav-keys', function(Y) {
 
    Y.one( "#some-input" ).on( {
        up      : function () { this.set( "value", this.get( "value" ) + 1 ); },
        down    : function () { this.set( "value", this.get( "value" ) - 1 ); },
        pageUp  : function () { this.set( "value", this.get( "value" ) + 10 ); },
        pageDown: function () { this.set( "value", this.get( "value" ) - 10 ); },
        esc     : function () { this.set( "value", "0" ); }
    } );
 
});

Forum Posts

No forum posts for this module.