[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / Java Script /

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

Uns
www.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.
Попробуйте поэкспериментировать.




Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / Java Script /

Живые меню или Как сделать красиво с помощью CSS и JavaScript
14-03-2009   

Наверное, никто не сможет поспорить с утверждением, что главное в любой web-страничке - удобство для пользователя. После того, как мы выложили наше творение в сеть, мы сразу начинаем предпринимать массу усилий для того, чтобы привлечь на свой сайт максимум посетителей... подробнее

Кол. просмотров: общее - 5436 сегодня - 0

Локальная баннерная система
14-03-2009   

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

Кол. просмотров: общее - 4606 сегодня - 0

Локальная реклама
14-03-2009   

В Internet Zone-154 была небольшая заметка Локальная баннерная система. Автор - Вадим Беляков (http://tuta.da.ru) предлагал поставить на страничку баннер, используя небольшой javascript. Я прочитал этот номер лишь в середине апреля. Мне сразу же пришло в голову использовать его для текстовой рекламы... подробнее

Кол. просмотров: общее - 4955 сегодня - 0

Использование JS для создания «умных» форм
14-03-2009   

JS, или JavaScript язык сценариев, которые выполняются на стороне клиента и не требует перезагрузки страницы. JavaScript был разработан компанией Netscape в 1995 году... подробнее

Кол. просмотров: общее - 4782 сегодня - 0

Обманщик спам-роботов
14-03-2009   

Как известно, бичом современного Интернета является спам - непрошенная рассылка рекламных и прочих сообщений. По данным некоторых аналитиков, он составляет более 50% всех сообщений в Сети... подробнее

Кол. просмотров: общее - 4947 сегодня - 0



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects