Ключ к успешности сайта - это легкость, с которой пользователь находит необходимое. Поэтому стоит вложить уйму времени и усилий для создания удобной, эффективной и привлекательной для глаза системы навигации по сайту. Недавно, я начал экспериментировать с новыми способами управления объектами сайта. В данном уроке я покажу и расскажу вам, как можно предоставить пользователю возможность перемещаться по сайту с помощью клавиатуры.
Шаг 1
Сначала нам надо создать тестовую страницу, на которой мы будем тренироваться. И назовем ее, скажем, demo.html. Она будет содержать следующее:
1) ссылка на фреймворк jQuery
2) ссылка на script-файл, которым мы займемся позже. Назовем его keypress_nav.js
3) ссылка на CSS-файл, который будет называться style.css. Мы его тоже создадим чуть позже
4) тег div с уникальным именем header, в котором мы и разместим всю нашу систему навигации
5) и пять уникальных элементов div, которые послужат нам страницами нашего тестового сайта
Вот и сам html-код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>KeyPress Navigation Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="keypress_nav.js"></script>
</head>
<body>
<div id="header">
<!-- Our navigation will go here -->
</div>
<div id="home">
<h2>Welcome!</h2>
<p>Some Text</p>
</div>
<div id="about">
<h2>About Me</h2>
<p>Some Text</p></p>
</div>
<div id="contact">
<h2>No Spam Please</h2>
<p>Some Text</p>
</div>
<div id="awards">
<h2>Awards, So Many ...</h2>
<p>Some Text</p>
</div>
<div id="links">
<h2>Cool Sites</h2>
<p>Some Text</p>
</div>
</body>
</html>
Шаг 2
Параграфы играющие роль страниц сайта готовы, пора приступить к созданию системы переключения между ними. Как вы, наверняка, догадались, мы воспользуемся элементом неупорядоченных списков <ul>, в котором мы и укажем пути к соответствующим элементам div, указывая их ID как конечные цели ссылок. Мы также добавим класс container всем DIV-«страницам». Прибавление данного класса поможет нам свободно ссылаться на них, пока мы будем создавать скрипт-код.
А вот и код, который должен получиться:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>KeyPress Navigation Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="keypress_nav.js"></script>
</head>
<body>
<div id="header">
<ul id="navigation">
<li><a href="#home">Home ( a )</a></li>
<li><a href="#about">About ( s )</a></li>
<li><a href="#contact">Contact ( d )</a></li>
<li><a href="#awards">Awards ( f )</a></li>
<li><a href="#links">Links ( g )</a></li>
</ul>
</div>
<div id="home" class="container">
<h2>Welcome!</h2>
<p>Some Text</p>
</div>
<div id="about" class="container">
<h2>About Me</h2>
<p>Some Text</p></p>
</div>
<div id="contact" class="container">
<h2>No Spam Please</h2>
<p>Some Text</p>
</div>
<div id="awards" class="container">
<h2>Awards, So Many ...</h2>
<p>Some Text</p>
</div>
<div id="links" class="container">
<h2>Cool Sites</h2>
<p>Some Text</p>
</div>
</body>
</html>
Обратите внимание: буква (клавиша), заключенная в круглые скобки, это кнопка клавиатуры, которую можно будет в дальнейшем использовать для управления страницами.
Шаг 3
Основная часть нашей тестовой страницы закончена, но не хватает внешней привлекательности. Давайте добавим немного стилей и оживим страницу. Работая со стилями, помните, что наша страница должна выглядеть привлекательно, даже если функция JavaScript отключена или не поддерживается браузером. Скрипты, с моей точки зрения, должны выступать в качестве приятного дополнения для пользователей, у которых подключен JavaScript, и не отчуждать тех, у кого они не поддерживаются. Мы же все-таки web-разработчики и наша основная задача заботиться о юзабилити сайта, не так ли?
На скриншоте сверху видно к какому виду мы будем стремиться. Дизайн очень простой и в нем задействованы яркие цвета для различения страниц. А вот и наш CSS-код:
body
{
margin: 0;
padding: 0;
font-family: "Lucida Grande", "Lucida Sans", sans-serif;
font-size: 100%;
background: #333;
}
/* Header
-------------------------------------------------- */
#header
{
width: 460px;
margin: 0 auto;
font-size: .75em;
font-family: "Helvetica Neue", Helvetica, sans-serif;
}
#header ul
{
list-style: none;
margin: 0;
padding: 0;
}
#header ul li
{
float: left;
text-align: left;
}
#header ul li a
{
display: block;
color: #ffff66;
text-decoration: none;
text-transform: uppercase;
margin-right: 20px;
}
#header ul li a:hover
{
text-decoration: underline;
color: #ffcc66;
}
/* Containers
-------------------------------------------------- */
.container
{
width: 400px;
height: 300px;
margin: 30px auto;
padding: 10px 20px;
border: 10px solid #fff;
color: #fff;
font-size: .75em;
line-height: 2em;
}
.container h2
{
padding: 5px 10px;
width: 200px;
}
#home { background: #15add1; }
#home h2 { background: #007aa5; }
#about { background: #fdc700; }
#about h2 { background: #bd9200; }
#contact { background: #f80083; }
#contact h2 { background: #af005e; }
#awards { background: #f18300; }
#awards h2 { background: #bb5f00; }
#links { background: #98c313; }
#links h2 { background: #6f9a00; }
/* Self-Clearing Rules
-------------------------------------------------- */
ul#navigation:after
{
content: ".";
display: block;
visibility: hidden;
clear: both;
height: 0;
}
* html ul#navigation { height: 1px; }
ul#navigation { min-height: 1px; }
Хочу отметить: я добавил к навигации несколько самоустраняющихся линеек, чтобы решить проблему недостаточной высоты, в связи с внутри размещенными элементам. Иными словами, граничная линейка самого верхнего контейнера получит нужный эффект на навигационный список <ul>.
Шаг 4
На данном этапе урока у вас должно было получиться следующее:
Готова функционирующая страница, которая отлично работает без всякого JavaScript. Однако, как я уже говорил раньше, давайте сделаем маленький бонус для пользователей с браузерами, его поддерживающими. Мы справимся в два этапа. Сперва, мы создадим две функции, которые будут скрывать и отображать страницы по запросу. А во-вторых, мы создадим код, который будет определять на какие кнопки клавиатуры нажал пользователь. Итак, перейдем к созданию файла keypress_nav.js, а затем приступим к работе над функциями.
Шаг 5
Нам нужно настроить наши функции должным образом. Одна из функций будет вызываться при нажатии на одну из ранее выбранных клавиш управления, а также будет скрывать все остальные контейнеры, отображая только нужный, (тот к которому прописан путь в ссылке).
А вот и сама функция:
function showViaKeypress(element_id)
{
$(".container").css("display","none");
$(element_id).slideDown("slow");
}
Вторая функция примет список ссылок и будет вызывать их при запуске целевой функции. Иными словами, данная функция будет получать вызов от навигационной ссылки, запускать атрибут href и отображать соответствующую DIV-«страницу». Вот так будет выглядеть вторая функция:
function showViaLink(array)
{
array.each(function(i)
{
$(this).click(function()
{
var target = $(this).attr("href");
$(".container").css("display","none");
$(target).slideDown("slow");
});
});
}
Шаг 6
мы создали код функций, теперь необходимо, чтобы все работало соответствующим образом, когда будет загружаться страница. Первое, что нам необходимо сделать, так это скрыть все элементы с классом container за исключением DIV-«страницы» с уникальным именем home. Далее нам нужно будет функция showViaLink(), в которой наш неупорядоченный список <ul>, включающий в себя все ссылки системы навигации, будет выступать в качестве параметра. Наконец, что не менее важно, мы должны постараться расслышать какую клавишу нажимает пользователь и вызывать функцию showViaPress(), в которой нужный ID является параметром. Этого можно добиться посредством элемента switch.
Элемент switch будет иметь 5 случаев (один случай для каждой ссылки) и номер, утвержденный в таблице символов ASCII. Например, если будет нажата клавиша "a", то элемент switch воспользуется случаем 97. А вот так должен выглядеть наш код:
$(document).ready(function()
{
// скрываем все DIV с CLASS container
// и отображаем только один с ID 'home'
$(".container").css("display","none");
$("#home").css("display","block");
// заставляем работать навигацию, когда все контейнеры скрыты
showViaLink($("ul#navigation li a"));
// прислушиваемся к работе клавиатуры пользователя
$(document).keypress(function(e)
{
switch(e.which)
{
// пользователь нажимает на клавишу "a"
case 97: showViaKeypress("#home");
break;
// пользователь нажимает на клавишу "s"
case 115: showViaKeypress("#about");
break;
// пользователь нажимает на клавишу "d"
case 100: showViaKeypress("#contact");
break;
// пользователь нажимает на клавишу "f"
case 102: showViaKeypress("#awards");
break;
// пользователь нажимает на клавишу "g"
case 103: showViaKeypress("#links");
}
});
});
Шаг 7
Теперь можно собрать все части в одно целое. Код должен выглядеть так:
$(document).ready(function()
{
// скрываем все DIV с CLASS container
// и отображаем только один с ID 'home' $(".container").css("display","none");
$("#home").css("display","block");
// заставляем работать навигацию, когда все контейнеры скрыту
showViaLink($("ul#navigation li a"));
// прислушиваемся к работе клавиатуры пользователя $(document).keypress(function(e)
{
switch(e.which)
{
// пользователь нажимает на клавишу "a"
case 97: showViaKeypress("#home");
break;
// пользователь нажимает на клавишу "s"
case 115: showViaKeypress("#about");
break;
// пользователь нажимает на клавишу "d"
case 100: showViaKeypress("#contact");
break;
// пользователь нажимает на клавишу "f"
case 102: showViaKeypress("#awards");
break;
// пользователь нажимает на клавишу "g"
case 103: showViaKeypress("#links");
}
});
});
// показывает нужный элемент и скрывает все остальные
function showViaKeypress(element_id)
{
$(".container").css("display","none");
$(element_id).slideDown("slow");
}
// вызывает нужный DIV в зависимости от 'href'
function showViaLink(array)
{
array.each(function(i)
{
$(this).click(function()
{
var target = $(this).attr("href");
$(".container").css("display","none");
$(target).slideDown("slow");
});
});
}
До следующих уроков!!!