Стрелки в право и влево меняет стиль <li>.
Не могу прописать действия для стрелок вниз и вверх.
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/index.css"/>
<title>index</title>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/focus.js"></script>
<style>
.widget{
border: #0C0 solid 2px;
float:left;
width:100px;
height:90px;
margin:5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.Hover{
border:#F00 solid 2px;
width:100px;
height:90px;
}
</style>
</head>
<body>
<table border="2">
<tr>
<td height="60" width="750">
<ul class="1">
<li class="widget" onClick="widget_0()"></li>
<li class="widget" onClick="widget_1()"></li>
<li class="widget" onClick="widget_2()"></li>
<li class="widget" onClick="widget_3()"></li>
</ul>
</td>
</td>
<tr>
<td height="60" width="750">
<ul class="2">
<li class="widget" onClick="widget_0()"></li>
<li class="widget" onClick="widget_1()"></li>
<li class="widget" onClick="widget_2()"></li>
<li class="widget" onClick="widget_3()"></li>
<li class="widget" onClick="widget_4()"></li>
<li class="widget" onClick="widget_5()"></li>
</ul>
</td>
</td>
<tr>
<td height="60" width="750">
<ul class="3">
<li class="widget" onClick="widget_0()"></li>
<li class="widget" onClick="widget_1()"></li>
<li class="widget" onClick="widget_2()"></li>
</ul>
</td>
</td>
<tr>
</table>
</body>
</html>
скрипт
var VK_LEFT = 37;
var VK_UP = 38;
var VK_RIGHT = 39;
var VK_DOWN = 40;
var cntIndex=0;
var rowID=0;
var tempcntIndex=-1;
$('document').ready(function() {
allMenuObject =new Array();
$("ul li").each(function(i){$(this).on("mouseenter", function(event) {resetFocus();$(this).toggleClass("Hover" );rowID=0;cntIndex = i;});});//фокус мышки!!!
var elem = $("ul li");
for (i = 0; i<elem.length; i++) {allMenuObject.push(elem[i]);}//фокус
$(allMenuObject[0]).toggleClass("Hover");//автофокус призагрузке.
/*Function setFocus()- Это меняет цвет кнопки с нормально сосредоточиться (Выбор ФОКУСА)*/
function setFocus(idx){
if(rowID==0){
if (allMenuObject[cntIndex + idx] != undefined) {
resetFocus();
cntIndex=cntIndex+idx;
$(allMenuObject[cntIndex]).addClass("Hover");
}
}
}
function setFocus(idy){
if(rowID==0){
if (allMenuObject[cntIndex + idy] != undefined) {
resetFocus();
cntIndex=cntIndex+idy;
$(allMenuObject[cntIndex]).addClass("Hover");
}
}
}
function resetFocus(){$("li").each(function(i){ $(allMenuObject[i]).removeClass("Hover");});} //сброс фокуса клавиатурой
//Клавиши
$(document).keydown(function(event) {
var key = event.keycode || event.which;
switch(key){
case VK_RIGHT : setFocus(1)
break;
case VK_LEFT :
setFocus(-1)
break;
case VK_UP :
case VK_DOWN :
}
});
});
