Unswww.WebZ.ru
Объект window от Java
Script позволяет создавать (подобно методу open)
всплывающие окна-диалоги. В таких диалогах можно
вводить определенную входную информацию и на ее
основе возвращать окну, вызвавшему диалог,
результаты обработки этих входных данных. Ниже мы
рассмотрим самый простой пример, где входными
параметрами в открывшемся окне-диалоге будут два
слагаемых, а диалог вернет их сумму вызвавшему окну.
Но сначала вкратце рассмотрим теорию.
У объекта window есть метод showModalDialog.
Синтаксис следующий:
showModalDialog(URL,
Arguments, Features)
URL Вызываемый
HTML-документ (как в методе open()). Arguments
Необязательный параметр, служащий для передачи
диалогу массива параметров. Поскольку массивы мы
пока не рассматривали, этим параметром пользоваться
не станем. Однако отметим, что задается этой
параметр с помощью свойства объекта window -
dialogArguments. Features Так же не обязательный
параметр, определяющий размеры вызываемого окна.
Среди группы этих параметров можно выделить
следующие:
dialogWidth: число Ширина диалогового окна.
dialogHeight: число Высота диалогового окна.
dialogTop: число Позиция левого верхнего угла
диалогового окна, относительно вызывающего окна по
вертикали.
dialogLeft: число Позиция левого верхнего
угла диалогового окна, относительно вызывающего окна
по горизонтали.
center:{yes | no | 1 | 0 } Центровка в окне
диалога. По умолчанию - yes.
Вот только мне так и не удалось понять, в каких
единицах выставляются эти размеры, но как мне
кажется в количестве символов. Однозначно не в
пикселях. Для нашего примера я подобрал эти величины
опытным путем.
Результатом работы диалога является значение,
которое можно получить с помощью свойства объекта
window - returnValue. В принципе с теорией вроде
все. Остальное по ходу дела. Приступаем! Для начала
создадим HTML-документ, под названием dialog.htm.
<html>
<head>
<title>Диалог </title>
<script>
function myDialog()
{
var left, top;
left = screen.width/2 - 20;
top = screen.height/2 - 12;
var argums =
'dialogWidth:20;dialogHeight:12;
dialogTop:top;dialogLeft:left;center:yes';
window.document.all.mySumm.value =
window.showModalDialog('adding.htm','', argums);
}
</script>
</head>
<body>
<center>
<h3>Сумма чисел </h3>
Сумма: <input type=text value="0"
ID="mySumm"> <br> <br>
<input type=button value="Слагаемые"
onClick="myDialog();">
<input type=button value="Сброс"
onClick="window.document.all.mySumm.value=0;">
</center>
</body>
</html>
Что мы тут сделали.
Во-первых определили текстовое поле с
идентификатором mySumm, чтобы потом к нему можно
было обратиться. Рассмотрим единственную функцию
myDialog:
function myDialog()
{
var left, top; //объявление переменных
left = screen.width/2 - 20;
top = screen.height/2 - 12;
var argums =
'dialogWidth:20;dialogHeight:12;
dialogTop:top;dialogLeft:left;center:yes';
window.document.all.mySumm.value =
window.showModalDialog('adding.htm','', argums);
}Во-первых мы прибегли к помощи свойства объекта window - screen чтобы получить значение разрешения экрана и вызываемый диалог разместить по его центру. Думаю, дальнейшие пояснения тут излишни. Что за цифры 20 и 12? Это как раз те которые мне пришлось для данного диалога получить опытным путем. А параметр Features метода showModalDialog мы зададим строкой, которую объявим как var argums. А далее после знака равенства через точку с запятой пишем все параметры, которые мы хотим задать. Венцом данной функции собственно и является вызов метода showModalDialog.
window.showModalDialog('adding.htm','', argums)
Параметр Arguments,
как и договаривались, мы опускаем. adding.htm это
HTML-документ, загружающийся во вновь открытое
диалоговое окно. Его мы сейчас рассмотрим. Но для
начала посмотрим что возвращает наш диалог.
Результат его работы должен быть присвоен текстовому
полу с идентификатором mySumm:
Запись вида window.document.all.mySumm.value
означает следующее. Мы обращаемся уже не к самому
окну, а ко всем (all) элементам документа (document)
данного окна, выбирая из них тот, у которого
идентификатор ID=mySumm, т.е. значению (value)
текстового поля с этим идентификатором присвоим то,
что вернул диалог в результате своей работы. А
теперь рассмотрим HTML-документ adding.htm, который
и будет представлять собой содержимое диалогового
окна.
<html>
<head>
<title>Сложение </title>
<script>
function mySumm()
{
window.returnValue =
parseInt(window.document.all.first.value) +
parseInt(window.document.all.second.value);
window.close();
}
</script>
</head>
<body>
<center>
<h3>Введите слагаемые </h3>
1-е слагаемое: <input type=text
ID="first"> <br>
2-е слагаемое:
<input type=text ID="second"> <br> <br>
<input type=button value="Получить сумму"
onClick="mySumm()";>
</center>
</body>
</html>Здесь почти ничего нового мы
не увидели. Два текстовых поля, с идентификаторами
first и second, символизирующие два слагаемых. В
итоге мы присваиваем свойству объекта window -
returnValue значение суммы двух слагаемых.
parseInt(window.document.all.first.value)
означает, что мы хотим
интерпретировать значение текстового поля с идентификатором first не как строку,
а как число. Допустим слагаемое first = 3, а second = 4, то запись вида:
window.document.all.first.value +
window.document.all.second.value
вместо
parseInt(window.document.all.first.value) +
parseInt(window.document.all.second.value)вернула бы нам "34", вместо "7".
Методом close() объекта window мы закрываем диалоговое окно. Собственно говоря,
этот метод позволяет закрывать абсолютно все окна.
Теперь осталось только создать и протестировать два HTML-документа dialog.htm и
adding.htm.
Попробуйте поэкспериментировать.
