Как создать навигацию c нажатием клавиш, используя jQuery

jQuery

«Ключом к созданию успешного веб-сайта является та легкость, с которой пользователи находят то, что искали. Так что стоит потратить некоторое время и труд на создание и полезных, и визуально привлекательных навигационных систем. Последнее время я стал экспериментировать с путями навигации по веб-сайту. В этом учебнике я покажу вам, как дать возможность пользователю передвигаться по вашему сайту с помощью клавиатуры.»

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат нашей работы.

Шаг 1

Первое, что нужно сделать – создать нашу тестовую страницу. В этом случае я буду называть ее demo.html, а содержать она будет следующее:

Связь с библиотекой jQuery.

Ссылку на сценарий, с которым мы будем работать позднее. Давайте назовем ее keypress_nav.js

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Ссылку на CSS-файл, называемый style.css (позднее мы будем работать и с ним).

Заголовочный тэг div, который будет содержать помимо прочего и нашу навигацию. И:

Пять уникальных div-элементов, которые будут служить страницами нашего сайта.

Итак, вот как demo.html выглядит в данный момент:

Шаг 2

Теперь, когда наши DIV’ы уже на месте, мы можем продолжить и создать навигацию для этой страницы. Как вы возможно уже догадались, мы будем использовать список без порядковых номеров <ul> , чтобы зафиксировать ссылки и идентификаторы DIV в качестве ID для этих ссылок. Также мы добавим класс container ко всем DIV-«страницам». Этот класс поможет нам легко различать эти DIV’ы, когда мы будем создавать скрипт. Итак, вот то, что у вас сейчас должно получиться:

Примечание: Буква (клавиша) внутри скобок – это та клавиша, которую мы позже будем использовать для навигации для нашей страницы.

Шаг 3

jQuery

Структура нашей тестовой страницы теперь уже закончена, но ей не хватает визуальной привлекательности. Давайте добавим CSS и оживим ее. Единственное, о чем следует помнить до того, как мы начнем добавлять стили, это то, что наша страница должна хорошо выглядеть даже если JavaScript выключен. Сценарии, как я считаю, должны всегда использоваться в качестве бонуса для тех пользователей, у кого включен JavaScript, но не следует отвергать и тех, у кого его нет. В конце концов, мы ведь веб-дизайнеры/разработчики и заботимся об удобстве, не правда ли?

То, что мы стремимся получить, можно увидеть на скриншоте, расположенном сверху. Все очень просто, используются приятные, смелые цвета, чтобы выделить отдельные секции. Итак, вот наш CSS:

Шаг 5

В этом пункте учебника ваша страница должна выглядеть примерно так:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

jQuery

Это готовая страница, которая правильно работает и без включенного JavaScript. Однако, как я уже говорил, давайте сделаем небольшой сюрприз для тех пользователей, на чьих браузерах включен JavaScript. Сделаем это в два приема. Во-первых, создадим две функции, которые будут соответственно скрывать и отображать страницы. И, во-вторых, мы добавим некий код, чтобы определять клавиши, нажимаемые пользователем. Давайте сейчас создадим файл, называемый keypress_nav.js и начнем работать над нашими функциями.

Шаг 6

Для желаемого результата нам нужны две функции в скрипте. Одна из функций будет вызываться, когда пользователь нажмет одну из заранее определенных навигационных клавиш (буквы в скобках из Шага 2) и скроет все прочие контейнеры, отображая только тот DIV, который ассоциируется с этой клавишей. А вот как выглядит наша первая функция:

Далее, наша вторая функция будет принимать массив ссылок и устанавливать их по щелчку целевых функций. Другими словами, функция будет получать наши навигационные ссылки, возвращать атрибут «href» и отображать правильный DIV при щелчке на него. Итак, вот как выглядит наша вторая функция:

Шаг 7

Теперь, когда у нас все функции закодированы, нам необходимо правильно их вызывать при загрузке страницы. Первое, что нам нужно сделать, это скрыть все элементы класса container за исключением DIV, у которого есть идентификатор home. Далее, нам нужно вызвать функцию showViaLink() с указанием внутренностей нашей навигации <ul>, как параметра. И последнее, но не маловажное – мы должны обработать нажатие клавиш пользователя и вызвать функцию showViaPress() с подходящим идентификатором в качестве ее параметра. Это может быть выполнено с помощью оператора switch при нажатии клавиши.

Оператор switch будет иметь пять блоков (по одному для каждой ссылки) и их номера будут соответствовать числу ASCII при нажатии клавиши. Например, если нажата клавиша «a» , коммутатор использует случай 97. Итак, вот как выглядит код:

Шаг 8

Теперь у нас есть все детали головоломки и мы можем их сложить. Вот как должна выглядеть последняя итерация нашего скрипта:

Автор:Bedrich Rios

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: http://net.tutsplus.com

E-mail:contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал? Если ответ «Да», то жмите сюда.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Верстка сайта для начинающих

Прямо сейчас научитесь верстать сайты с нуля.

Смотреть курс

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Дмитрий

    Довольно эффектная вещь, отлично подойдёт для блогов и фотогалерей. Надо самому попробовать. Спасибо за идею.

  2. olejek-doc

    Очень интересно и захватывающе быстро все получилось у вас только к сожалению с javascript’ом у меня пока туговато, буду разбираться…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree