Javascript.RU

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

javascript код, который будет перехватывать нажатие клавиш клавиатуры 38 и 40!!!
Есть таблица выводимая php функцией-поиска. При нажатиях на клавиатуре клавиш "ВВЕРХ" и "ВНИЗ" курсор должен бегать по строкам таблицы меняя из класс. Курсор должен представлять собой полупрозрачную картинку или стрелочку в диве... класс при наведении курсора даю через onmouseover, а как написать ф-цию для клавиатуры не знаю. Помогите пожалуйста!
Ответить с цитированием
  #2 (permalink)  
Старый 13.08.2013, 14:24
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Событие keydown (может быть keypress или keyup), свойство keyCode объекта события !!!
Ответить с цитированием
  #3 (permalink)  
Старый 13.08.2013, 14:31
Новичок на форуме
Отправить личное сообщение для Nuitari Посмотреть профиль Найти все сообщения от Nuitari
 
Регистрация: 13.08.2013
Сообщений: 3

это я тоже понимаю, а вот как сделать так чтобы при нажатии оно перескакивало вверх или в них, как оно будет определять строку что сверху или та что снизу и менять их класс соответственно тащить курсор?
Ответить с цитированием
  #4 (permalink)  
Старый 13.08.2013, 14:46
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

переставлять класс active срокам через http://api.jquery.com/next/ http://api.jquery.com/prev/ например
Ответить с цитированием
  #5 (permalink)  
Старый 13.08.2013, 15:27
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

animhotep,
а в другую строку (tr) как на жиквери перебрасывать будешь?

Nuitari,
пригодиться: http://webew.ru/articles/598.webew
Ответить с цитированием
  #6 (permalink)  
Старый 13.08.2013, 16:14
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

Сообщение от Riim
а в другую строку (tr) как на жиквери перебрасывать будешь?
както так
$(".active").parent('tr').next().addClass(".active ");
Ответить с цитированием
  #7 (permalink)  
Старый 13.08.2013, 16:30
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

animhotep,
а сорри, все верно, я невнимательно прочитал , думал надо по ячейкам таблицы перемещаться.
Ответить с цитированием
  #8 (permalink)  
Старый 13.08.2013, 16:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Вариант на 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>

Последний раз редактировалось рони, 03.10.2013 в 23:07.
Ответить с цитированием
  #9 (permalink)  
Старый 13.08.2013, 16:57
Новичок на форуме
Отправить личное сообщение для Nuitari Посмотреть профиль Найти все сообщения от Nuitari
 
Регистрация: 13.08.2013
Сообщений: 3

я вставил ваш код и пробыва тестить но при нажатии кнопок 38, 40 ничего не происходит подскажите в чем у меня может быть проблема?
Ответить с цитированием
  #10 (permalink)  
Старый 13.08.2013, 17:21
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

рони, у deff'а научился называть переменные с большой буквы? Это же не конструктор.
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
javascript обфускатор или как правильно скрыть код syegorius Общие вопросы Javascript 1 19.09.2012 02:58
Требуется выводить код рекламного блока Adsense из файла JavaScript??? speedflow Элементы интерфейса 0 26.05.2012 15:50
Как писать код который легко поддерживать, расширять, читать. Policeman Общие вопросы Javascript 3 24.03.2012 05:40
Opera отдаёт неправильный код функциональных клавиш. NT Man Opera, Safari и др. 1 19.01.2010 02:45
Расшифруйте код javascript sochinec Общие вопросы Javascript 7 01.08.2009 23:51