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

问题描述

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

I'm pretty new to HTML, CSS and jQuery - and while my HTML and CSS are OK, my jQuery is not too good - and I think I'm trying to achieve something quite complicated.

正如您在代码中看到的那样，我构建了一个日历，我希望人们能够使用箭头键在它周围导航，然后按 Enter 键以突出显示一个正方形.我想要的最好的例子是这个 http://jsfiddle.net/BNrBX/ 但它非常混乱！正如 html 所指出的那样，除了容器 div，我还不足以理解 jQuery 以真正得到所写的内容.

As you can see in the code I have a calendar built, and I want people to be able to navigate around it using their arrow keys and press enter to highlight a square. The best example of what I want is this http://jsfiddle.net/BNrBX/ but it VERY confusing! As the html has noting but the container div, and I'm not good enough at understanding jQuery to really get what has been written.

这是日历的 HTML 代码:

Here is the HTML code for the calendar:

<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/

I've put both together in a jsfiddle: http://jsfiddle.net/9SVez/

任何帮助 - 或指向何处的指针 - 都会非常棒.

Any help - or a pointer of where to go - would be simply fantastic.

谢谢！乔什

推荐答案

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/

这篇关于jQuery - 使用箭头键导航 div 网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！