Используя ключи стрелок для навигации
Я задаюсь вопросом, была ли возможность перейти с клавишами со стрелками через таблицу, я создал с JS (использующий jQuery)? Я означаю спрыгивать с ячейки к ячейке... Сценарий для Механика.
Предупреждение, однако, работы. Я просто не получил идеи, как сделать это хорошо функционирующим.
$(document).keydown(function(e){
if (e.keyCode == 37) {
alert( "left pressed " );
return false;
}
if (e.keyCode == 38) {
alert( "up pressed " );
return false;
}
if (e.keyCode == 39) {
alert( "right pressed " );
return false;
}
if (e.keyCode == 40) {
alert( "down pressed " );
return false;
}
});
;Любая подсказка или независимо от того, что очень ценится. Заранее спасибо, Faili
Обновление
Кажется, что я объяснился неправильно. Дайте мне другую попытку: Демонстрация
Этот может дать Вам общее представление о том, что я хотел. После выбора одного поля ввода навигация с клавишами со стрелками возможна. Моя проблема состоит в том, что я просто не могу понять это через GM и jQuery. Какая-либо идея?
Еще раз спасибо за Ваше время и усилие.
Наконец это было похоже:
function myTest_analysis1(e,leftkey,up,right,down){
myTest(e,'','','field_analysis2','field_communication1')
function myTest(e,leftkey,up,right,down)
{
if (!e) e=window.event;
var selectArrowKey;
switch(e.keyCode)
{
case 37:
// Key left.
selectArrowKey = leftkey;
break;
case 38:
// Key up.
selectArrowKey = up;
break;
case 39:
// Key right.
selectArrowKey = right;
break;
case 40:
// Key down.
selectArrowKey = down;
break;
}
if (!selectArrowKey) return;
var controls = window.document.getElementById(selectArrowKey);
if (!controls) return;
controls.focus();
}
}
$('#field_analysis1').keydown (myTest_analysis1);
Это - то, как это удалось для меня. Я держал пари, что существует более умное решение, но я не мог понять это прямо сейчас.
Спасибо sooo очень в течение Вашего времени и усилия.
3 ответа
Вы должны иметь возможность фокусировать различные ячейки, я соберу пример, используя .focus()
Вот пример.
Пожалуйста, имейте в виду, что...
a) В этом примере нет ничего, что могло бы остановить вас от выхода за границы, вам нужно будет ограничить значения currentRow и currentCell количеством ячеек и не дать им опуститься ниже 0.
b) На данный момент нет кода для удаления зеленого текста, который я использовал для отображения текущего фокуса. Это означает, что зеленый след остается позади.
Вы можете решить оба вышеуказанных вопроса довольно легко, но это усложнит пример...
var currentRow = 0;
var currentCell = 0;
function ChangeCurrentCell() {
var tableRow = document.getElementsByTagName("tr")[currentRow];
var tableCell = tableRow.childNodes[currentCell];
tableCell.focus();
tableCell.style.color = "Green";
}
ChangeCurrentCell();
$(document).keydown(function(e){
if (e.keyCode == 37) {
currentCell--;
ChangeCurrentCell();
return false;
}
if (e.keyCode == 38) {
currentRow--;
ChangeCurrentCell();
return false;
}
if (e.keyCode == 39) {
currentCell++;
ChangeCurrentCell();
return false;
}
if (e.keyCode == 40) {
currentRow++;
ChangeCurrentCell();
return false;
}
});
вот моя версия ...
демонстрация
var active;
$(document).keydown(function(e){
active = $('td.active').removeClass('active');
var x = active.index();
var y = active.closest('tr').index();
if (e.keyCode == 37) {
x--;
}
if (e.keyCode == 38) {
y--;
}
if (e.keyCode == 39) {
x++
}
if (e.keyCode == 40) {
y++
}
active = $('tr').eq(y).find('td').eq(x).addClass('active');
});
Вот версия, которая позволяет следующее
- ограничения в начале и конце таблицы (первая и последняя ячейка таблицы)
- заворачивает в конце каждой строки и переходит к следующей
- прокручивает текущую ячейку в поле зрения, если для ее просмотра требуется прокрутка
- поддерживает щелчок мышью для выбора ячейки
Демо на : http://jsfiddle. net/BdVB9/
с html структурой как
<table id="navigate">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
и javascript
var active = 0;
$(document).keydown(function(e){
reCalculate(e);
rePosition();
return false;
});
$('td').click(function(){
active = $(this).closest('table').find('td').index(this);
rePosition();
});
function reCalculate(e){
var rows = $('#navigate tr').length;
var columns = $('#navigate tr:eq(0) td').length;
//alert(columns + 'x' + rows);
if (e.keyCode == 37) { //move left or wrap
active = (active>0)?active-1:active;
}
if (e.keyCode == 38) { // move up
active = (active-columns>=0)?active-columns:active;
}
if (e.keyCode == 39) { // move right or wrap
active = (active<(columns*rows)-1)?active+1:active;
}
if (e.keyCode == 40) { // move down
active = (active+columns<=(rows*columns)-1)?active+columns:active;
}
}
function rePosition(){
$('.active').removeClass('active');
$('#navigate tr td').eq(active).addClass('active');
scrollInView();
}
function scrollInView(){
var target = $('#navigate tr td:eq('+active+')');
if (target.length)
{
var top = target.offset().top;
$('html,body').stop().animate({scrollTop: top-100}, 400);
return false;
}
}