jQuery - 使用箭头键来导航div的网格 [英] jQuery - using arrow keys to navigate grid of divs

问题描述

我对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 =monthid =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; 
背景颜色：＃FFE06B; 
宽度：71.4265％; 
 display：inline-block; 
} 
 
 .day {
 position：relative; 
 height：50px; 
背景颜色：＃4DC3F0; 
 display：inline-block; 
 width：14.2853％; 
} 
 
 .date {
 position：relative; 
 height：80px; 
背景颜色：＃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; 
剩下：0; 
 right：0; 
 top：50％; 
 text-align：center; 
 line-height：0; 
 font-size：40px; 
 
 
 
 $ b $ p 
 $ b我把两者放在一个jsfiddle中： http://jsfiddle.net/9SVez/  
 
 
 
任何帮助 - 或者哪里去的指针 - 简直太棒了。 
 
 
 
谢谢！ 
 Josh 
解决方案
 
  var $ date = $（'。day.date '）.not（'：has（：empty）'），
o = {
 38：-7，
 40：7，
 37：'prev'，
 39：'next'
}; 
 $ b $（document）.on（'keyup'，function（e）{
 var dir = o [e.which]，
 $ active = $（'。active '）.removeClass（'active'），
i = $ date.index（$ active）; 
 
 //输入键
 if（e.which === 13） {
 $（'。selected'）。removeClass（'selected'）; 
 $ active.addClass（'selected'）; 
 return; 
} 
 
 //选择目标元素
 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/  
 
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. 

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. 

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>
And heres the 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;
}
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. 

Thanks!
Josh
解决方案
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的网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！