At some point back I came across a jQuery plugin where I could move through the divs, menus, images ... using the directional arrows on the keyboard.
I've tried a lot about it but I can not find anything.
Does anyone know of this or any plugin that does this work, or has any logic how to do this?
To work with a class for the Divs and with the KeyCodes intercepting the keyup event in javascript would look more or less like this, try to understand and adapt your need.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script><style>.container{display:grid;grid-template-columns:autoautoautoautoautoautoauto;height:500px;width:80%;margin:100pxauto0;/*background:#e3e3e3;*/grid-auto-rows:autoautoauto;grid-gap:2em;}.item{border:2pxsolidblack;}.selected{background:grey;}</style><divclass="container">
<div class="item selected">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item" data-dia="1">8</div>
<div class="item" data-dia="2">9</div>
<div class="item" data-dia="3">10</div>
<div class="item" data-dia="4">11</div>
<div class="item" data-dia="5">12</div>
<div class="item" data-dia="6">13</div>
<div class="item" data-dia="7">14</div>
<div class="item" data-dia="1">15</div>
<div class="item" data-dia="2">16</div>
<div class="item" data-dia="3">17</div>
<div class="item" data-dia="4">18</div>
<div class="item" data-dia="5">19</div>
<div class="item" data-dia="6">20</div>
<div class="item" data-dia="7">21</div>
</div>
<script>
$(document).on('keyup', function (e) {
// ATRIBUINDO O KEY CODE PARA AS VARIAVEIS PARA MELHOR LEGIBILIDADE
let right = 39;
let left = 37;
let up = 38;
let down = 40;
// VARIAVEIS AUXILIARES PARA NAVEGACAO
let index = 1;
let totalColunas = 7;
let proximo = 1;
// VERIFICA SE A TECLA QUE ESTÁ SENDO DISPARADA É ALGUMA TECLA QUE QUEREMOS TRABALHAR EM CIMA
if (e.keyCode === right || e.keyCode === left || e.keyCode === up || e.keyCode === down) {
// PERCORE TODAS AS DIVS DA CLASSE ITEM PARA SETAR O INDICE DA PROXIMA
$.each($('.item'), function () {
if ($(this).hasClass('selected')) {
switch (e.keyCode) {
case right:
proximo += index;
break;
case left:
proximo = index - 1;
break;
case up:
proximo = index - totalColunas;
break;
case down:
proximo += index + (totalColunas -1);
break;
}
}
index++;
});
index = 1;
// VERIFICA SE O RETORNO É MAIOR QUE O NUMERO TOTAL DE DIVS E RETORNA FALSO PARA A NAVEGACAO NÃO SAIR DE DAS DIVS
if(proximo > $('.item').length) {
return false;
// VERIFICA SE O RETORNO É MENOR QUE 1 E RETORNA FALSO PARA A NAVEGAÇÃO NÃO SAIR DAS DIVS
}else if(proximo < 1 ) {
return false;
}
// PERCORRE TODAS AS DIVS ITEMS PARA ATRIBUIR A CLASSE SELECTED NA DIV QUE O CURSOR DEVE IR SETADO NA VARIAVEL PROXIMO
$.each($('.item'), function () {
$(this).removeClass('selected');
if (index === proximo) {
$(this).addClass('selected');
}
index++;
})
}
});
</script>