Javascript.RU

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

Перемещение по списку с помощью стрелок
Здравствуйте!
В общем, задача такова:
есть список подгужаемый с помощью ajax
<ul>
<li>
<p>El1</p>
</li>
<li>
<p>El2</p>
</li>
<li>
<p>El3</p>
</li>
</ul>- примерно такой список.
Так вот, нужно сделать так, чтобы по элементам списка можно было передвигаться с помощью стрелок на клавиатуре.
Пожалуйста, дайте какое-нибудь простенькое решение. Спасибо всем =)
Ответить с цитированием
  #2 (permalink)  
Старый 25.01.2013, 19:26
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

что означает передвигаться? при нажатии стрелок должен текст подсвечиваться или как вы это себе представляете
Ответить с цитированием
  #3 (permalink)  
Старый 25.01.2013, 19:51
Новичок на форуме
Отправить личное сообщение для Research Посмотреть профиль Найти все сообщения от Research
 
Регистрация: 25.01.2013
Сообщений: 3

Сообщение от animhotep Посмотреть сообщение
что означает передвигаться? при нажатии стрелок должен текст подсвечиваться или как вы это себе представляете
да, чтобы пункт списка на котором сейчас сфокусирован пользователь, выделялся. пример вы модете посмотреть введя какое-нибудь слово в поисковое поле google. там подгрузится блок с похожих ссылок. так вот по ним можно передвигаться с помощью стрелок вверх и вниз и выбирать нажав enter. вот мне нужно так же сделать. Можете помочь?
Ответить с цитированием
  #4 (permalink)  
Старый 26.01.2013, 00:48
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Может это поможет (сорри за говнокодерство):
<ul id="list" style="display: none" tabindex="-1"> 
    <li> 
        <p>El1</p> 
    </li> 
    <li> 
        <p>El2</p> 
    </li> 
    <li> 
        <p>El3</p> 
    </li> 
</ul>
<button>Show List</button>
<style>
    .active{
        outline: 1px solid red;
    }
</style>
<script>
(function(){
    var container = document.getElementById('list');
    var items = container.getElementsByTagName('li');
    var index = -1;
    function move(dir){
        !items[index] || (items[index].className = '');
        switch (dir)
        {
            case 'up':
                index = (index <= 0) ? items.length-1 : --index;
                break;
            case 'down':
                index = (index == items.length-1) ? 0 : ++index;
                break;
            default:
                throw Error('WTF?');
        }
        items[index].className = 'active';
    }
    function toggle(todo){
        container.style.display = (container.style.display == 'none') ? '' : 'none';
    }
    
    document.addEventListener('keydown', function(e) {
        var newIndex = null;
        switch (e.keyIdentifier)
        {
            case 'Up':
                e.preventDefault();
                move('up');
                break;
            case 'Down':
                e.preventDefault();
                move('down');
                break;
            case 'Enter':
                alert('Selected ' + (index+1));
                toggle();
                break;
        }
    });
    
    document.querySelector('button').onclick = function() { toggle(); container.focus(); }
})();
</script>


Нужно править на кроссбраузерность, сразу предупреждаю.
Ответить с цитированием
  #5 (permalink)  
Старый 26.01.2013, 03:07
Новичок на форуме
Отправить личное сообщение для Research Посмотреть профиль Найти все сообщения от Research
 
Регистрация: 25.01.2013
Сообщений: 3

Спасибо большое. огромное спасибо!
проблему кроссбраузерности решил. но не знаю как в ie, даже боюсь там тестировать. но это не важно. в общем, спасибо =)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
перемещение по элементом с клавиатуры vladitot Events/DOM/Window 2 14.02.2012 00:28
Получить значение ячейки с помощью onclik Space-06 Events/DOM/Window 4 10.01.2012 09:39
Перемещение текста с помощью мышки Владимир Седов Элементы интерфейса 3 07.01.2011 03:08
Прокрутка страницы с помощью клавиш Mirgorod Events/DOM/Window 0 17.06.2010 22:39
Проверка наличия логина в БД при регистрации, с помощью ajax storng Общие вопросы Javascript 4 09.04.2010 20:24