• Register
  • Log In
  • Home
  • Quick Start
    • Configurator
    • Download YUI 3
  • Documentation
    • User Guides
    • Examples
    • API Docs
    • Environments
    • Tutorials
  • Community
    • Gallery
    • Blog
    • Forums
    • YUI Theater
    • Calendar
  • Contribute
    • YUI on GitHub »
    • File a Ticket
    • View Tickets
    • Dashboard
  • Other Projects
    • Shifter »
    • Yogi »
    • YUI 2
    • YUI Doc »
    • YUI Test
    • YUI Website
    • YUI Compressor »
    • YUI Builder »
    • YUI PHP Loader
    • Grid Builder »
    • Skin Builder »
  • YUI
  • >
  • Community
  • >
  • Gallery

Gallery

Modules

  • Home
  • Featured
  • Popular
  • New
  • All

Documentation

  • Yogi Documentation
  • Shifter Documentation
  • Developer Guide
  • Module Setup

Tag Cloud

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.

    • Tags:
    • event
    • lsmith
    • synthetic
    • key
    • keyboard
    • accessibility
    • Download
    • Docs
    • Homepage
    • Bugs
    • Source
    • Example
    • Forum
    • History

    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.

    © 2006-2013 Yahoo! Inc. All rights reserved.
    All code on this site is licensed under the BSD License unless stated otherwise.
    About This Site · Security Contact Info