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個單元格。