examples/keynav/keynav.html

   1 <html>
   2 <head>
   3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   4     <title>Key Navigation Sample</title>
   5     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
   6     <link rel="stylesheet" type="text/css" href="../shared/example.css" />
   7     <style type="text/css">
   8         #board {
   9             width: 402px;
  10             height: 402px;
  11             border: 1px solid black;
  12         }
  13
  14         .square {
  15             width: 100px;
  16             height: 100px;
  17             float: left;
  18             border: 1px solid black;
  19             text-align: center;
  20             padding-top: 40px;
  21         }
  22
  23         .active-red {
  24             background-color: #FF0000;
  25         }
  26
  27         .active-green {
  28             background-color: #00FF00;
  29         }
  30
  31         /* IE6/7/8 bugs */
  32
  33         .x-strict #board {
  34             width: 400px;
  35             height: 400px;
  36         }
  37
  38         .x-strict .square {
  39             width: 98px;
  40             padding-top: 0;
  41             line-height: 100px;
  42         }
  43
  44         .x-quirks .x-ie .x-clear {
  45             margin-top: -1px;
  46         }
  47         .x-quirks .x-ie6 .x-clear {
  48             margin-top: 0px;
  49         }
  50     </style>
  51     <script type="text/javascript" src="../../bootstrap.js"></script>
  52     <script type="text/javascript" src="keynav.js"></script>
  53 </head>
  54 <body>
  55 <h1>Key Navigation Sample</h1>
  56
  57 <p>The js is not minified so it is readable. See <a href="keynav.js">keynav.js</a>.</p>
  58
  59 <p>
  60     Use the arrow keys to navigate the board. <br />
  61     Press the space key to make an effect on the active cell. <br />
  62     Press the home key to change the highlight color.
  63 </p>
  64
  65 <div id="board">
  66
  67 </div>
  68 </body>
  69 </html>