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

Дата публикации: 2009-12-21

jQuery

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

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

Шаг 1

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

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

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"//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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>KeyPress Navigation Demo</title>

</head>

<body>

</div>

<h2>Welcome!</h2>

</div>

<h2>About Me</h2>

</div>

<h2>No Spam Please</h2>

</div>

<h2>Awards, So Many ...</h2>

</div>

<h2>Cool Sites</h2>

</div>

</body>

</html>

Шаг 2

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"//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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>KeyPress Navigation Demo</title>

</head>

<body>

<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>

<h2>Welcome!</h2>

</div>

<h2>About Me</h2>

</div>

<h2>No Spam Please</h2>

</div>

<h2>Awards, So Many ...</h2>

</div>

<h2>Cool Sites</h2>

</div>

</body>

</html>

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

Шаг 3

jQuery

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

То, что мы стремимся получить, можно увидеть на скриншоте, расположенном сверху. Все очень просто, используются приятные, смелые цвета, чтобы выделить отдельные секции. Итак, вот наш 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; }

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; }

Шаг 5

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

jQuery

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

Шаг 6

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

{
	$(".container").css("display","none");
	$(element_id).slideDown("slow");
}

{

$(".container").css("display","none");

$(element_id).slideDown("slow");

}

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

{
	array.each(function(i)
	{
		$(this).click(function()
		{
			var target = $(this).attr("href");
			$(".container").css("display","none");
			$(target).slideDown("slow");
		});
	});
}

{

array.each(function(i)

{

$(this).click(function()

{

var target = $(this).attr("href");

$(".container").css("display","none");

$(target).slideDown("slow");

});

}

Шаг 7

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

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

$(document).ready(function()
{
	// hides all DIVs with the CLASS container
	// and displays the one with the ID 'home' only
	$(".container").css("display","none");
	$("#home").css("display","block");

	// makes the navigation work after all containers have bee hidden
	showViaLink($("ul#navigation li a"));

	// listens for any navigation keypress activity
	$(document).keypress(function(e)
	{
		switch(e.which)
		{
			// user presses the "a"
			case 97:	showViaKeypress("#home");
						break;	

			// user presses the "s" key
			case 115:	showViaKeypress("#about");
						break;

			// user presses the "d" key
			case 100:	showViaKeypress("#contact");
						break;

			// user presses the "f" key
			case 102:	showViaKeypress("#awards");
						break;

			// user presses the "g" key
			case 103:	showViaKeypress("#links");
		}
	});
});

$(document).ready(function()

{

// hides all DIVs with the CLASS container

// and displays the one with the ID 'home' only

$(".container").css("display","none");

$("#home").css("display","block");

// makes the navigation work after all containers have bee hidden

showViaLink($("ul#navigation li a"));

// listens for any navigation keypress activity

$(document).keypress(function(e)

{

switch(e.which)

{

// user presses the "a"

case 97: showViaKeypress("#home");

break;

// user presses the "s" key

case 115: showViaKeypress("#about");

break;

// user presses the "d" key

case 100: showViaKeypress("#contact");

break;

// user presses the "f" key

case 102: showViaKeypress("#awards");

break;

// user presses the "g" key

case 103: showViaKeypress("#links");

}

});

Шаг 8

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

$(document).ready(function()
{
	// hides all DIVs with the CLASS container
	// and displays the one with the ID 'home' only
	$(".container").css("display","none");
	$("#home").css("display","block");

	// makes the navigation work after all containers have bee hidden
	showViaLink($("ul#navigation li a"));

	// listens for any navigation keypress activity
	$(document).keypress(function(e)
	{
		switch(e.which)
		{
			// user presses the "a"
			case 97:	showViaKeypress("#home");
						break;	

			// user presses the "s" key
			case 115:	showViaKeypress("#about");
						break;

			// user presses the "d" key
			case 100:	showViaKeypress("#contact");
						break;

			// user presses the "f" key
			case 102:	showViaKeypress("#awards");
						break;

			// user presses the "g" key
			case 103:	showViaKeypress("#links");
		}
	});
});

// shows a given element and hides all others
function showViaKeypress(element_id)
{
	$(".container").css("display","none");
	$(element_id).slideDown("slow");
}

// shows proper DIV depending on link 'href'
function showViaLink(array)
{
	array.each(function(i)
	{
		$(this).click(function()
		{
			var target = $(this).attr("href");
			$(".container").css("display","none");
			$(target).slideDown("slow");
		});
	});
}

$(document).ready(function()

{

// hides all DIVs with the CLASS container

// and displays the one with the ID 'home' only

$(".container").css("display","none");

$("#home").css("display","block");

// makes the navigation work after all containers have bee hidden

showViaLink($("ul#navigation li a"));

// listens for any navigation keypress activity

$(document).keypress(function(e)

{

switch(e.which)

{

// user presses the "a"

case 97: showViaKeypress("#home");

break;

// user presses the "s" key

case 115: showViaKeypress("#about");

break;

// user presses the "d" key

case 100: showViaKeypress("#contact");

break;

// user presses the "f" key

case 102: showViaKeypress("#awards");

break;

// user presses the "g" key

case 103: showViaKeypress("#links");

}

});

// shows a given element and hides all others

function showViaKeypress(element_id)

{

$(".container").css("display","none");

$(element_id).slideDown("slow");

}

// shows proper DIV depending on link 'href'

function showViaLink(array)

{

array.each(function(i)

{

$(this).click(function()

{

var target = $(this).attr("href");

$(".container").css("display","none");

$(target).slideDown("slow");

});

}

Автор:Bedrich Rios

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

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

E-mail:contact@webformyself.com

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

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

Метки: JavaScript, css меню

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

Шаг 1

Шаг 2

Шаг 3

Шаг 5

Шаг 6

Шаг 7

Шаг 8

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

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

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

Материалы

Мы в соц. сетях

Связь

Информация