Як створити навігацію c натисканням клавіш, використовуючи jQuery

15

«Ключем до створення успішного веб-сайту є та легкість, з якою користувачі знаходять те, що шукали. Так що варто витратити якийсь час і працю на створення і корисних, і візуально привабливих навігаційних систем. Останнім часом я став експериментувати з шляхами навігації по веб-сайту. У цьому уроці я покажу вам, як дати можливість користувачеві пересуватись по вашому сайту за допомогою клавіатури.»

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

Крок 1

Перше, що потрібно зробити – створити нашу тестову сторінку. В цьому випадку я буду називати її demo.html, а містити вона буде наступне:

Зв’язок з бібліотекою jQuery.

Посилання на сценарій, з яким ми будемо працювати пізніше. Давайте назвемо її keypress_nav.js

Посилання на CSS-файл, званий style.css (пізніше ми будемо працювати і з ним).

Заголовковий тег div, який буде містити крім іншого і нашу навігацію. І:

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

Отже, ось як demo.html виглядає в даний момент:

KeyPress Navigation Demo

Welcome!

Some Text

About Me

Some Text

No Spam Please

Some Text

Awards, So Many …

Some Text

Крок 2

Тепер, коли наші DIV и вже на місці, ми можемо продовжити і створити навігацію для цієї сторінки. Як ви вже здогадалися, ми будемо використовувати списку без порядкових номерів

    щоб зафіксувати посилання і ідентифікатори DIV як ID для цих посилань. Також ми додамо клас container до всіх DIV-«сторінок». Цей клас допоможе нам легко розрізняти ці DIV и, коли ми будемо створювати скрипт. Отже, ось те, що у вас зараз має вийти:

    KeyPress Navigation Demo

    Welcome!

    Some Text

    About Me

    Some Text

    No Spam Please

    Some Text

    Awards, So Many …

    Some Text

    Примітка: Літера (клавіша) всередині дужок – це та клавіша, яку ми пізніше будемо використовувати для навігації для нашої сторінки.

    Крок 3

    Як створити навігацію c натисканням клавіш, використовуючи 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: 10px 5px;
    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

    У цьому пункті підручника ваша сторінка повинна виглядати приблизно так:

    Як створити навігацію c натисканням клавіш, використовуючи jQuery

    Це готова сторінка, яка працює правильно і без включеного JavaScript. Однак, як я вже казав, давайте зробимо невеликий сюрприз для тих користувачів, на чиїх браузерах включений JavaScript. Зробимо це в два прийоми. По-перше, створимо дві функції, які будуть відповідно приховувати і показувати сторінки. І, по-друге, ми додамо якийсь код, щоб визначати клавіш, що натискаються користувачем. Давайте створимо файл, званий keypress_nav.js і почнемо працювати над нашими функціями.

    Крок 6

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

    {
    $(«.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»);
    });
    });
    }

    Крок 7

    Тепер, коли у нас всі функції закодовані, нам необхідно правильно їх викликати при завантаженні сторінки. Перше, що нам потрібно зробити, це приховати всі елементи класу container за винятком DIV, у якого є ідентифікатор home. Далі, нам потрібно викликати функцію showViaLink() із зазначенням нутрощів нашої навігації

      як параметра. І останнє, але не менш важливе – ми повинні обробити натискання клавіш користувача і викликати функцію 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»);
      }
      });
      });

      Крок 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 hides and 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»);
      });
      });
      }

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

      E-mail:[email protected]

      Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

      P. S. Хочете опублікувати цікавий тематичний матеріал? Якщо відповідь «Так», то тисніть сюди.