Главная
К библиотеке

Military.com Free Screensavers!

Взаимодействие с пользователем

ВНИМАНИЕ!!! На этой странице используется код, который корректно отрабатывается только браузером Internet Explorer версии не ниже 4.00

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

Методы для открытия новых окон
Метод Описание Пример
alert(message)
Отображает модальное (требующее реакции пользователя) окно, содержащее кнопку "Ok". Используется, преимущественно, для сообщений об ошибках. Я, в своей практике, использую его для простейшей отладки скриптов, так как оно позволяет вывести содержимое переменной.

<>

confirm(message)
Данное окно аналогично окну Alert, за исключением того, что оно содержит две кнопки - "Ok" и "Cancel". Позволяет получить от пользователя подтверждение или отказ от каких-либо действий. Возвращает значение True если нажата кнопка Ok и False в случае нажатия кнопки Cancel:
if (confirm("Пример окна Confirm")) {
     alert("Ok"); }
else {
     alert("Cancel");
 }

<>

open([url [,name [,
options [,
replace]]]])
Открывает новое окно браузера, содержащее документ, находящийся по адресу "url", поле options может содержать следующие элементы:
Элемент Значения Описание
directories [yes|no] | [1|0] Включает в открываемое окно строку каталогов
menubar [yes|no] | [1|0] Включает в открываемое окно строку меню
location [yes|no] | [1|0] Включает в открываемое окно строку адреса
toolbar [yes|no] | [1|0] Включает в открываемое окно строку инструментов
scrollbars [yes|no] | [1|0] Включает в открываемое окно полосы прокрутки содержимого
status [yes|no] | [1|0] Включает в открываемое окно строку состояния
menubar [yes|no] | [1|0] Включает в открываемое окно строку меню
height пиксели Высота открывемого окна
width пиксели Ширина открываемого окна
top пиксели Расстояние между верхней границей открываемого окна и верхней границей рабочего стола
left пиксели Расстояние между левой границей открываемого окна и левой границей рабочего стола
resizable [yes|no] | [1|0] Включает-выключает возможность изменения размеров открываемого окна

Строка options задается таким образом: "option = value [,option2 = value2... [,optionn = valuen] ... ]]".

Необходимо заметить, что функция open является методом элемента класса window. Таким образом вызов ее будет выглядеть так: window.open(....)

Теперь рассмотрим возможность взаимодействия (я, кажется, придумал новое слово: интеракция) с пользователем на более высоком уровне. Мы будем создавать диалоговые окна с возможностью применения форматирования HTML. Это позволит немного раскрасить нашу серую диалоговую жизнь в среде Windows.

Для создания таких окон используется функция showModalDialog(URI,title,options). В качестве параметра она принимает имя файла, содержащего форму диалогового окна. Файл этот - обычный .html файл (URI), его название (title) и параметры (options) окна.

Несколько сложнее обстоит дело с возвращаемыми значениями. Для того, чтобы получить их в "родительском" окне (в том окне, из которого произошел вызов диалогового окна), окно диалога должно заполнить значениями массив window.returnValue. Если для ввода данных используется вот такая форма:

<FORM NAME="dataForm">
Имя:<INPUT TYPE=TEXT NAME="firstName" VALUE="Иван">
Фамилия:<INPUT TYPE=TEXT NAME="lastName" VALUE="Петров">
Возраст:<INPUT TYPE=TEXT NAME="age" VALUE="25">
Пол:
<SELECT NAME="sex">
<OPTION VALUE="мужской">муж.</OPTION>
<OPTION VALUE="женский">жен.</OPTION>
</SELECT>
<INPUT TYPE=SUBMIT STYLE="font-size: 10pt"
       ONCLICK="setValues()" VALUE="Все верно!">
</FORM>

то для заполнения массива данных можно использовать следующую процедуру:

<SCRIPT TYPE="text/javascript">
function setValues () {
  var valArray = new Array;
  for (var intLoop = 0; intLoop < document.dataForm.length; intLoop++)
      with (document.dataForm[intLoop])
           if (name != "")
              valArray[name] = value;
  window.returnValue = valArray;
  event.returnValue = false;
  window.close();
}
</SCRIPT>

"вытащить" эти данные в родительском окне мы сможем так, например:

<SCRIPT TYPE="text/javascript">
   function getData() {
     var
       results = new Array();
     results = window.showModalDialog("data.html")
     resStr = "Ошибка в данных!"
     if ( results != null ) {
        resStr = "Введены данные:\n";
        resStr += "Имя: " + results["firstName"] + "\n";
        resStr += "Фамилия: " + results["lastName"] + "\n";
        resStr += "Пол: " + results["sex"] + "\n";
        resStr += "Возраст: " + results["age"] + "\n";
     }
     alert(resStr);
   }
</SCRIPT>

Перейдем к примерам.

 

Параметры окна, вызываемого функцией showModalDialog

Наименование Значения Описание
border [ thick | thin ] Толщина границы окна
center [ yes | no ]|[ 1 | 0 ] Выравнивание окна по горизонатли
dialogHeight Единицы длины Высота диалогового окна
dialogWidth Единицы длины Ширина диалогового окна
dialogTop Единицы длины Расстояние от верхней границы экрана до верхней границы окна
dialogLeft Единицы длины Расстояние от левой границы экрана до левой границы окна
font Описание шрифта, как в CSS Определяет способ начертания шрифта в диалоговом окне. Можно использовать описание отдельных элементов стиля (font-family, font-size, font-style, font-variant, font-weight).
help [ yes | no ]|[ 1 | 0 ] Кнопка вызова подсказки в заголовке окна
maximize [ yes | no ]|[ 1 | 0 ] Кнопка максимизации в заголовке окна
minimize [ yes | no ]|[ 1 | 0 ] Кнопка минимизации в заголовке окна

http://exper.ural.ru/

Hosted by uCoz