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

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

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

我编辑你的代码，左，右箭头：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

它并不需要是与你正在努力的例子一样困难。这个例子是非常冗长的，并且设计得不是很好。

在我的例子中，我已经把箭头事件连接起来了，关于什么让我的代码变得简单的主要部分是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个单元格。