jQuery的 - 使用箭头键导航的div电网(jQuery - using arrow keys

我是相当新的HTML，CSS和jQuery - 虽然我的HTML和CSS都OK，我的jQuery是不太好 - 我想我想实现的东西非常复杂。

正如你可以在代码中看到我有一个日历建成，我希望人们能够使用他们的箭头键，然后按回车，突出一个正方形围绕它进行导航。 我想要的最好的例子是这样的http://jsfiddle.net/BNrBX/但它非常混乱！ 作为HTML已经注意到，但div容器，我不够好，在了解了jQuery真正得到已被写入。

下面是日历的HTML代码：

<div class="calander">

<div class="date"><div class="calandertext">&#60;</div></div>
<div class="month" id="month2"><div class="calandertext">April</div></div>
<div class="date"><div class="calandertext">&#62;</div></div>

<div class="day"><div class="calandertext">M</div></div>
<div class="day"><div class="calandertext">T</div></div>
<div class="day"><div class="calandertext">W</div></div>
<div class="day"><div class="calandertext">T</div></div>
<div class="day"><div class="calandertext">F</div></div>
<div class="day"><div class="calandertext">S</div></div>
<div class="day"><div class="calandertext">S</div></div>

<div class="date"><div class="calandertext"></div></div>
<div class="date"><div class="calandertext">1</div></div>
<div class="date"><div class="calandertext">2</div></div>
<div class="date"><div class="calandertext">3</div></div>
<div class="date"><div class="calandertext">4</div></div>
<div class="date"><div class="calandertext">5</div></div>
<div class="date"><div class="calandertext">6</div></div>

<div class="date"><div class="calandertext">7</div></div>
<div class="date"><div class="calandertext">8</div></div>
<div class="date"><div class="calandertext">9</div></div>
<div class="date"><div class="calandertext">10</div></div>
<div class="date"><div class="calandertext">11</div></div>
<div class="date"><div class="calandertext">12</div></div>
<div class="date"><div class="calandertext">13</div></div>

<div class="date"><div class="calandertext">14</div></div>
<div class="date"><div class="calandertext">15</div></div>
<div class="date"><div class="calandertext">16</div></div>
<div class="date"><div class="calandertext">17</div></div>
<div class="date"><div class="calandertext">18</div></div>
<div class="date"><div class="calandertext">19</div></div>
<div class="date"><div class="calandertext">20</div></div>

<div class="date"><div class="calandertext">21</div></div>
<div class="date"><div class="calandertext">22</div></div>
<div class="date"><div class="calandertext">23</div></div>
<div class="date"><div class="calandertext">24</div></div>
<div class="date"><div class="calandertext">25</div></div>
<div class="date"><div class="calandertext">26</div></div>
<div class="date"><div class="calandertext">27</div></div>

<div class="date"><div class="calandertext">28</div></div>
<div class="date"><div class="calandertext">29</div></div>
<div class="date"><div class="calandertext">30</div></div>
<div class="date"><div class="calandertext"></div></div>
<div class="date"><div class="calandertext"></div></div>
<div class="date"><div class="calandertext"></div></div>
<div class="date"><div class="calandertext"></div></div>

</div>

和继承人的CSS：

.calander {
font-size: 0;
    width: 70%
}

.month {
position: relative;
height: 80px;
background-color: #FFE06B;
width: 71.4265%;
display: inline-block;
}

.day {
position: relative;
height: 50px;
background-color: #4DC3F0;
display: inline-block;
width: 14.2853%;
}

.date {
position: relative;
height: 80px;
background-color: #FFE06B;
display: inline-block;
width: 14.2853%;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.calandertext {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 50%;
text-align: center;
line-height: 0;
font-size: 40px;
}

我在的jsfiddle把两者一起： http://jsfiddle.net/9SVez/

任何帮助 - 或去哪里指针 - 将是简直是太棒了。

谢谢！ 玩笑

Answer 1:

var $date = $('.day.date').not(':has(:empty)'),
    o = {
       38: -7,
       40: 7,
       37: 'prev',
       39: 'next'
    };

$(document).on('keyup', function (e) {
    var dir = o[e.which],
        $active = $('.active').removeClass('active'),
        i = $date.index($active);

    // Enter Key
    if (e.which === 13) {
        $('.selected').removeClass('selected');
        $active.addClass('selected');
        return;
    }

    // Select the target element
    if (!$active.length) {
        $date.first().addClass('active');
        return;
    } else {
        if (dir === 'next' || dir === 'prev') {
            $active[dir]().addClass('active');
        } else {
            $date.eq(dir + i).addClass('active');
        }
    }
});

http://jsfiddle.net/eqrNT/

Answer 2:

它并不需要像你工作过的例子一样困难。 这个例子是可笑冗长，没有特别设计得非常好。

在我的例子在下面，我迷上了箭头的事件，是什么让我的代码简单的主要部分是calendarMap变量。 这是保存在他们的X所有的div，y位置的数组，这使我们能够映射为x，y值走动简单走动。

的jsfiddle

var position = { x: 0, y: 0 };
var calendarMap = [];

$(document).ready(function () {
    $('.row').each(function () {
        calendarMap.push([]);
        $('.day, .date', this).each(function () {
            calendarMap[calendarMap.length - 1].push($(this));
        });
    });
    highlightCell();
});

$(window).on('keydown', function (e) {
    if (e.keyCode === 37) // left
        moveLeft();
    else if (e.keyCode === 38) // up
        moveUp();
    else if (e.keyCode === 39) // right
        moveRight();
    else if (e.keyCode === 40) // down
        moveDown();
    highlightCell();
});

function moveLeft() {
    position.x--;
    if (position.x < 0)
        position.x = 0;
}

function moveUp() {
    position.y--;
    if (position.y < 0)
        position.y = 0;
}

function moveRight() {
    position.x++;
    if (position.x >= calendarMap[0].length)
        position.x = calendarMap[0].length - 1;
}

function moveDown() {
    position.y++;
    if (position.y >= calendarMap.length)
        position.y = calendarMap.length - 1;
}

function highlightCell() {
    $('.day, .date').removeClass('selected');
    calendarMap[position.y][position.x].addClass('selected');
}

我已经离开让工作的鼠标事件和顶行作为一个练习。 对于鼠标要处理mouseover ，找出哪些项calendarMap正在徘徊，设置position和调用highlightCell() 对于顶行，你可能想添加一些自定义属性或东西，因为它只有3个单元的行。

Answer 3:

我编辑你的代码，左，右箭头： http://jsfiddle.net/9SVez/2/这不是“最好”的JS，但它应该给你一个提示:)

var currentDay=0;
function doSelect(){
    $('#firstDay').nextAll().css({backgroundColor: '#FFE06B'});
   $('#firstDay').nextAll().slice(currentDay,currentDay+1).css({backgroundColor: 'blue'});

}
$(function () {
    $(document).keydown(function(e){
        if (e.keyCode == 37) { 
           //alert( "left pressed" );
            currentDay--;
        }

        if (e.keyCode == 39) { 
           //alert( "right pressed" );
            currentDay++;
        }
        doSelect();
        return false;
    });
   doSelect();

});

文章来源: jQuery - using arrow keys to navigate grid of divs