В былые времена, когда ещё не было возможности открывать страницу в новой закладке, клик по ссылке уводил пользователя с целевого сайта. Естественно это не нравилось шефу или клиенту и они хотели использовать открытие внутренних или внешних ссылок в новых окнах.

В наши дни вместо того, чтобы пользователям самим позволять выбирать поведение — открыть ссылку в отдельном окне или нет — до сих пор хотят данного функционала. Всё бы хорошо, но в XHTML strict использование атрибута ‘target=»_blank»‘ не является валидным :(

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

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

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

<a href="popup.html" rel="popup|400|200">Всплывающее окно</a>

где указываем нужные размеры — (‘popup|высота|ширина’)

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

<a href="http://en.wikipedia.org/wiki/City_Road" rel="external">Внешняя ссылка</a>

Ну вот — так немного красивее! Мы получили реальные ссылки, вот только появился незнакомый атрибут «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), который позволяет визуально определить по иконке внешнюю ссылку

1. Если же скрипт находит ‘|’ внутри rel, он использует разделитель для разбиения строки на три части — ‘popup‘, ширина и высота нашего всплывающего окна.
2. …помещает эти данные в стандартную функцию acpopup();
3. Добавляется всплывающая подсказка
4. Также добавляется CSS класс .popup, который позволяет визуально определить по иконке внешнюю ссылку
5. и сам запуск функции windowLinks().

CSS:

.external {
	font-weight:bold;
	background :transparent url(ext.gif) no-repeat right center;
	padding-right:12px;
}
.popup {
	font-weight:bold;
	background :transparent url(pop.gif) no-repeat right center;
	padding-right:12px;
}

В итоге получим:

Пример »

Скачать »

(перевод статьи New Windows and Usability: the Theory of ‘REL-ativity’)

Понравилась статья? Поделись с другими:

• 

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

1. Submit формы в новом окне
2. JavaScript Cheat Sheet
3. Флеш против IE. Побеждает SWFObject!