
	Главная > Динамический HTML > Создание новых окон

МЕНЮ

H T M L

C S S

С к р и п т ы

JAVA скрипты

Раскрутка Сайта

Готовые шаблоны сайтов

П р о г р а м м ы

Поситите наш проект про мобильные телефоны http://samsu.narod.ru

Создание новых окон

Динамический HTML предоставляет возможность создавать для различных целей новые окна. Созданные с помощью JavaScript, такие окна имеют стандартный вид и по типу разделяются на диалоговые и обычные. Диалоговые окна, называемые, также, модальными, приостанавливают действие всех скриптов и ожидают от пользователя нажатия на какую-либо кнопку или закрытия окна. Обычные работают независимо от текущего окна, откуда запускается программа.

Диалоговые окна

Существует четыре метода создания диалоговых окон, которые перечислены в таблице.

Метод	Описание	Вид	Пример
alert	Выводит текст и ожидает нажатия на кнопку ОК. Используется преимущественно для сообщений об ошибках.		alert("Hello, world!")
confirm	Аналогично alert, но выводит две кнопки ОК и Cancel. Используется для задания вопроса. При нажатии на ОК возвращается true, а кнопка Cancel возвращает false.		if( confirm("Удалить все? Уверены?")) alert ("Удаляем...") else alert ("Ну как хотите...");
prompt	Запрашивает строку ввода.		n = prompt ("Введите ваше имя:", defaultText="") if (n) alert("Имя: " + n)
showModalDialog	Загружает в окно указанный файл. Может возвращать значение.	Поскольку этот тип окна отображает обычный HTML-документ, вид у него может быть любой.	showModalDialog ("color.html")

Методы alert и confirm позволяют выводить несколько строк текста. Для переноса текста на другую строку используется символ \n. Метод prompt допускает не более двух строк в тексте запроса.

Создание индивидуальных диалоговых окон

С помощью метода showModalDialog можно создавать окна по своему виду и желанию. Однако, данный способ создания модальных окон поддерживается только браузером Internet Explorer.

Подобные окна имееют следующие особенности:

отсутствуют кнопки навигации;

не работает правая кнопка мыши;

содержимое нельзя выделить.

Синтаксис вызова метода следующий.

Возвращаемое значение = showModalDialog("URL", "имя окна", "параметры")

URL представляет собой путь к HTML-документу, который следует открыть в диалоговом окне. Имя представляет собой условное название открываемого окна, его можно опустить.

Параметры для управления видом окна могут быть следующими.

Параметр	Значение	Описание
border	thick \| thin	Задает толщину рамки окна
center	yes \| no или 1 \| 0	Выравнивает окно по центру экрана монитора
dialogHeight	px, %...	Высота диалогового окна
dialogLeft	px, %...	Задает положение левого верхнего угла по горизонтали
dialogTop	px, %...	Задает положение левого верхнего угла по вертикали
dialogWidth	px, %...	Ширина диалогового окна
maximize	yes \| no или 1 \| 0	Добавляет кнопку "Развернуть" в строке заголовка
minimize	yes \| no или 1 \| 0	Добавляет кнопку "Свернуть" в строке заголовка

Перечисленные параметры могут идти в любом порядке через запятую. Размер диалогового окна не может быть меньше, чем 100х100 пикселов и не допустимо размещать его за пределами экрана. Включение или выключение параметра можно определять через указание им значения yes или no (или 1 и 0). Например, center=yes идентично center=1.

Пример 1. Создание диалогового окна

showModalDialog("tips.html", "", "dialogWidth=350px, dialogHeight=200px")

</script>

В примере создается окно с размерами 350х200, в которое загружается файл tips.html .

Создание всплывающих окон

Всплывающие окна представляют собой обычные окна браузера, которые создаются с помощью объекта window. При этом можно управлять видом этого окна, задавая его размеры и отключая различные элементы.

Для создания окна используется метод open, который имеет следующий синтаксис.

window.open("URL", "имя окна", "параметры")

Значения параметров совпадают с параметрами создания модального окна методом showModalDialog.

Параметры, управляющие видом окна имеют некоторые отличия от элементов диалоговых окон.

Параметр	Значение	Описание
directories	yes \| no или 1 \| 0	Отображает панель ссылок
location	yes \| no или 1 \| 0	Отображает адресную строку
menubar	yes \| no или 1 \| 0	Отображает меню
scrollbars	yes \| no или 1 \| 0	Показывает полосу прокрутки
toolbar	yes \| no или 1 \| 0	Показывает кнопки на панели инструментов
status	yes \| no или 1 \| 0	Отображает строку состояния
rersizible	yes \| no или 1 \| 0	Определяет, можно ли изменять размеры окна
left	пикселы	Задает положение левого верхнего угла по горизонтали
top	пикселы	Задает положение левого верхнего угла по вертикали
width	пикселы	Ширина окна
height	пикселы	Высота окна

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

Пример 2. Создание нового окна

window.open("help.html", "help", "width=350, height=200, status=0, menubar=0, location=0 resizable=0 directories=0 toolbar=0")

</script>

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

Закрытие окна

Если окно создано динамически с помощью скрипта, его можно закрыть в любой момент методом close.

Пример 3. Закрытие окна

<a href="javascript:help.close()">Закрыть окно</a>

Переменная help в примере является ссылкой на вновь созданное окно, поэтому его закрытие идет через метод help.close().

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

DimoN ©