Javascript навигация по странице

Навигация с помощью стрелочек, Javascript

Мой друг starfake попросил опубликовать его пост. Недавно он оставил один неосторожный комментарий, за что был жестоко наказан сообществом 🙂 Если пост вам понравится или даже будет полезен, прошу поднять ему карму.

Когда-то давно, прочитав в Лебедевском техногретте пост про навигацию стрелочками решил сделать такую же на форуме одного своего (с другом) проекта.
Сказано — сделано. Навигация стрелочками заработала, чему я очень обрадовался, но спустя некоторое время выявился небольшой баг. Находясь на текстовом поле, редактируя запись, вместо перехода с Ctrl между словами получаешь переход на следующую или предыдущую страницу (и удаление записи). Меня пару раз отматерили, а скрипт убрали.
Недавно мне нечего было делать на работе и я решил переписать его, учитывая фокус на форме.

var focusStatus = null;
var focusedElement = null;

$(document).ready(function() $(«textarea, input[type*=’text’], input[type*=’password’]»).focus(function() <
focusStatus = 1;
focusedElement = this.id;
$(«#text»).text(«focusStatus = » + focusStatus + «, focusedElement = » + focusedElement + «\n»); // Для теста выводил текст в див
>);
$(«textarea, input[type*=’text’], input[type*=’password’]»).blur(function() focusStatus = null;
focusedElement = null;
$(«#text»).text(«focusStatus = » + focusStatus + «, focusedElement = » + focusedElement + «\n»); // Для теста выводил текст в див
>);
$(document).keydown(function(event) if (event.ctrlKey && !focusStatus) var link = null;
var href = null;
switch (event.keyCode? event.keyCode: event.which? event.which: null) case 0x25:
link = $(«#prev»).attr(«href»);
break;
case 0x27:
link = $(«#next»).attr(«href»);
break;
>
if (link) document.location = link;
>
>);
>);

Для ускорение написал с использованием jQuery. К сожалению, jQuery знаю не очень хорошо, поэтому буду благодарен за комментарии и предложения по улучшению (наверняка можно сделать красивей).
От оригинальной Лебедевской версии отличается только:
наличием переменной focusStatus (наличие которой проверяем при нажатии Ctrl), focusedElement (остался на всякий случай).
Оказывается к большому сожалению, в JS нельзя (? вроде бы) узнать, на чем стоит focus. Поэтому добавились 2 функции focus() и blur() на важных на мой взгляд элементах — текстовом поле, и инпутах (текст и пароль). На фокусе ставится значение переменной 1, на blur() null.
Навигация стрелочками осуществляется только когда переменной focusStatus нет.

На Хабре, кстати тоже можно ввести такую штуку, потому что навигация работает, когда стоишь на поле поиска.

Upd. К сожалению, тут в коде отступы слетают, поэтому положил код еще тут.
Upd#2 Реализация и плагин отmaxic, используемая тут.
Upd#3 Вариант без jQuery от seraph

Источник

JSNAV

Всё чаще и чаще в web появляются сайты, использующие навигацию, написанную на JavaScript. Типичный случай использования javascript для навигации: страница с меню и блоком контента, куда через AJAX подгружается содержимое:

Пользователь кликает по пункту, JavaScript грузит из сети содержимое, вставляет в блок контента, пользователь доволен: страница без перезагрузки показывает требуемое и траффика потребовалось меньше за счёт того, что не потребовалось грузить все эти HEAD, BODY, STYLE и прочие элементы.

Но вот проблема: URL страницы. Если на old scool сайтах на каждый пункт меню показывается новая HTML страница, и у пользователя есть вменяемый URI, который он может скопировать из адресной строки бразуера, послать другу или положить в закладки, то в случае AJAX интерфейсов в URI странице зачастую нет никаких ссылок на текущий контент документа.

Пересылая ссылку из адресной строки браузера другу, пользователь не может быть уверен, откроется ли документ с тем содержимым, что он просматривает сейчас, или откроется документ с начальным содержимым страницы.

Не с секрет, что для решения этой проблемы многие программисты кодируют ссылку на текущее просматриваемое содержимое в якорь (anchor) URI документа. К примеру, на сайте jqapi.com (скриншот которого приведён вначале топика) при выборе того или иного пункта меню якорь страницы меняется на #p=.

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

К сожалению, на данный момент каждый изобретает свои велосипеды для решения проблемы кодирования в якоре текущего содержимого документа. Нет единого стандарта кодирования якорей. Кроме того, разработчики зачастую забывают для чего изначально использовались якоря и лишают пользователя возможности навигации внутри документа.

Чтобы как-то решить эти проблемы к нам в голову с хабраюзером gbezyuk пришла идея создания библиотеки JSNAV, которая помогает решить указанные выше проблемы.

Как это работает?

JSNAV кодирует вызовы JavaScript обработчиков в URI документа. Для кодирования используется RFC1630 совместимые URI следующего вида:
user:pass@host:port/path/resource?query#anchor;navEventName;param1;param2;.

• до служебного символа # URI страницы ничем не отличается, от указанного в стандарте, изменения касаются лишь синтаксиса якоря
• сразу же после # и до символа; идёт обычный HTML якорь со стандартным действием (прокручивание страницы до элемента якоря)
• после якоря идёт служебный символ; и указывается имя события
• далее через символ; идёт список параметров, с которыми будут вызваны обработчики событий; параметры закодированы в URL encoding в байтовой кодировке UTF-8

JSNAV так же поддерживает работу с и обычными якорями: в случае перехода по ссылке с якорем производится scrollTo к элементу якоря. При этом в URI сохраняется описание последнего зарегистрированного события.

Обработчики представляют из себя обычные function объекты, на вход которым передаются декодированные из якоря параметры события.

var addClassHandler = function (className, textId) var elm = textId? document .getElementById(textId) : this ;
if (elm.className && elm.className.indexOf(className) < 0) elm.className += " " + className;
>
>
JSNAV.bind( «addClass» , addClassHandler);

• test.html#;addClass — вызов addClassHandler() в контексте window.document.body
• test.html#;addClass;className — вызов addClassHandler(‘className’) в контексте window.document.body
• test.html#;addClass;className;elementId — вызов addClassHandler(‘className’, ‘elementId’) в контексте window.document.body
• test.html#anchor;addClass;className — вызов addClassHandler(‘className’) в контексте элемента якоря (элемента с или name==’anchor’) и прокрутка до элемента якоря

JSNAV

Библиотека написана на pure JS и, по идее, не должна конфликтовать ни с одним из известных фреймворков.

Зарепортить ошибку, предложить патч или скачать код можно на сайте проекта. Исходники доступны под Apache2 License.

Посмотреть, как всё это работает можно в примере на этой странице.

P.S.

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

Источник

Html навигация по странице

Часто на сайтах, где на одной странице находится много контента применяют навигацию на хэштэгах. Это самая простейшая html навигация по странице. Примером может служить википедия. Смысл заключается в том, что при клике на ссылке происходит перемещение к определённому параграфу. Давайте разберёмся как это устроено и заданим плавность при прокрутке страницы.

Так же такую навигацию называют навигация по якорям. Для начала создадим якоря в ссылках и тексте. Создадим горизонтальное меню и назовём его topmenu . Пункт меню будет являться ссылкой. В ссылке будет стоять хэштег с номером параграфа item1 . Параграф 1 будет начинаться с заголовка

. В заголовке будет id c таким же названием как и хэштег

paragraf 1

. Это и будет наш якорь. При нажатии на ссылку меню будет происходить переход к нашему якорю. Ниже приведён листинг html кода меню и параграфов.

Осталось нам осуществить плавность данного перехода. Для этого нам понадобится библиотека jquery. Подключим её в хэдер.

$(document).ready(function()< $('.topmenu a').click(function()< /*задали какой мы хотим отступ от верха страницы*/ var otstupTop=100; $('body,html').animate(< /*получили положение элемента вычли отступ и прокрутили*/ scrollTop: $($(this).attr('href')).offset().top-otstupTop >, 1500); >); >);

Этот код нужно пояснить подробнее. Мы задали анимацию прокрутки scrollTop с временем 1500 для элементов body,html при клике по ссылке в меню .topmenu a . Что бы у нас получился отступ от верха экрана в 100px мы его сначало задали переменной var otstupTop=100 и вычислили вычтя его из $(this).attr(‘href’)).offset().top . Это расстояние, которое нужно прокрутить до параграфа, смотря по какой ссылке мы кликнули.

Источник

Урок 7. JavaScript в веб-разработке

Модели BOM и DOM. Навигация по элементам документа. Доступ к узлам и атрибутам страницы. Изменение структуры DOM. Основные браузерные события.

1. Объект window
2. Объект document — модель DOM
3. Объектная модель браузера — BOM
4. Подключение скриптов к сайт

1. Создадим текстовый элемент и заголовок первого уровня в начале страницы .
2. Копирование абзаца и добавление его после секции с заменой текст.
3. Замена всех тегов на странице заголовками второго уровня.
4. Добавление текста со специальными символами

1. Вывод содержимого атрибута «class».
2. Изменение классов
3. Изменение атрибутов тегов
4. Сброс стилей

1. Обработка события через свойство тэга.
2. Обработка события через выбор элемента в js-файле.
3. Обработка события через специальные методы.
4. Параметр event функции-обработчика.
5. Этапы события (погружение, достижение цели, всплытие).
6. Делегирование событий

Язык JavaScript создавался, в первую очередь, для работы с фронтендом, клиентской стороной пользовательского интерфейса. С его помощью HTML и CSS становятся максимально управляемыми, изменяемыми, с гарантией работы практически на всех устройствах.

Сегодня CSS обладает функционалом, способным заменить часть кода JavaScript, но этого все еще недостаточно, да и достигается существенно большими усилиями. JS-скрипты добавляют динамику на веб-страницы, делая их интерфейс предельно эргономичным и удобным для всех типов пользователей.

Возможности JavaScript уже не ограничены только лишь frontеnd’ом , его применяют на серверной стороне, разных платформах и устройствах. Наша задача: рассмотреть этот язык программирования в плане его использования в браузере, на пользовательской стороне.

Чтобы JavaScript получил возможность запуска (в браузере, операционной системе), необходимо предоставить ему определенную функциональность. Ее называют окружением. Окружение позволяет языку программирования получить доступ к своим объектам, функциям, переменным в дополнение к базовым инструментам JavaScript. В частности, браузер «разрешает» управлять web-страницами. Схема браузерного окружения приведена ниже:

Источник