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

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

В прошлый раз мы рассмотрели простейшие примеры диалоговых окон, которые позволяют получить от пользователя осмысленный ответ на вопрос (хотя использование этих методов не гарантирует этого, иногда осмысленный ответ не удается получить даже самыми жесткими методами). Теперь рассмотрим возможность взаимодействия (я, кажется, придумал новое слово: интеракция) с пользователем на более высоком уровне. Мы будем создавать диалоговые окна с возможностью применения форматирования 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