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