使用箭头键通过4x4网格导航
Using arrowkeys to navigate through 4x4 grid?
我在这里读了这个答案在可聚焦元素上编写箭头键导航指南?但是对于像我这样的新手来说,它还不够详细。
我需要这样的东西,我有一个4x4的网格与div在我的DOM。我希望能够移动选择器然后能够按回车键选择有焦点的div
编辑:粘贴一些代码,当我意识到我在完全错误的轨道上时,这就是我正在尝试的:
function arrowKeys(input){
var keyCode = input.keyCode;
var border = document.getElementById(keyid);
var removeBorder = border.removeAttribute("style");
if(keyCode == 38 || keyCode == 39 || keyCode == 40 || keyCode == 37){
var addborder = border.setAttribute("style", "border:2px solid red");
border.addborder;
if(keyCode == 38){
removeBorder;
keyid = keyid - 4;
border.addborder;
console.log(keyid + " upp");
}
if (keyCode == 39){
removeBorder;
keyid++;
border.addborder;
console.log(keyid + " right");
}
if(keyCode == 40){ // right arrowkey
removeBorder;
keyid = keyid + 4;
border.addborder;
console.log(keyid + " down");
}
if (keyCode == 37){ // left arrowkey
removeBorder;
keyid--;
border.addborder;
console.log(keyid + " left");
}
}
}
我认为你需要使用数组就像这样,
var navigationMap = [[1,2,3,4][5,6,7,8][9,10,11,12][13,14,15,16]];
这里有一种使用普通javascript的方法。代码的第一部分是一些跨浏览器的函数,用于添加事件处理程序和添加/删除类。您会注意到,我添加/删除了一个类来显示活动项,而不是直接添加/删除样式。这将样式放在CSS中,而不是javascript中,这通常是一个好主意。
工作演示:http://jsfiddle.net/jfriend00/yMMxX/
(function() {
// refined add event cross browser
function addEvent(elem, event, fn) {
if (typeof elem === "string") {
elem = document.getElementById(elem);
}
// avoid memory overhead of new anonymous functions for every event handler that's installed
// by using local functions
function listenHandler(e) {
var ret = fn.apply(this, arguments);
if (ret === false) {
e.stopPropagation();
e.preventDefault();
}
return(ret);
}
function attachHandler() {
// set the this pointer same as addEventListener when fn is called
// and make sure the event is passed to the fn also so that works the same too
var ret = fn.call(elem, window.event);
if (ret === false) {
window.event.returnValue = false;
window.event.cancelBubble = true;
}
return(ret);
}
if (elem.addEventListener) {
elem.addEventListener(event, listenHandler, false);
} else {
elem.attachEvent("on" + event, attachHandler);
}
}
function addClass(elem, cls) {
var oldCls = elem.className;
if (oldCls) {
oldCls += " ";
}
elem.className = oldCls + cls;
}
function removeClass(elem, cls) {
var str = " " + elem.className + " ";
elem.className = str.replace(" " + cls + " ", " ").replace(/^'s+|'s+$/g, "");
}
function findItem(items, target) {
for (var i = 0; i < items.length; i++) {
if (items[i] === target) {
return(i);
}
}
return(-1);
}
var keys = {up: 38, down: 40, left: 37, right: 39};
var cards = document.getElementById("game-board").getElementsByClassName("card");
addEvent(document, "keydown", function(e) {
// get key press in cross browser way
var code = e.which || e.keyCode;
// number of items across
var width = 4;
var increment, index, newIndex, active;
switch(code) {
case keys.up:
increment = -width;
break;
case keys.down:
increment = width;
break;
case keys.left:
increment = -1;
break;
case keys.right:
increment = 1;
break;
default:
increment = 0;
break;
}
if (increment !== 0) {
active = document.getElementById("game-board").getElementsByClassName("active")[0];
index = findItem(cards, active);
newIndex = index + increment;
if (newIndex >= 0 && newIndex < cards.length) {
removeClass(active, "active");
addClass(cards[newIndex], "active");
}
// prevent default handling of up, down, left, right keys
return false;
}
});
})();
我已经用jQuery完成了这个。您可以像这样连接到事件:
$(".some-css-class-on-your-divs").keydown(function (e)
{
HandleKeyDown(e, $(this));
})
然后用另一个javascript方法处理事件
function HandleKeyDown(event, jqNode)
{
event = event || window.event;
var charCode = event.charCode || event.keyCode;
if (charCode == 40)
{ // down arrow key
/// do your thing here
}
// charcode 38 is up, and so on
}
相关文章:
- 剑道网格jQuery动画()问题
- 使用Dnamics CRM 2011中的JavaScript读取子网格的所有记录,而不考虑活动页面
- 我可以更改剑道UI网格吗's的外键值
- jqGrid树网格问题
- 在Three.js中导出网格会提高性能吗
- 如何在剑道网格初始化后设置pageSizes
- 在threejs中使用纹理网格和线框网格
- 如何在可分组的剑道网格中设置空数据文本
- 如何在Angular UI网格中选择下一行
- ExtJS网格单元格编辑器,防止焦点松动问题
- 多维数据集网格未在指定的分区中绘制
- 光线投射从内部投射时不会碰到网格
- 使用javascript在MVC中查找网格长度时出错
- 如何刷新AngularJs剑道网格
- 使用导航属性创建Kendo UI网格模型的问题
- ui网格将单元格显示为选择标记
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- 使用按钮的Angular UI网格过滤器
- 如何在master中调用细节网格作为单击事件
- 使用箭头键通过4x4网格导航