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变量。 它是一个包含x，y位置所有div的数组，这使我们能够在地图上移动，就像在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

我编辑了左右箭头的代码： 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();

});

Answer 3

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/