<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Key Navigation Sample</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="../shared/example.css" /> <!-- GC --> <style type="text/css"> #board { width: 402px; height: 402px; border: 1px solid black; } .square { width: 100px; height: 100px; float: left; border: 1px solid black; text-align: center; padding-top: 40px; } .active-red { background-color: #FF0000; } .active-green { background-color: #00FF00; } /* IE6/7/8 bugs */ .x-strict #board { width: 400px; height: 400px; } .x-strict .square { width: 98px; padding-top: 0; line-height: 100px; } .x-quirks .x-ie .x-clear { margin-top: -1px; } .x-quirks .x-ie7m .x-clear { margin-top: 0; } </style> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript" src="keynav.js"></script> </head> <body> <h1>Key Navigation Sample</h1> <p>The js is not minified so it is readable. See <a href="keynav.js">keynav.js</a>.</p> <p> Use the arrow keys to navigate the board. <br /> Press the space key to make an effect on the active cell. <br /> Press the home key to change the highlight color. </p> <div id="board"> </div> </body> </html>