资源说明：JavaScript Keyboard Navigation

YzKbNavNode
Enables keyboard navigation on webpage

Copyright (c) 2010 Weiss I Nicht  
@author Weiss I Nicht 
(sha-1: 90f01291285340bf03c2d41952c4b21b3d338907)
http://github.com/comolongo/yzKbNav

This library allows developers to easily bring keyboard navigation to their websites. The code base comes with a very extensible API, so it is easy to customize and extend the existing functionalities. This library requires jQuery and uses it to do basic dom manipulation i.e. adding and checking for the presence of certain CSS classes.

Quick Demo:
http://yz-demos.appspot.com/static/js/lib/yzKbnav/demo.html

Example code of simple page:
Live version: 

  
A
  
B
  
C
  
D




What is going on:
Each keyboard traversable item on the page is a node, which can have children, siblings, and a parent node. All nodes are explicitly assigned a row and column number to establish its position relative to its sibling nodes. In the above example, we have a list of nodes all in the same column but are on different rows. Pressing the up and down key will move the focus between the different rows; since there is only a single column, pressing left and right keys will not do anything.

On page load, yzKbNavManager.init() is called to initialize all of the nodes. It gathers all elements on the page that have the class yzkn and then creates a yzKbNavNode object for each element to keep track of its node parent, children, and sibling node information. Since no default focus node is defined, the default item to focus on will be the element in the first column of the first row; in this case, node A. When the user presses, up, down, left, right, enter, or backspace, an event handler that is attached to the document.body in yzKbNavManager::_setEventHandlers() picks up the keystrokes and passes it to the currently focused node.


Example of grid  :


  
  
A
  
B
  
C
  
D
  
E
  
F
  
G
  
H
  
I


Here we have a slightly more complicated grid, with three rows (rows: 0, 1, and 2) and each row has 3 columns (columns: 0, 1, and 2)

The column numbers don't need to be continuous, this allows for holes in the grid, for example : 


  
A
  
B
  
C
  
D
  
  
G
  
H
  
I


Since there is no grid under item C, the focus will go to the closest column number in the row below it.

Node hierarchy:
Thus far, the examples have been only node traversal among sibling nodes, in the XY plane. Nodes can also have parent-child relationships.

Example of parent and child nodes



  

    Node A (Press enter to step into child node A-1)
    

      
Node A-1
      
Node A-2 (press backspace to go back to parent A-1)
    
  
  

    Node B
    

      
Node B-1
      
Node B-2
    
  


Decorators and node configuration via html markup:
When designating an HTML element to be a kbNavNode, there are many custom attributes and class names which which you can decorate the element to customize its behavior without writing a single line of javascript code!

Decorator classes:
Decorator classes are like boolean flags, you add the class to the kbNavNode element to enable a particular behavior.

yzkn-default-focus
Sets an item to be the default focused item among its siblings. In the given example, item b will be the first to receive focus when user steps in from the parent node:


  Item A
  Item B


yzkn-passthrough
Makes a parent node passthrough all focus immediately to its child by default. For example, if you are focused on Item A and move down into passthrough-group-1, the focus will be set to Item B:
Live example: 

Item A

  Item B
  Item C


  Item D
  Item E


yzkn-disable-auto-scroll
By default, auto scroll is enabled so that the node will be scrolled to the middle of the page, e.g.


To prevent the item from scrolling to the middle of the page, add yzkn-disable-auto-scroll to the dom element:

  
Autoscrolling Row
  
Autoscrolling Row
  ...
  
Autoscrolling Row
  
Autoscrolling Row


yzkn-solo
Used for creating a node that is disconnected from the default navigation flow. This means that nodes in the default flow can never traverse to a solo node by regular means and vice versa (you can jump from the default flow nodes to the solo node by clicking on the solo node via the mouse or by programmatically focusing on the solo node). This flag can be used for modal windows and other components that are not part of the regular navigation flow.

Live Example: 

Code:

  
Regular Flow Item
  
Regular Flow Item
  

    Independent flow node
    

      
Part of independent flow
      
Part of independent flow
      
Part of independent flow
    
  
  
Regular Flow Item
  
Regular Flow Item
  


yzkn-disabled
Makes a node disabled. While disabled, a node cannot be focused and cannot interact with the DOM. The node can be enabled interactively using the yzKbNavNode::enable() method

Live Example: 

Code:

	

		
Press enter to enable/disable center node
		

		

	
	

		

		
(disabled node)
		

	
	

		

		

		

	



Decorator attributes:
Certain behavior settings/customizations require configuration values, in those cases, decorator attributes are used.

data-yzkn-pos
This attribute has already been covered earlier. It is required for all yzKbNodes and sets the position of the node relative to its siblings.

data-yzkn-xyz (e.g. data-yzkn-xyz="in:ItemA_id;right:ItemB_id")
Overrides a node's behavior for traversing the X, Y, and Z axis. Traversing in a direction specified by the attribute would bring the focus to the node with the corresponding ID.
Possible directions are: up, down, left, right, in, out

Live Example: 

Code:

  

    Teleport into solo node by stepping in (press enter)
  
  

    Teleport into solo node by stepping in or going right » 
  
  
Random button
  
Random button
  



  
Solo node
  

    

      « Press left or backspace to return to regular flow
    
    

      Step out to go back to regular flow (press backspace)
    
    

      Step out to go back to regular flow  (press backspace)
    
  


data-yzkn-fieldmvt (e.g. data-yzkn-fieldmvt="up;down")
By default when focus is on an input field, textarea, or select menu, pressing any of the directional keys, i.e. up, down, left, or right, will move the focus out of the field instead of moving the cursor to a different character or select option.  The data-yzkn-fieldmvt prevents the focus from leaving an input field when the keys for the specified directions are pressed and allows the user to move the cursor within the field.

Look at the form fields in  as a reference for how they can behave

Example code:

	Left/right cursor movement enabled
	


	up/down option selection movement enabled (escape to leave select menu)
	
	  A
	  B
	  C
	


	up/down left/right cursor movement enabled (escape to leave field)
	



Javascript Mixin hooks/callbacks to customize node behavior:
Each node instance has a series of callbacks that can add custom functionality. These hooks allow for custom handling of behavior when focus either 
enters the node or when it leaves it. A return value of undefined from the callbacks will allow the default actions that regularly take place to still happen. A return value or true or false will stop the flow and prevent the default actions; i.e. the moveToXYCallback hook is called when the focus is about to move into the current node instance. If the moveToXYCallback is set to a function that returns true or false, then the focus will not goto the current node; it will stay at the previously focused node.

List of Mixin Hooks in yzKbNavNode:

// called on currently focused node when user presses any keys 
yzKbNavNode.onKeyStrokeCallback

// called when focus moves into yzKbNavNode along XY axis
// (e.g. when focus moves into current node instance from an adjacent node)
yzKbNavNode.moveToXYCallback 

// called when focus moves out of yzKbNavNode along XY axis
// (e.g. when focus moves out of current node instance and is about to go into an adjacent node)
yzKbNavNode.moveFromXYCallback

// called when focus moves into yzKbNavNode along Z axis
// (e.g. when focus moves into current node instance from a parent or child node)
yzKbNavNode.moveToInOutCallback 

// called when focus moves out of yzKbNavNode along Z axis
// (e.g. when focus moves out of current node instance and is about to go into a parent or child node)
yzKbNavNode.moveFromInOutCallback

// called when node is being focused on
yzKbNavNode.onFocusCallback

// called when a new node is being focused on and current node instance is about to give up its focus
yzKbNavNode.onUnfocusCallback

Example of customizing node behavior by adding callback functions:

Live example: 

Code:

  

    Show movement
  
  

    Show Alert On Enter
  



Look in the source code of yzKbNavNode.js  for more details on how to use the mixin hooks

联系我们：verysource_com

CopyRight © 2008-2022 verySource.Com All Rights reserved.　京ICP备17048824号-1　京公网安备：11010502034788