Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / 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>