http://amountaintop.com/jquery-keyboard-navigation-plugin Comments for "jQuery Keyboard Navigation Plugin" en http://amountaintop.com/jquery-keyboard-navigation-plugin The jQuery Keyboard Navigation Plugin provides the capability for elements on a page to be navigated and activated via the keyboard's up, down, right and left arrow keys. <a href="http://plugins.jquery.com/project/keynav/">jQuery Plugins Repository Home Page</a> <!--break--> <h2>Demo</h2> <p>Use the arrow keys to navigate the grid and return to activate the onclick handler</p> <p>The positions of the boxes are calculated dynamically and the keyboard controls dynamically determine which box to focus on next based on it's position on the screen.</p> <style type="text/css"> .keynav_box { height: 30px; width: 30px; position: absolute; background-color: green; border: 1px solid black; } .keynav_focusbox { height: 30px; width: 30px; position: absolute; background-color: red; border: 1px solid black; } </style> <div id="demo1" style="position: relative; height: 200px; width: 100%;"> <div class='keynav_box' onclick='alert("foo");' style='top: 0px;left: 0px'>0:0</div><div class='keynav_box' onclick='alert("foo");' style='top: 0px;left: 50px'>0:1</div><div class='keynav_box' onclick='alert("foo");' style='top: 0px;left: 100px'>0:2</div><div class='keynav_box' onclick='alert("foo");' style='top: 0px;left: 150px'>0:3</div><div class='keynav_box' onclick='alert("foo");' style='top: 0px;left: 200px'>0:4</div><div class='keynav_box' onclick='alert("foo");' style='top: 0px;left: 250px'>0:5</div><div class='keynav_box' onclick='alert("foo");' style='top: 0px;left: 300px'>0:6</div><div class='keynav_box' onclick='alert("foo");' style='top: 0px;left: 350px'>0:7</div><div class='keynav_box' onclick='alert("foo");' style='top: 0px;left: 400px'>0:8</div><div class='keynav_box' onclick='alert("foo");' style='top: 0px;left: 450px'>0:9</div><div class='keynav_box' onclick='alert("foo");' style='top: 50px;left: 0px'>1:0</div><div class='keynav_box' onclick='alert("foo");' style='top: 50px;left: 50px'>1:1</div><div class='keynav_box' onclick='alert("foo");' style='top: 50px;left: 100px'>1:2</div><div class='keynav_box' onclick='alert("foo");' style='top: 50px;left: 150px'>1:3</div><div class='keynav_box' onclick='alert("foo");' style='top: 50px;left: 200px'>1:4</div><div class='keynav_box' onclick='alert("foo");' style='top: 50px;left: 250px'>1:5</div><div class='keynav_box' onclick='alert("foo");' style='top: 50px;left: 300px'>1:6</div><div class='keynav_box' onclick='alert("foo");' style='top: 50px;left: 350px'>1:7</div><div class='keynav_box' onclick='alert("foo");' style='top: 50px;left: 400px'>1:8</div><div class='keynav_box' onclick='alert("foo");' style='top: 50px;left: 450px'>1:9</div><div class='keynav_box' onclick='alert("foo");' style='top: 100px;left: 0px'>2:0</div><div class='keynav_box' onclick='alert("foo");' style='top: 100px;left: 50px'>2:1</div><div class='keynav_box' onclick='alert("foo");' style='top: 100px;left: 100px'>2:2</div><div class='keynav_box' onclick='alert("foo");' style='top: 100px;left: 150px'>2:3</div><div class='keynav_box' onclick='alert("foo");' style='top: 100px;left: 200px'>2:4</div><div class='keynav_box' onclick='alert("foo");' style='top: 100px;left: 250px'>2:5</div><div class='keynav_box' onclick='alert("foo");' style='top: 100px;left: 300px'>2:6</div><div class='keynav_box' onclick='alert("foo");' style='top: 100px;left: 350px'>2:7</div><div class='keynav_box' onclick='alert("foo");' style='top: 100px;left: 400px'>2:8</div><div class='keynav_box' onclick='alert("foo");' style='top: 100px;left: 450px'>2:9</div></div><div id="demo2" style="position: relative;height: 500px; width: 100%;"><div class='keynav_box' onclick='alert("foo");' style='top: 82px;left: 268px'>R:0</div><div class='keynav_box' onclick='alert("foo");' style='top: 375px;left: 351px'>R:1</div><div class='keynav_box' onclick='alert("foo");' style='top: 102px;left: 271px'>R:2</div><div class='keynav_box' onclick='alert("foo");' style='top: 3px;left: 170px'>R:3</div><div class='keynav_box' onclick='alert("foo");' style='top: 64px;left: 383px'>R:4</div><div class='keynav_box' onclick='alert("foo");' style='top: 54px;left: 265px'>R:5</div><div class='keynav_box' onclick='alert("foo");' style='top: 204px;left: 107px'>R:6</div><div class='keynav_box' onclick='alert("foo");' style='top: 271px;left: 77px'>R:7</div><div class='keynav_box' onclick='alert("foo");' style='top: 82px;left: 248px'>R:8</div><div class='keynav_box' onclick='alert("foo");' style='top: 306px;left: 224px'>R:9</div></div> <script type="text/javascript" src="http://jquery.com/src/latest.js"> </script> <script type="text/javascript" src="/misc/keynav.js"> </script> <script type="text/javascript"> $(document).ready(function() { // Initialize jQuery keyboard navigation $('#demo1 div').keynav('keynav_focusbox','keynav_box'); // Set the first div as the one with focus, this is optional $('#demo1 div:first').removeClass().addClass('keynav_focusbox'); // Initialize jQuery keyboard navigation $('#demo2 div').keynav('keynav_focusbox','keynav_box'); // Set the first div as the one with focus, this is optional $('#demo2 div:first').removeClass().addClass('keynav_focusbox') }); </script> Sun, 30 Mar 2008 16:45:13 -0400 Mike Hostetler 268 at http://amountaintop.com