Сегодня я расскажу вам, как добавить продвинутую клавишную навигацию к меню при помощи jQuery.
Ознакомьтесь с демо-версией и посмотрите, как она работает. В ней представлено простое меню, которое реагирует на нажатие клавиш со стрелками «вверх» и «вниз», а также на нажатие кнопки «Enter» для перехода по ссылке.
Этот скрипт (немного) сложноват, так как является многофункциональным – пользователь может передвигаться по меню как с помощью мыши, так и нажимая на клавиши. Хотите знать, как сделать это самим? Тогда ознакомьтесь с источником кода и внимательно читайте мои объяснения.
HTML
С этой частью HTML-кода разобраться совсем не сложно. Простой неупорядоченный список и атрибут id для тега div.
<div id="menu">
<ul>
<li><a href="http://www.marcofolio.net/">Marcofolio.net</a></li>
<li><a href="http://feeds2.feedburner.com/marcofolio">Marcofolio RSS feed</a></li>
<!-- можно и больше пунктов добавить -->
</ul>
</div>
Однако обратите внимание на имя menu, которое задает ID – это нам еще понадобится.
CSS
В этом уроке не будет почти ничего про CSS – все CSS-функции очень простые и не содержат никаких интересных моментов, способных вызвать у вас затруднения. Тем не менее, стоит обратить внимание на один из классов CSS:
.itemhover { background-color:#b7b7b7 !important; color:#232323 !important; }
Класс itemhover добавлен для того, чтобы выбранная часть меню подсвечивалась. Функциям background-color и color отмечены комментарием !important, чтобы удостовериться в том, что цвет действительно будет отображаться.
Нажатие клавиши
Теперь настало время разобраться с кодами jQuery. Начнем с того, что нам придется записывать текущий выбранный пункт меню, в том числе и ссылку, по которой он ведет пользователя, так что в начале скрипта устанавливаем две переменные:
var currentSelection = 0;
var currentUrl = '';
После загрузки jQuery из Google нам нужно будет добавить интерфейс KeyListener (считывание нажатых клавиш) ко всей веб-странице. Чтобы вам все было понятно, я прокомментировал строки скрипта.
google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{
// Обычное нажатие клавиши в документе
$(document).keypress(function(e) {
switch(e.keyCode) {
// Пользователь нажимает на клавишу «стрелка вверх»
case 38:
navigate('up');
break;
// Пользователь нажимает на кнопку «стрелка вниз»
case 40:
navigate('down');
break;
// Пользователь нажимает на Enter
case 13:
if(currentUrl != '') {
window.location = currentUrl;
}
break;
}
});
});
Как видите, в этой части выполняются обращения к функции keyCode, если пользователь нажимает на какую-либо клавишу. Когда пользователь нажимает на Enter (или «Возврат»), скрипт проверяет, загружена ли функция currentUrl с адресом. Если все в порядке, то пользователь переходит по указанному адресу.
Нажатие кнопок со стрелками «вверх» и «вниз» активирует (пока несуществующую) функцию navigate, которая определяется всего одним параметром. Давайте посмотрим, что происходит внутри этой функции.
function navigate(direction) {
// Проверяем, не выбран ли какой-либо пункт меню
if($("#menu ul li .itemhover").size() == 0) {
currentSelection = -1;
}
if(direction == 'up' && currentSelection != -1) {
if(currentSelection != 0) {
currentSelection--;
}
} else if (direction == 'down') {
if(currentSelection != $("#menu ul li").size() -1) {
currentSelection++;
}
}
setSelected(currentSelection);
}
Сначала функция с помощью класса itemhover проверяет, есть ли уже выбранные элементы. Если их нет, то функции currentSelection присваивается значение -1 (0 – это первый элемент в списке).
В начале работы пользователь может нажимать только на кнопку стрелки, ведущую вниз (стрелка вверх пока неактуальна). Если совершается нажатие на клавишу «стрелка вниз», то сначала скрипт проверяет, не является ли выбранный пункт последним в списке (это выясняется путем проверки размера). Если не является, то значение функции currentSelection увеличивается на 1.
Порядок действий для кнопки «стрелка вверх» примерно такой же. Когда на нее нажимают, функция выясняет, не является ли текущий пункт первым в списке (значение 0).
В финале мы запускаем еще одну функцию, которая называется setSelected. У нее всего один параметр – номер выбранного пункта меню. Функция маленькая, но очень важная.
function setSelected(menuitem) {
$("#menu ul li a").removeClass("itemhover");
$("#menu ul li a").eq(menuitem).addClass("itemhover");
currentUrl = $("#menu ul li a").eq(menuitem).attr("href");
}
В первой строке все классы перемещаются в список itemhover. Во второй строке все классы добавляются в выбранный пункт меню (параметр функции). Это тот самый класс, который мы перед этим создавали с помощью CSS, помните? Последняя строка устанавливает параметр currentUrl, извлекая показатель href из выбранного пункта меню. После установки currentUrl клавиша Enter (или Возврат) тоже начинает работать!
Теперь у нас есть замечательное меню, которое управляется нажатием клавиш Вверх, Вниз и Enter. Но как быть с управлением мышью?
Управление мышью
Управление мышью можно организовать очень просто – добавить в файл CSS :hover, и все дела. В этом случае, когда пользователь наводит указатель на пункт меню, этот пункт будет подсвечиваться. Но что, если пользователь решит совместить два варианта навигации? Тогда, если курсор наведен на третий пункт, а в это время нажимается кнопка Вниз, подсвечиваться будет первый пункт.
Чтобы скоординировать работу двух вариантов навигации, мы кое-что добавим в скрипт. Прежде всего, нужно присвоить каждому пункту меню свой индекс. Это очень просто, но необходимо для правильной работы программы. Когда пользователь наводит курсор на третий пункт меню, сам пункт понятия не имеет о том, что он третий по счету. Но когда мы добавим нумерацию, пункт меню станет умнее:
// Добавляем информацию о порядковых номерах пунктов меню
for(var i = 0; i < $("#menu ul li a").size(); i++) {
$("#menu ul li a").eq(i).data("number", i);
}
Как видите, эта часть скрипта работает так: просматривает все меню по порядку и присваивает каждому пункту порядковый номер (number). Эта информация пригодится при наведении курсора.
Теперь давайте добавим в меню опцию считывания положения курсора:
// Задаем эффект наведения, то есть подсветку
$("#menu ul li a").hover(
function () {
currentSelection = $(this).data("number");
setSelected(currentSelection);
}, function() {
$("#menu ul li a").removeClass("itemhover");
currentUrl = '';
}
);
Первый параметр hover – функция, которая запускается при наведении курсора на пункт меню. Опять же, значение currentSelection устанавливается с помощью считанного соответствующего порядкового номера. Таким образом, скрипт «узнает», какой пункт надо подсвечивать, и теперь после выбора пункта с помощью мыши можно использовать кнопки со стрелками!
Во второй функции нет ничего примечательного – она просто убирает все классы itemhover из меню и обнуляет currentUrl.
Выводы
Ну, вот и все! Техника, описанная в статье, значительно повысит функциональность вашего сайта. Спешу сообщить, что в IE и более ранних версиях, вы не сможете перемещаться по пунктам меню при помощи клавиатуры.