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.
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.
| 1 | YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { xy:[150,100], visible: false } ); |
| 2 | |
| 3 | var 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 | |
| 8 | YAHOO.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.
| 1 | var 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 | |
| 6 | kl2.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.
Container Family Examples:
- The Module Control
- Creating and Positioning an Overlay
- Simple Tooltip Example
- One Tooltip, Many Context Elements
- Simple Panel Example
- Skinning a Panel with Custom CSS: Introduction
- Skinning a Panel with Custom CSS: Advanced
- Creating a Modal "Loading" Panel
- Creating a Resizable Panel
- Dialog Quickstart Example
- SimpleDialog Quickstart Example
- Using ContainerEffect Transitions
- Using the Overlay Manager to Manage Multiple Panels
- Implementing Container Keyboard Shortcuts with KeyListener
- Using the Button ARIA Plugin (included with examples for Button Control)
- Using the Container ARIA Plugin
- Using A Menu Button To Replace A <select> Element (included with examples for Button Control)
- Replacing the content of a Button's Menu (included with examples for Button Control)
- Example of Color Picker Built in a Dialog via JavaScript (included with examples for Color Picker Control)
- Layout inside a resizable Panel (included with examples for Layout Manager)
- Editor in a Dialog Control (included with examples for Rich Text Editor)
- Menu Buttons (included with examples for Button Control)
- Popup Calendar - Advanced (included with examples for Calendar Control)
- Showing, Hiding, and Reordering Columns. (included with examples for DataTable Control)
- Split Buttons (included with examples for Button Control)
- Simple Calendar Menu Button (included with examples for Button Control)
- Calendar Menu Button with Date on Button Face (included with examples for Button Control)
- Color Picker Button (included with examples for Button Control)
- Fixed Width Menu Button (included with examples for Button Control)
- OS-Style Programs Menu (included with examples for Menu Family)
- Application Menubar (included with examples for Menu Family)
- Slider Button (included with examples for Button Control)
- Complex Application (included with examples for Layout Manager)
More Container Family Resources:
- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)
- Yahoo! UI Library
- Home (external)
- YUIBlog (external)
- YUI Discussion Forum (external)
- YUI on GitHub
- API Documentation
- Functional Examples
- YUI Theater (external)
- YUI License (external)
- YUI Functional Examples
- Animation
- AutoComplete
- Browser History Manager
- Button
- Calendar
- Carousel
- Charts (experimental)
- Color Picker
- Cookie
- Connection Manager
- Container
- DataTable
- Dom
- Drag & Drop
- Event
- Get
- ImageCropper
- ImageLoader
- JSON
- Layout Manager
- Logger
- Menu
- Paginator
- Profiler
- ProfilerViewer
- Resize
- Rich Text Editor
- Selector
- Slider
- Stylesheet
- TabView
- TreeView
- Uploader (experimental)
- YAHOO Global Object
- YUI Loader
- YUI Test
- Reset CSS
- Base CSS
- Fonts CSS
- Grids CSS
- YUI Articles on the YUI Website
- YUI FAQ (external)
- Graded Browser Support (external)
- Bug Reports/Feature Requests (external)
- Serving YUI Files from Yahoo! (external)
- Security Best Practices (external)
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings