Mar

23

Зручна навігація з допомогою JavaScript: Ctrl + Вправо: наступна сторінку (+ Вліво: попередня)

web-розробка Автор: Роман Голубовський

Теги : , , , , , ,

ctrl_prev_next

Днями займався створенням презентації. В силу декількох причин, робив її у вигляді послідовно з’єднаних між собою html-сторінок. У навігації між сторінками було використано кнопки “вперед” і “назад“, розташовані знизу, щоб не забирати важливе місце зверху сторінки. Але, як то часто буває, деякі сторінки вийшли більші за розміром і повністю не вміщались на екрані. Тобто вийшло так, що для того, шоб перейти на іншу сторінку, потрібно перемотати її вниз і там клікнути мишкою по кнопочці “вперед”. Трохи незручно, правда? Потрібно було знайти рішення, яке б покращило зручнісь у переміщенні по сторінках презентації (usability). Згадалась популярна фіча з навігацією по сторінках з допомогою клавіш Ctrl + Вправо для переходу на наступну сторінку або Ctrl + Вліво для переходу на попередню відповідно.

Отож, результат більш-менш візуалізувався, залишилось лише реалізувати його. Почав шукати в Гуглі. Але на мої запити типу “js ctrl клавиша вправо”, “js следующая страница” нічого корисного не знайшлось. Довелось йти на сайт, на якому я бачив це рішення – сайт студії Артемія Лєбєдєва.

[Доречі, коли я по-пам'яті набрав адресу сайту Лєбєдєва, - помилився і набрав через дефіс (art-lebedev.ru замість artlebedev.ru), - мене перекинуло на сайт компанії що займається виготовленням підлог. Як міг перший веб-дизайнер рунету Тьома Лєбєдєв припуститись такої помилки - не зареєструвати подібне доменне ім'я. (Хоча хто зна, може це така накрутка відвідувань сайту від його студії!?) Ок, щось я відхилився від теми.]


Отож, рішення (як в Артемія Лєбєдєва). В html-сторінки підключається JS-файл з потрібним скриптом. Плюс у заголовку сторінки (між <head> і </head>) потрібно прописати адреси попередньої і наступної сторінок (у прикладі ми знаходимся на сторінці page-2.html; попередня і паступна сторінки – це page-1.html і page-3.html відповідно). Загалом все має виглядати так (у найпростішому випадку):

<html>
<head>
	<title>page-2.html</title>
	<script type="text/javascript" src="navigate.js"></script>
	<link rel="prev" href="page-1.html" id="NextLink" />
	<link rel="next" href="page-3.html" id="PrevLink" />
</head>
<body>
	<!-- html-код + текст -->
    	<a href="page-1.html">&larr; Назад</a> + <b>Ctrl</b> + <a href="page-3.html">Вперед &rarr;</a>
	<!-- html-код + текст -->
</body>
</html>

Ну, і далі приведу скрипт JavaScript, що підключається до сторінки і виконує всю роботу. Зауважу лише, що скрипт повністю як на сайті Артемія Лєбєдєва, тому містить в собі зайву для наших потреб функціональність: переходи при натисненні на клавіші ctrl + вверх та ctrl + вниз.

document.onkeydown = NavigateThrough;
function NavigateThrough (event)
{
	if (!document.getElementById) return;
	if (window.event) event = window.event;
	if (event.ctrlKey)
	{
		var link = null;
		var href = null;
		switch (event.keyCode ? event.keyCode : event.which ? event.which : null)
		{
			case 0x25:
				link = document.getElementById ('NextLink');
				break;
			case 0x27:
				link = document.getElementById ('PrevLink');
				break;
			case 0x26:
				link = document.getElementById ('UpLink');
				break;
			case 0x28:
				link = document.getElementById ('DownLink');
				break;
			case 0x24:
				href = '/';
				break;
		}
		if (link &amp;&amp; link.href) document.location = link.href;
		if (href) document.location = href;
	}
}

Іноді usability вимагає додаткових витрат на розробку, але ці витрати виправдовують себе. Зважайте на зручність користування у своїх рішеннях!
Цікавих Вам ідей!

Схожі статті

Сподобалась стаття - підпишись на оновлення по RSS, на пошту або в ЖЖ!
1 Коментар

Коментарі:

avinet:

Нічого геніального тут немає. Звичайна подія на клавіші)

16 Jul 2010 @ 17:37

Коментувати