 |
|
 |
decoroom.info - створи сайт безкоштовно! |
|
||||
|
|
|||
|
|
|
|
7.3. Сторінка, керована з клавіатури
А зараз давайте розглянемо, як можна обробляти ще деякі події, які можуть виникати при прогляданні веб-сторінок. Якщо в минулому розділі ми в основному займалися обробкою подій миші, то зараз займемося подіями, пов'язаними з клавіатурою.
Дійсно, в деяких випадках буває зручно використовувати клавіатуру, наприклад, для навігації по сторінці. Як приклад давайте трохи удосконалимо словник термінів. Чи не так, логічно було б, якби користувач міг перейти до відповідної букви алфавіту, просто натиснувши клавішу з її символом на клавіатурі?
Реакція на натиснення клавіші
Давайте спробуємо реалізувати цю можливість. Спершу призначимо елементу <BODY> обробник подій, що реагує на натиснення клавіш. Він називається onKeyPress:
<BODY onKeyPress="press()">
Тепер давайте напишемо саму функцію press(), яка викликатиметься при натисненні якої-небудь клавіші. Оскільки у нас в прикладі букв всього шість (від А до Е), то хай натиснення на ці клавіші переміщатиме нашу сторінку до відповідної букви. Натиснення на будь-яку іншу клавішу можна обробити як переміщення в початок файлу.
Звернете увагу на те, що для організації доступу до кожної букви (і на початок файлу) нам не доведеться прикладати ніяких додаткових зусиль! Адже ми вже раніше створили відповідні якорі з помо щью тега <А>, і хоча вони і не мають атрибуту ID=, у них є атрибут NAME=, який теж можна використовувати для доступу до елементів.
Отже, при натисненні на клавішу потрібно перевірити, яка буква була натиснута. Це можна зробити, прочитавши значення властивості window event keyCode. Воно рівне ASCIIJ-коду натиснутої клавіші. Наприклад, якщо натиснута клавіша з російською буквою а, то значення властивості window event keyCode рівне 1072, тобто коду цієї букви.
Таким чином, ми можемо використовувати оператора switch, щоб призначити різні дії залежно від коду натиснутої клавіші:
switch(window.event.keyCode){ case 1072: // якісь дії case 1073: // якісь дії і т.д.
Щоб прокрутити сторінку до заданого елементу, можна скористатися методом scrolllntoView( ). Наприклад, якщо ми напишемо
document.all.BukvaA.scrolllntoView() ;
то в результаті сторінка буде прокручена так, що якір BUKVAA опиниться у верхній частині вікна броузера.
Облік розкладки клавіатури
Тепер треба подумати ще про те, що користувач може забути переклю- читься на російську розкладку клавіатури. Давайте не примушуватимемо його це робити. Оскільки ми знаємо, що на одній клавіші з російською бук вий а розташована буква f, на одній клавіші з би - знак < і т. д., ми можемо здійснити перевірку не тільки кодів букв а, би, в, г, д, е, але і кодів цим волів f <, d, u, I, t. Можна написати, наприклад, так: case 1072: case 102: document.all.BukvaA.scrolllntoViewO; break; case 1073: case 44: document.all.BukvaB.scrollIntoView() ; break;
В цьому випадку прокрутка до букви а здійсниться, навіть якщо користувач натисне клавішу з буквою а або f, забувши перемкнутися на російську рас-кладку клавіатури. Аналогічно можна здійснити прокрутку і до дру- ним буквам. Щоб при натисненні який-небудь іншої клавіші повернутися початку файлу, можна привласнити це повернення злучаю “default”:
default”: document.all.Top.scrollIntoView(); break;
Ось, власне кажучи, і все. Але щоб вивчити ще деякі обробники подій, давайте додамо ще ефект зменшення яскравості тексту під час натиснення клавіші. Так звертають увагу користувача на те, що “щось відбувається” (а саме: прокрутка). Для цього потрібно іспользо-вать обробники подій, що реагують роздільно на натиснення і на відпуск клавіші. Вони називаються, відповідно: onKeyDown і onKeyUp:
<BODY onKeyPress="press ()" onKeyDown="this.style.color='gray'" onKeyUp="this style.color='black'">
Тепер під час натиснення на клавішу колір тексту зміниться на сірий, а після відпуску клавіші - назад на чорний. Як бачите, нічого складного.
Підказка для читача
І як останній штрих давайте додамо підказку для користувача. Хай, коли він почне прокручувати сторінку уручну (за допомогою смуги прокрутки), в рядку стану відобразиться така підказка: Ви можете переміщатися до потрібної букви, використовуючи клавіатуру'. Це можна зробити, використовуючи обробник подій, що реагує на прокрутку сторінки (є і такий!). Він називається onScroll:
<BODY onKeyPress="press ()" onKeyDown="this.style.color='gray'" 'Вы можете перемещаться к нужной букве, используя клавиатуру''">
До речі, один раз з'явившись, підказка так і залишиться в рядку стану, але в даному випадку в цьому немає нічого поганого. Рядок стану - місце не найпомітніше, так що підказка в ній виглядає цілком коректно. Ось чого робити не треба, так це використовувати методи типу alert, що впадають в очі:
<BODY onKeyPress="press ()" onKeyDown="this.style.color='gray'" onKeyUp="this.style.color='black'" onScroll="alert('Вы можете перемещаться к нужной букве, используя клавиатуру'')">
В цьому випадку при спробі прокрутки сторінки уручну користувач < разу ж отримає вікно-попередження. Якщо ж він просто хоче почему- або використовувати ручну прокрутку, це вікно його дратуватиме і заважатиме роботі. Отже попереднє рішення як не можна більш підходить для даного випадку - невелика підказка в рядку стану і все.
Гаразд, давайте подивимося, що у нас вийшло, тут введено ще декілька усовершен ствованій, зв'язаних з використанням таблиці стилів. Наприклад, немає необхідності кожен термін укладати в теги <В> і </В> . Натомість для тега <DT> заздалегідь визначена стильова властивість font-weight: bold;.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Словарь терминов</ТIТLЕ>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html" CHARSET="windows-1251">
<STYLE> BODY ( background-color: #EAEAEA; color: black;
} A:link, A:active, A:visited { color: #7A3F51;}
DT { font-weight: bold; } </STYLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function press () switch(window.event.keyCode)
{ case 1072: case 102: document.all.BukvaA.scrollIntoView() ;
break; case 1073: case 44: document.all.BukvaB.scrollIntoView() ;
break; case 1074: case 100: document.all.BukvaV.scrollIntoView () ;
break; case 1075: case 117: document.all.BukvaG.scrollIntoView() ;
document.all.BukvaD.scrollIntoView() ;
break; case 1077: case 116: document.all.BukvaE.scrollIntoView() ;
break; default:
document.all.Top.scrollIntoView() ; break;
} }
//-->
</SCRIPT>
</HEAD>
<BODY onKeyPress="press()" onKeyDown="this.style.color='gray'" onKeyUp="this.style.color='black'" onScroll="window.status= 'Вы можете перемещаться к нужной букве, используя клавиатуру!'">
<Н1><А NAME="Top">Cловарь терминов</А></Н1>
<HR ALIGN="left" WIDTH="40%">
<НЗ> <А HREF="#BukvaA">A</A>
<А HREF="#BukvaB">Б</A> <А HREF="#BukvaV">B</A>
<А HREF="#BukvaG">Г</A> <А HREF="#BukvaD">Д</A>
<А HREF="#BukvaE">E</A> </НЗ> Для перемещения к соответствующей букве вы можете использовать клавиатуру
<HR ALIGN="left" WIDTH="40%">
<Н1><А NAME="BukvaA">A</A></Hl>
<DL> <DT><A NAME="avtentich">AБTEHTИЧECKИЙ КАДАНС</А>
<DD>кадансовый оборот, в котором заключительная тоническая гармония предваряется доминантовой
<DT>
<A NAME="aliquot">AЛИKBOTHЫE СТРУНЫ</А>
<DD>резонирующие струны, к которым исполнитель не прикасается во время игры
<DT><A NAME="atakta">ATAKTA</A>
<DD>гармонический элемент на басу нижнего или верхнего вводного тона
</DL> <SMALLXA HREF="#Top">B начало</А>
</SМАLL> <HR ALIGN="'left" WIDTH="40%">
<H1><A NAME="BukvaB">Б</A></Hl>
<DL> <DT><A NAME="bagatel">БАГАТЕЛЬ</A>
<DD>небольшая нетрудная для исполнения пьеса <DT>
<A NAME="bartok">БAPTOKOBCKOE ПИЦЦИКАТО</А>
<DD>сильный щипок струны с последующим ударом о струны о гриф <DT>
<A NAME="bonang">БОНАНГ</A> <DD>Ha6op из 10-12 гонгов разного размера </DL>
<SMALL><A HREF="#Top">B Haчaлo</A></SMALL>
<HR ALIGN="left" WIDTH="40%">
<H1><A NAME="BukvaV">B</A></Hl> <DL>
</DL> <SMALL>
<A HREF="#Top">B Haчaлo</A></SMALL>
<HR ALIGN="left" WIDTH="40%">
<H1><A NAME="BukvaG">Г</A></Hl>
<DL> </DL> <SMALL><A HREF="#Top">B Haчano</A></SMALL>
<HR ALIGN="left" WIDTH="40%">
<H1><A NAME="BukvaD">Д</A></Hl>
<DL> </DL>
<SMALL><A HREF="#Top">B Haчaлo</A></SMALL>
<HR ALIGN="left" WIDTH="40%">
<H1><A NAME="BukvaE">E</A></Hl>
<DL></DL> <SMALL>
<A HREF="#Top">B начало</A></SMALL>
</BODY>
</HTML>
Отже, ми познайомилися зі всіма основними обробниками подій. Звичайно, існують і інші обробники, але вони застосовуються рідше.
|
|
|
|
