jQuery - 使用箭头键导航 div 网格

Question

我对 HTML、CSS 和 jQuery 还很陌生——虽然我的 HTML 和 CSS 还可以，但我的 jQuery 不太好——我想我正在尝试实现一些相当复杂的东西。

正如您在代码中看到的那样，我构建了一个日历，我希望人们能够使用箭头键在它周围导航，然后按 Enter 键以突出显示一个正方形。我想要的最好的例子就是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

它不需要像您正在处理的示例那样困难。这个例子冗长得离谱，而且设计得不是特别好。

在下面的示例中，我连接了箭头事件，使我的代码变得简单的主要部分是calendarMap 变量。它是一个数组，将所有 div 保存在它们的 x,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 2

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 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();

});