Воскресенье
17-11-2024
20:59
Главная страница
Каталог статей
Информист Приветствую Вас Гость | RSS
Регистрация
Вход
Меню сайта

Категории каталога
YUI - Yahoo! User Interface [1]
Решение проблем, связанных с библиотекой web-интерфейса от Yahho
Web интерфейсы [18]
советы по оформлению web страниц
Протоколы [1]
MVC Visual Studio [1]

Наш опрос
Насколько вам понравился этот сайт
Всего ответов: 545

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

Начало » Статьи » Web » Web интерфейсы

Юзабильные popup'ы

Новое окно браузера открыть не составляет труда — мы просто прописываем в теге a атрибут target со значением _blank (некоторые нерадивые товарищи, кстати, неправильно указывают вместо _blank значение _new, что приводит к тому же эффекту, но совершенно не соответствует спецификации). В то же время, часто необходимо, чтобы новое окно открывалось с дополнительными параметрами: окно должно быть определённых размеров, не должна присутствовать строка состояния и т. п. Это легко достигается, как вам вероятно известно, с помощью метода window.open(URL, windowName[, parameters]).

Я не буду описывать все значения, которые может принимать третий аргумент функции open(). Напомню только, что их необходимо писать через запятую, без пробелов. По умолчанию все опции включены, но если вы укажите хотя бы одну, то другие все автоматически отключатся. Следующий пример открывает popup с адресной строкой, ширина окна составляет 400px, высота — 300px и окно расположено в верхнем левом углу экрана:

popupWin = window.open("contacts.html", "contacts", "location,width=400,height=300,top=0");
popupWin.focus(); // передаём фокус новому окну


Ликбез закончен, теперь собственно о том, как правильно использовать метод window.open(). Точнее, как нужно ставить ссылки на новые окна, открывающиеся с помощью JavaScript'а.

Казалось бы, нет ничего проще — пишем что-то вроде <a href="javascript:popupWin = window.open('contacts.html', 'contacts', 'location,width=400,height=300,top=0'); popupWin.focus();">Наши координаты</a>.

Часто пишут ещё так: <a href="#" onClick="popupWin = window.open('contacts.html', 'contacts', 'location,width=400,height=300,top=0'); popupWin.focus();">Наши координаты</a>.

На самом деле, более правильный вариант таков:

<a href="contacts.html" target="_blank" onClick="popupWin = window.open(this.href, 'contacts', 'location,width=400,height=300,top=0'); popupWin.focus(); return false;">Наши координаты</a>

Чем же последний вариант хорош? Многим. Во-первых, вы заботитесь о тех пользователях, у которых по той или иной причине не работает JavaScript. У них откроется файл в обычном новом окне браузера, и они смогут-таки узнать ваши координаты. Во-вторых, поисковые машины смогут корректно проиндексировать страницу contacts.html, не спотыкаясь на JavaScript'е. Ну а в-третьих, статусная строка будет выглядеть нормально. Вместо сбивающих с толку знаков типа «#» в статусной строке будет «человекопонятный» URL.

Кстати, обратите внимание на использование ссылки this.href, указывающей на атрибут href тега a. Таким образом мы избавляемся от необходимости повторно указывать адрес открываемой страницы.

Заметьте также, что в обработчике события onClick нужно указать return false. В противном случае, откроется два новых окна — одно из-за действия атрибута target, другое из-за JavaScript'а.


Источник: http://htmlcoder.visions.ru/JavaScript/?16
Категория: Web интерфейсы | Добавил: Judge (09-08-2009) | Автор: Александр Шуркаев
Просмотров: 958 | Рейтинг: 0.0 |

Всего комментариев: 0
Имя *:
Email *:
Код *:
Форма входа

Поиск по каталогу
Яндекс


Поиск по Информисту

Наша кнопка


Друзья сайта

Статистика


Copyright MyCorp © 2006Сайт создан в системе uCoz