Модальный диалог

ВНИМАНИЕ! Конкурс по программированию!

Проект Programmers.kz и школа hotPen3D2D предлагает Вам курсы по веб-дизайну, веб-программированию и компьютерной графике. Подробности здесь.

Информация к новости

Просмотров: 1800
Автор: КазКиберГетик

(голосов: 0)

Категория: WEB-программирование » JavaScript » Уроки JavaScript

Объект 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.
Попробуйте поэкспериментировать. Возникнут вопросы, милости прошу, обращайтесь.
Следующая рассылка, видимо, будет уже после Нового года, поэтому позвольте, пользуясь случаем, всех поздравить.
Поздравляю всех подписчиков с Новым 2004 годом, желаю здоровью, счастья и успехов, как в жизни, так и на фоне Web-творчества.
Источник: web-brodilka.ru

Вернуться Комментариев: 0

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Комментарии (0)

Модальный диалог

Наш сайт рекомендует:

Добавление комментария