Выбор элемента html клавишами.
Добрый день друзья. Не так давно начал изучать js, сейчас делаю тестовое задание и возникла трудность.
Есть html страничка с кнопками (button) и область с изображением, при клике на кнопки меняется изображение соответствующее кнопке. Вопрос в том, можно ли сделать на js перемещение по кнопкам клавишами up-down и активацией по Enter? То есть клавишами перемещаемся по button'ам, выбранный button выделяется другим цветом, а при нажатии enter меняется изображение. Было бы неплохо хотя бы примитивный пример:help: |
Александр Македонский,
Цитата:
|
<style>
button{
cursor: pointer;
text-align: left;
width:130px;
height:25px
}
.buttons{
width: 132px;
float: left;
}
</style>
<div class ="buttons">
<button id="1" onclick="function()">first</button>
<button id="2" onclick="function()">second</button>
<button id="3" onclick="function()">third</button>
</div>
function(){
тут меняем изображение
}
|
Цитата:
У нас есть раздел "Работа", самый раз разместить там такую объяву и предложить деньги за реализацию. ;) |
Цитата:
|
Цитата:
Ты просишь делать других... Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
button{
cursor: pointer;
text-align: left;
width:130px;
height:25px
}
.buttons{
width: 132px;
float: left;
}
</style>
<script type='text/javascript'>
$(function (){
$('button').click(function(){
var o=$('#img');
o.empty().html('<img src="'+$(this).data('img')+'" />');
});
});
</script>
</head>
<body>
<div id='img'></div>
<div class='buttons'>
<button id="1" data-img='http://javascript.ru/forum/images/smilies/smile.gif'>first</button>
<button id="2" data-img='http://javascript.ru/forum/images/smilies/laugh.gif'>second</button>
<button id="3" data-img='http://javascript.ru/forum/images/smilies/lol.gif'>third</button>
</div>
</body>
</html>
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Есть такая мысль, при нажатии стрелок, меняем css кнопки для выделения как таргета, так будет норм?
|
Цитата:
Делай примеры... Как я. ;) |
Цитата:
|
В качестве черновика
<style>
button{
cursor: pointer;
text-align: left;
width:130px;
height:25px
}
.buttons{
width: 132px;
float: left;
}
.active {
background-color:lightblue;
}
</style>
<div class ="buttons">
<button onclick="showImg(0)">first</button>
<button onclick="showImg(1)">second</button>
<button onclick="showImg(2)">third</button>
</div>
<img id="im" src= "" />
<script>
var images = ["http://javascript.ru/cat/list/donkey.gif","http://javascript.ru/cat/list/js.gif","http://javascript.ru/cat/list/project.jpg"],
but = document.getElementsByTagName('button'),
i = 0;
but[i].focus();
but[i].blur();
but[i].classList.add('active');
showImg(i);
document.onkeydown = function(e) {
e.preventDefault();
but[i].classList.remove('active');
if(e.keyCode == 39 || e.keyCode == 40) { i++; }
if(e.keyCode == 37 || e.keyCode == 38) { i--; }
if(i < 0) { i = 2;}
if(i > 2) { i = 0;}
but[i].classList.add('active');
showImg(i);
}
function showImg(index) {
but[i].classList.remove('active');
im.src = images[index];
i = index;
but[i].classList.add('active');
}
</script>
фокусы с фокусом (строки 27-28) - только для того, чтобы стрелки сразу работали в демо |
Цитата:
|
| Часовой пояс GMT +3, время: 09:17. |