Tech tipsComputer Tricks

Поехали, сразу с середины статьи Alex’a Walker’a – New Windows and Usability: the Theory of ‘REL-ativity’. Вольный первод :)

До сих пор у всех нас есть шеф или клиенты, которые хотят от нас использования всплывающих окон, ну и конечно же, открытия внешних ссылок в новых окнах. Но использование аттрибута ‘target=»_blank»‘ в XHTML strict не является валидным :(

Использование 'href="javascript:...."' или 'href="#" onclick="..."' для всплывающих окон нам не подходит изначально – т.к. протокола javascript: нет, а # вообще никуда не ведёт – в любом случае при отключенном js пользователь окажется в неприятном положении :(

Итак, усовершенствуем ссылки…

Всплывающие окна (Popups)

горный орёл

Внешние ссылки (в новом окне)

магазин

Ну вот – так немного красивее! Мы получили реальные ссылки, вот только появился незнакомый аттрибут REL – сокращение от ‘relationship’, который определяет отношения документа в ссылке с текущей страницей (W3C). Его-то мы и можем применить с пользой для себя.

Конечно же браузер не знает что делать с нашими аттрибутами, поэтому нам потребуется JavaScript. Скрипт будет представлять собой вариант из двух отдельных скриптов (Kevin’s XHTML Compliant Target, Mike Rainey’s Dynamic Popups) с добавлением иконок.

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

Что же делает скрипт?

  1. Функция — windowLinks() — помещает все ссылки на странице в рабочий массив
  2. Начинает искать в массиве ссылки с аттрибутом REL
  3. Если находит REL со значением ‘external’, то используя DOM меняет значение аттрибута target на ‘_blank’ (зачем? а затем, что в отличие от XHTML – в спецификации DOM он не запрещён!).
  4. Добавляется всплывающая подсказка, информирующая пользователя о поведении ссылки
  5. Также добавляется CSS класс (.external), который позволяет визуально определить по иконке внешнюю ссылку
  6. Если же скрипт находит (‘|’) внутри REL, он исполюзует разделитель для разбития строки на три части — ‘popup’, ширина и высота нашего всплывающего окна.
  7. …и помещает эти данные в стандартную функцию acpopup();
  8. Добавляется всплывающая подсказка
  9. Также добавляется CSS класс (.popup), который позволяет визуально определить по иконке внешнюю ссылку
  10. и сам запуска функции windowLinks().

Пример:
пример

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

  1. Статьи по работе с заказчиком в вебдизайне
  2. Что же такое GTD?
  3. Встречайте – Hipster PDA
  4. Submit формы в новом окне
  5. Электрокниги – ala ebooks