The Gallery is deprecated. No new Gallery components may be submitted, and modifying existing components is disabled. For more information please read the Gallery Deprecation blog post. This is a static snapshot of the Gallery for archive purposes.
See 19 more by this user. Created: 01/5/11
Last CDN Push: 01/18/11
Build Tag: gallery-2011.01.18-21-05
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0
Free for use.
The event passed to subscribers includes a property e.direction with value in ('n', 's', 'e', 'w', 'nw', 'ne', 'sw', 'se'). The event repeats as long as an arrow key remains depressed, and preventing the event with e.preventDefault() will stop native page scrolling.
This event first saw life in gallery-event-nav-keys, then was explored a bit more in a YUI Event Utility example. The example is a simplified form of this one.
Here's an improved version of the Event Utility example "Creating an Arrow Event for DOM Subscription". The example synthetic arrow event supports only four directions.
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
// Use this in place of the current Event Utility 'arrow' example code
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2011.01.18-21-05'
}).use('gallery-event-arrow', function(Y) {
var robotA = Y.one('#A'),
robotB = Y.one('#B');
robotA.setData('x', parseInt(robotA.getStyle('left'), 10));
robotA.setData('y', parseInt(robotA.getStyle('top'), 10));
robotB.setData('x', parseInt(robotB.getStyle('left'), 10));
robotB.setData('y', parseInt(robotB.getStyle('top'), 10));
function move(e) {
// to prevent page scrolling
e.preventDefault();
var xy = this.getData();
switch (e.direction) {
case 'n': xy.y -= 10; break;
case 's': xy.y += 10; break;
case 'w': xy.x -= 10; break;
case 'e': xy.x += 10; break;
case 'nw': xy.y -= 10; xy.x -= 10; break;
case 'ne': xy.y -= 10; xy.x += 10; break;
case 'sw': xy.y += 10; xy.x -= 10; break;
case 'se': xy.y += 10; xy.x += 10; break;
}
this.transition({
top : (xy.y + 'px'),
left: (xy.x + 'px'),
duration: .2
});
}
robotA.on("arrow", move);
robotB.on("arrow", move);
// Or via delegation
Y.one('#demo').delegate('arrow', move, '.robot');
});
Subject | Author | Date |
---|---|---|
trying to get a simple example to work... | Andrew Wooldridge | 03/23/11 |
Re: trying to get a simple example to work... | Andrew Wooldridge | 03/24/11 |
Re: trying to get a simple example to work... | Andrew Wooldridge | 03/24/11 |
Re: trying to get a simple example to work... | Luke Smith | 03/25/11 |
Advice on key "holding" issue? | Andrew Wooldridge | 03/28/11 |
All code on this site is licensed under the BSD License unless stated otherwise.