YUI Library Home

YUI Library Examples: Container Family: Implementing Container Keyboard Shortcuts with KeyListener

Container Family: Implementing Container Keyboard Shortcuts with KeyListener

The KeyListener class integrates with the Container family allowing you to specify specific keys or key combinations to show and hide your containers.

panel1:

Using the Panel's "keylistener" Property

The KeyListener class provides an easy way to listen for single or compound key events and fire the associated handler function. KeyListener also provides enable and disable methods that dynamically attach and detach DOM listeners to the associated element. The container classes (Panel and its subclasses) take advantage of KeyListeners using the "keylisteners" property. Any associated listeners are enabled when the Panel is shown, and disabled when the Panel is hidden.

In this tutorial, we will two KeyListeners: one that will hide a Panel when the escape key is pressed and one that will show the Panel when the user presses Ctrl+Y. First, we'll create a basic Panel and a KeyListener to enable when the Panel is visible.

1YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { xy:[150,100], visible: false } ); 
2 
3var kl = new YAHOO.util.KeyListener(document, { keys:27 },                               
4                                              { fn:YAHOO.example.container.panel1.hide, 
5                                                scope:YAHOO.example.container.panel1, 
6                                                correctScope:true } ); 
7 
8YAHOO.example.container.panel1.cfg.queueProperty("keylisteners", kl); 
view plain | print | ?

There are several important things to note about the KeyListener and how it works with the Panel. The first argument of KeyListener's constructor is the element that the DOM event should be attached to. In both cases in this tutorial, the element will be document because we want our key presses to be registered document-wide, regardless of the focus.

The second argument is an object literal containing data defining which keys to listen for. The "keys" argument can either be a number or an array of numbers representing the character code(s) to listen for. This literal also accepts boolean values for "ctrl", "alt", and "shift". We will use the "ctrl" argument in our second KeyListener.

Finally, the third argument defines the handler to be executed when a keypress is detected. This is an object literal as well and it contains three name/value pairs: "fn" represents the function to execute, "scope" represents the scope of the function's execution, and "correctScope", if true, will redefine "this" in your handler to refer the "scope" object.

After defining the KeyListener, we set it into the "keylisteners" property using queueProperty, which indicates that the KeyListeners will be applied to the Panel after it has been rendered.

Our next KeyListener will be created independently of the Panel. It will react to the "Y" key, which has a character code of 89, with the "Control" key depressed at the same time. After instantiating the listener, we can enable it by calling enable directly. Once the listener has been abled, pressing Ctrl+Y should cause the Panel to be displayed.

1var kl2 = new YAHOO.util.KeyListener(document, { ctrl:true, keys:89 },  
2                                               { fn:YAHOO.example.container.panel1.show,  
3                                                 scope:YAHOO.example.container.panel1, 
4                                                 correctScope:true } ); 
5 
6kl2.enable(); 
view plain | print | ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

Logger Console

INFO 1067ms (+0) 4:44:39 AM:

Event

iframe->1: Subscriber { obj: Panel panel1, overrideContext: no }

INFO 1067ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'iframe', context: Panel panel1, args: false, subscribers: 1

INFO 1067ms (+0) 4:44:39 AM:

Config

Firing Config event: iframe=false

INFO 1067ms (+0) 4:44:39 AM:

Config

setProperty: xy=350,330

INFO 1067ms (+0) 4:44:39 AM:

Config

setProperty: y=330

INFO 1067ms (+3) 4:44:39 AM:

Config

setProperty: x=350

INFO 1064ms (+1) 4:44:39 AM:

Event

textResize->2: Subscriber { obj: [object HTMLDivElement], overrideContext: Panel panel1 }

INFO 1063ms (+0) 4:44:39 AM:

Event

textResize->1: Subscriber { obj: Panel panel1, overrideContext: true }

INFO 1063ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'textResize', context: [object Window], args: , subscribers: 2

INFO 1063ms (+0) 4:44:39 AM:

global

initevent fired before it was created.

INFO 1063ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'appendTo', context: Button loggerLink

INFO 1063ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'dblclick', context: Button loggerLink

INFO 1063ms (+0) 4:44:39 AM:

global

onclickChangeevent fired before it was created.

INFO 1063ms (+0) 4:44:39 AM:

global

beforeOnclickChangeevent fired before it was created.

INFO 1063ms (+0) 4:44:39 AM:

global

onclickChangeevent fired before it was created.

INFO 1063ms (+0) 4:44:39 AM:

global

beforeOnclickChangeevent fired before it was created.

INFO 1063ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'click', context: Button loggerLink

INFO 1063ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'mouseup', context: Button loggerLink

INFO 1063ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'mousedown', context: Button loggerLink

INFO 1063ms (+2) 4:44:39 AM:

Event

Creating CustomEvent: 'mouseover', context: Button loggerLink

INFO 1061ms (+0) 4:44:39 AM:

Event

DOMReady->3: Subscriber { obj: null, overrideContext: no }

INFO 1061ms (+0) 4:44:39 AM:

Event

DOMReady->2: Subscriber { obj: null, overrideContext: no }

INFO 1061ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'enabled', context: [object Window], args: [object Object], subscribers: 0

INFO 1061ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'disabled', context: [object Window]

INFO 1061ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'enabled', context: [object Window]

INFO 1061ms (+1) 4:44:39 AM:

Event

Creating CustomEvent: 'keyPressed', context: [object Window]

INFO 1060ms (+0) 4:44:39 AM:

Event

render->2: Subscriber { obj: null, overrideContext: no }

INFO 1060ms (+0) 4:44:39 AM:

Event

iframe->1: Subscriber { obj: Panel panel1, overrideContext: no }

INFO 1060ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'iframe', context: Panel panel1, args: false, subscribers: 1

INFO 1060ms (+0) 4:44:39 AM:

Config

Firing Config event: iframe=false

INFO 1060ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'move', context: Panel panel1, args: 350,330, subscribers: 0

INFO 1060ms (+0) 4:44:39 AM:

Config

Config event queue: iframe=false,

INFO 1060ms (+0) 4:44:39 AM:

Config

queueProperty: iframe=undefined

INFO 1060ms (+0) 4:44:39 AM:

Config

setProperty: xy=350,330

INFO 1060ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'beforeMove', context: Panel panel1, args: 350,330, subscribers: 0

INFO 1060ms (+0) 4:44:39 AM:

Config

setProperty: y=330

INFO 1060ms (+0) 4:44:39 AM:

Config

setProperty: x=350

INFO 1060ms (+0) 4:44:39 AM:

Event

y->1: Subscriber { obj: Panel panel1, overrideContext: no }

INFO 1060ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'y', context: Panel panel1, args: 330, subscribers: 1

INFO 1060ms (+0) 4:44:39 AM:

Config

Firing Config event: y=330

INFO 1060ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'move', context: Panel panel1, args: 350,330, subscribers: 0

INFO 1060ms (+0) 4:44:39 AM:

Config

Config event queue: y=330, iframe=false,

INFO 1060ms (+0) 4:44:39 AM:

Config

queueProperty: iframe=undefined

INFO 1060ms (+1) 4:44:39 AM:

Config

setProperty: xy=350,330

INFO 1059ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'beforeMove', context: Panel panel1, args: 350,330, subscribers: 0

INFO 1059ms (+0) 4:44:39 AM:

Config

setProperty: y=330

INFO 1059ms (+0) 4:44:39 AM:

Config

setProperty: x=350

INFO 1059ms (+0) 4:44:39 AM:

Event

x->1: Subscriber { obj: Panel panel1, overrideContext: no }

INFO 1059ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'x', context: Panel panel1, args: 350, subscribers: 1

INFO 1059ms (+1) 4:44:39 AM:

Config

Firing Config event: x=350

INFO 1058ms (+0) 4:44:39 AM:

Event

hide->1: Subscriber { obj: KeyListener [27] undefined, overrideContext: true }

INFO 1058ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'hide', context: Panel panel1, args: , subscribers: 1

INFO 1058ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'beforeHide', context: Panel panel1, args: , subscribers: 0

INFO 1058ms (+0) 4:44:39 AM:

Event

visible->1: Subscriber { obj: Panel panel1, overrideContext: no }

INFO 1058ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'visible', context: Panel panel1, args: false, subscribers: 1

INFO 1058ms (+0) 4:44:39 AM:

Config

Firing Config event: visible=false

INFO 1058ms (+0) 4:44:39 AM:

Event

keylisteners->1: Subscriber { obj: Panel panel1, overrideContext: no }

INFO 1058ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'keylisteners', context: Panel panel1, args: KeyListener [27] undefined, subscribers: 1

INFO 1058ms (+0) 4:44:39 AM:

Config

Firing Config event: keylisteners=KeyListener [27] undefined

INFO 1058ms (+0) 4:44:39 AM:

Event

fixedcenter->1: Subscriber { obj: Panel panel1, overrideContext: no }

INFO 1058ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'fixedcenter', context: Panel panel1, args: false, subscribers: 1

INFO 1058ms (+0) 4:44:39 AM:

Config

Firing Config event: fixedcenter=false

INFO 1058ms (+0) 4:44:39 AM:

Config

Config event queue: fixedcenter=false, keylisteners=KeyListener [27] undefined, visible=false, x=350, y=330, iframe=false,

INFO 1058ms (+0) 4:44:39 AM:

Config

queueProperty: iframe=undefined

INFO 1058ms (+0) 4:44:39 AM:

Event

width->1: Subscriber { obj: Panel panel1, overrideContext: no }

INFO 1058ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'width', context: Panel panel1, args: 250px, subscribers: 1

INFO 1058ms (+0) 4:44:39 AM:

Config

Firing Config event: width=250px

INFO 1058ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'move', context: Panel panel1, args: 350,330, subscribers: 0

INFO 1058ms (+0) 4:44:39 AM:

Config

Config event queue: width=250px, fixedcenter=false, keylisteners=KeyListener [27] undefined, visible=false, x=350, y=330, iframe=false,

INFO 1058ms (+0) 4:44:39 AM:

Config

queueProperty: iframe=undefined

IFRA 1058ms (+0) 4:44:39 AM:

global

xy: 350,330

INFO 1058ms (+1) 4:44:39 AM:

Event

Firing CustomEvent: 'beforeMove', context: Panel panel1, args: 350,330, subscribers: 0

INFO 1057ms (+0) 4:44:39 AM:

Config

Config event queue: width=250px, fixedcenter=false, keylisteners=KeyListener [27] undefined, visible=false, x=350, y=330, iframe=false,

INFO 1057ms (+0) 4:44:39 AM:

Config

queueProperty: y=330

INFO 1057ms (+0) 4:44:39 AM:

Config

setProperty: y=330

INFO 1057ms (+0) 4:44:39 AM:

Config

Config event queue: width=250px, fixedcenter=false, keylisteners=KeyListener [27] undefined, visible=false, x=350, iframe=false,

INFO 1057ms (+0) 4:44:39 AM:

Config

queueProperty: x=350

INFO 1057ms (+0) 4:44:39 AM:

Config

setProperty: x=350

INFO 1057ms (+0) 4:44:39 AM:

Event

xy->1: Subscriber { obj: Panel panel1, overrideContext: no }

INFO 1057ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'xy', context: Panel panel1, args: 350,330, subscribers: 1

INFO 1057ms (+0) 4:44:39 AM:

Config

Firing Config event: xy=350,330

INFO 1057ms (+0) 4:44:39 AM:

Event

close->1: Subscriber { obj: Panel panel1, overrideContext: no }

INFO 1057ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'close', context: Panel panel1, args: true, subscribers: 1

INFO 1057ms (+0) 4:44:39 AM:

Config

Firing Config event: close=true

INFO 1057ms (+0) 4:44:39 AM:

Config

setProperty: strings=[object Object]

INFO 1057ms (+0) 4:44:39 AM:

Event

strings->1: Subscriber { obj: Panel panel1, overrideContext: no }

INFO 1057ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'strings', context: Panel panel1, args: [object Object], subscribers: 1

INFO 1057ms (+0) 4:44:39 AM:

Config

Firing Config event: strings=[object Object]

INFO 1057ms (+0) 4:44:39 AM:

Config

setProperty: zindex=0

INFO 1057ms (+0) 4:44:39 AM:

Event

zindex->1: Subscriber { obj: Panel panel1, overrideContext: no }

INFO 1057ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'zindex', context: Panel panel1, args: , subscribers: 1

INFO 1057ms (+0) 4:44:39 AM:

Config

Firing Config event: zindex=null

INFO 1057ms (+0) 4:44:39 AM:

Event

modal->1: Subscriber { obj: Panel panel1, overrideContext: no }

INFO 1057ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'modal', context: Panel panel1, args: false, subscribers: 1

INFO 1057ms (+1) 4:44:39 AM:

Config

Firing Config event: modal=false

INFO 1056ms (+0) 4:44:39 AM:

Event

underlay->1: Subscriber { obj: Panel panel1, overrideContext: no }

INFO 1056ms (+0) 4:44:39 AM:

Event

Firing CustomEvent: 'underlay', context: Panel panel1, args: shadow, subscribers: 1

INFO 1056ms (+0) 4:44:39 AM:

Config

Firing Config event: underlay=shadow

INFO 1056ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'dragDropEvent', context: DD panel1_c

INFO 1056ms (+61) 4:44:39 AM:

Event

Creating CustomEvent: 'b4DragDropEvent', context: DD panel1_c

INFO 995ms (+1) 4:44:39 AM:

Event

Creating CustomEvent: 'dragDropEvent', context: DD loggerDiv

INFO 994ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'b4DragDropEvent', context: DD loggerDiv

INFO 994ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'dragOverEvent', context: DD loggerDiv

INFO 994ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'b4DragOverEvent', context: DD loggerDiv

INFO 994ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'dragEnterEvent', context: DD loggerDiv

INFO 994ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'dragOutEvent', context: DD loggerDiv

INFO 994ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'b4DragOutEvent', context: DD loggerDiv

INFO 994ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'invalidDropEvent', context: DD loggerDiv

INFO 994ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'b4DragEvent', context: DD loggerDiv

INFO 994ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'dragEvent', context: DD loggerDiv

INFO 994ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'endDragEvent', context: DD loggerDiv

INFO 994ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'b4EndDragEvent', context: DD loggerDiv

INFO 994ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'startDragEvent', context: DD loggerDiv

INFO 994ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'b4StartDragEvent', context: DD loggerDiv

INFO 994ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'mouseUpEvent', context: DD loggerDiv

INFO 994ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'b4MouseDownEvent', context: DD loggerDiv

INFO 994ms (+11) 4:44:39 AM:

Event

Creating CustomEvent: 'mouseDownEvent', context: DD loggerDiv

INFO 983ms (+0) 4:44:39 AM:

Event

Creating CustomEvent: 'windowResize', context: [object Window]

INFO 983ms (+1) 4:44:39 AM:

Event

Creating CustomEvent: 'windowScroll', context: [object Window]

INFO 982ms (+982) 4:44:39 AM:

Event

Creating CustomEvent: 'textResize', context: [object Window]

INFO 0ms (+0) 4:44:38 AM:

global

Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

Container Family Examples:

More Container Family Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings