javascript код, который будет перехватывать нажатие клавиш клавиатуры 38 и 40!!!
Есть таблица выводимая php функцией-поиска. При нажатиях на клавиатуре клавиш "ВВЕРХ" и "ВНИЗ" курсор должен бегать по строкам таблицы меняя из класс. Курсор должен представлять собой полупрозрачную картинку или стрелочку в диве... класс при наведении курсора даю через onmouseover, а как написать ф-цию для клавиатуры не знаю. Помогите пожалуйста!:thanks:
|
Событие keydown (может быть keypress или keyup), свойство keyCode объекта события !!!
|
это я тоже понимаю, а вот как сделать так чтобы при нажатии оно перескакивало вверх или в них, как оно будет определять строку что сверху или та что снизу и менять их класс соответственно тащить курсор?
|
переставлять класс active срокам через http://api.jquery.com/next/ http://api.jquery.com/prev/ например
|
animhotep,
а в другую строку (tr) как на жиквери перебрасывать будешь? Nuitari, пригодиться: http://webew.ru/articles/598.webew |
Цитата:
$(".active").parent('tr').next().addClass(".active "); |
animhotep,
а сорри, все верно, я невнимательно прочитал :) , думал надо по ячейкам таблицы перемещаться. |
Вариант на jquery-ui selectable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>selectable demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js">
</script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">
</script>
<style>
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable tr { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
#selectable tbody tr:hover { cursor: pointer; background-color: #FFB861;}
</style>
<script>
$(function() {
$( "#selectable tbody" ).selectable();
$(document).keyup(function(e) {
var lastSelected = $(".ui-selected");
lastSelected.removeClass("ui-selected");
var Selected;
if(e.which == 40) {
Selected = lastSelected.next().size()? lastSelected.next(): lastSelected.prevAll(":last");
Selected.addClass("ui-selected");
}
if(e.which == 38) {
Selected = lastSelected.prev().size() ? lastSelected.prev(): lastSelected.nextAll(":last");
Selected.addClass("ui-selected");
}
})
});
</script>
</head>
<body>
<table align="center" class="table1" id="selectable">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
</body>
</html>
|
я вставил ваш код и пробыва тестить но при нажатии кнопок 38, 40 ничего не происходит подскажите в чем у меня может быть проблема?
|
рони, у deff'а научился называть переменные с большой буквы? Это же не конструктор.
|
| Часовой пояс GMT +3, время: 22:07. |