Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.02.2017, 10:21
Новичок на форуме
Отправить личное сообщение для Dbonchev Посмотреть профиль Найти все сообщения от Dbonchev
 
Регистрация: 16.02.2017
Сообщений: 1

Навигация нажатием стрелок на клавиатуре
Стрелки в право и влево меняет стиль <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 :	

										
													}
	});
});

Последний раз редактировалось Dbonchev, 17.02.2017 в 10:39.
Ответить с цитированием
  #2 (permalink)  
Старый 17.02.2017, 11:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Dbonchev,
может чем поможет Выделение строк таблицы по клику и/или кнопками вверх вниз
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Переключение страниц при нажатии стрелок на клавиатуре. rokis123 Events/DOM/Window 9 06.11.2015 12:11
Навигация с помощью клавиши ESC Mij Элементы интерфейса 3 23.04.2013 00:27
перемещение по строкам таблицы при помощи стрелок на клавиатуре Сергей1980 jQuery 0 27.03.2013 16:36
Перемещение по списку с помощью стрелок Research Элементы интерфейса 4 26.01.2013 03:07