Hola,
estoy intentando entender y aplicar la navegación por teclado con jQuery + jQuery mobile.
Después de las llamadas a jquery y jquery mobile...
Código:
<script>
window.onload = function() {
document.onkeydown=function(e){
if (!e) e=window.event;
switch(e.keyCode) {
case 37:
$('a').prev().focus();
break;
case 38:
alert("Up arrow");
break;
case 39:
$('a').next().focus();
break;
case 40:
alert("Down arrow");
break;
case 13:
alert("Enter/select");
break;
}
}
}
</script>
El caso es que funciona pero lo que no va bien es el focus();
cuando le doy a la flecha derecha me pasa al último y deja marcados los botones como .hover
si le doy a la de la izquierda me va al penúltimo. Creo que pasando por todos los links previamente
Aparte ignora el 4º link. que está dentro de otro div. Es decir todo lo anterior pasa con los primeros, el 4º lo ignora.
El código de body:
Código:
<body>
<div data-role="page" id="page" data-theme="a">
<div data-role="header">
<h1>Página uno</h1>
</div>
<div data-role="content" class="ui-grid-a">
<div class="ui-block-a" style="width:35%">
<a href="#page2" data-role="button" data-theme="a">Página dos</a>
<a href="#page3" data-role="button" data-theme="a">Página tres</a>
<a href="#page4" data-role="button" data-theme="a">Página cuatro</a>
</div>
<div class="ui-block-b" style="width:60%; float:right">
<a href="#page2" data-role="button" data-theme="a" >
<img src="images/01.jpeg">
</a>
</div>
</div></div>
Espero que una vez más me sorprendáis con vuestra sabiduría.
Gracias de antemano.