Navegação com setas

[Billie Joe 0]

Bom dia fellows,

 

 

Acompanhem o caso: um cliente tem uma vitrine virtual de produtos (site que ajudei no desenvolvimento). Cada página contém um produto, sua descrição, preço, etc. Bem padrão e simples. Ai o cidadão pediu que colocássemos um link do tipo "anterior" e "próximo" para "facilitar a navegação". Publicamos a modificação mesmo sem entender o motivo, beleza.

 

Agora ele pediu algo inusitado, sem motivo, mas tá fazendo até birra! Ele quer uma navegação por setas! Tipo você pressiona no teclado a seta para a direita e a página carrega o próximo produto. Pressiona para a esquerda e ele volta um produto.

 

Encontrei uma navegação baseada em jQuery semelhante (http://demo.marcofolio.net/keypress_navigation/) e vou tentar modificá-la, mas como nunca é demais perguntar: alguém já fez algo do tipo? Sabe um script melhor? Nâo preciso que seja em jQuery, pode ser com qq outro framework (ou não).

 

Abraço a todos!

[Psycocandy 0]

Olá Billie Joe!

 

Já tem na página os links para anterior e próximo, não tem?

Você pode pegar esses links pelo id e atribuí-lo ao evento do teclado.

 

Vou fazer meio tosco aqui, mas só pra te dar uma idéia...

Por exemplo:

 

NO HTML:

<div id="navegacao">
    <a href="pagina_1.html" value="pagina_1.html" id="anterior"><img src="seta_esquerda.jpg"/></a>
    <a href="pagina_3.html" value="pagina_3.html" id="proxima"><img src="seta_direita.jpg"/></a>
</div>

NO JS:

$(document).ready(init);

function init()
{
    $(document).keypress(function(e){
        // Esquerda
        if(e.keyCode==37){ 
            window.location = $("#anterior").val();
        }
        // Direita
        if(e.keyCode==39){
            window.location = $("#proxima").val();
        }
    });
}

Não testei, viu?

Mas espero que ajude a clarear!

^_^

 

Referência:

Keys - Javascript