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