Робота з діалоговими вікнами
В рамках динамічного HTML можливе створення декількох типів вікон. Вище було розглянуто створення вікон браузера, які працюють незалежно від поточного вікна. Такі вікна називаються немодальними.
Інші типи вікон, до яких відносяться різні діалогові вікна (діалоги), зазвичай використовуються, коли користувач повинен зробити вибір для продовження роботи в додатку. При виклику будь-якого з діалогів робота додатка у поточному вікні зупиняється, і браузер очікує закриття діалогового вікна. Такі вікна називаються модальними.
Організація простих діалогів (методи alert, confirm і prompt). Найпростіші діалогові вікна запитів і повідомлень можна створювати за допомогою методів об'єкту window. З двома з цих методів (alert і prompt) ви вже знайомі з прикладів попереднього розділу, тепер ми розглянемо їх більш детальніше. Наведемо повний перелік методів, що відповідають за виведення простих діалогів в поточне вікно:
alert () – відображає повідомлення в простому діалоговому вікні, що має одну кнопку ОК. Діалоги alert не переривають виконання програми, проте alert - це саме той тип наполеглевих повідомлень, від яких користувач зазвичай радий позбутися;
confirm (msg) – відображає в діалоговому вікні питання msg, на який потрібно відповісти «так-ні» (ОК або Скасувати). Функція СON f irm () повертає значення true, якщо натиснута кнопка ОК, або значення false при натисканні кнопки Скасування. Таким чином можна організувати розгалуження в програмі;
prompt () – відображає діалогове вікно з текстовим полем, в яке користувач
повинен ввести рядок. У діалозі є також кнопка ОК (повертається значення текстової величини) і кнопка Скасування (повертається значення null).
Методи confirm і prompt не повертають жодного значення, поки користувач не закрив діалогове вікно. Тільки після закриття вікна можливе продовження роботи. Наведемо в якості приклада сценарій, в якому використані три розглянутих методу виклику діалогових вікон:
<SCRIPT LANGUAGE = "JavaScript">
// Цей сценарій описує відвідування клубу
alert ('Клуб "Джої"');
var msg = "Чи є Ви членом клубу?";
// Перевірка умови членства в клубі
if (confirm (msg))
{
// Діалог для введення імені
n = prompt ("Ваше ім'я?", "");
// Запрошення в клуб
document.write ("Ласкаво просимо," + n + "!");
}
else
// Повідомлення для відвідувача, який не перебуває в клубі
alert ("Вам необхідно зареєструватися");
</ SCRIPT>
Створення індивідуального діалогового вікна. Ще одним типом діалогу, підтримуваного в DHTML, є індивідуальне діалогове вікно. Таке вікно, на відміну від описаних вище діалогів, являє собою Web-сторінку в форматі HTML із заданими розмірами і своїм URL.
Визначення вікна (метод showModalDialog). Індивідуальне діалогове вікно створюється за допомогою методу showModalDialog (). Це вікно є, природно, модальним і вимагає для продовження роботи відповіді від користувача. В індивідуальний діалог завантажується файл HTML, проте діалог не є копією вікна браузера. Це всього лише засіб перегляду. Тому в діалоговому вікні можна, наприклад, виділити текст або переміщатися по посиланнях, як у вікні браузера.
Виклик методу showModalDialog в загальному випадку виглядає:
window.showModalDialog("URL","varToDialog","features");
Перший аргумент "URL" – це покажчик файлу, в якому міститься код діалогового вікна. Другий аргумент "varToDialog" відрізняється від відповідного аргументу методу open: він визначає змінну (може бути масив), яка передається в діалогове вікно. Третій аргумент "features" - список параметрів діалогового вікна. Однак цей список оформляється трохи інакше, ніж список параметрів звичайного вікна браузера. По-перше, параметри відокремлюються один від одного крапкою з комою. По-друге, розмір і положення діалогового вікна визначаються такими властивостями:
В аргументі "URL" вказується адреса файлу, що містить код діалогу. Скорочення "varToDialog" позначає список переданих аргументів, a "features" - параметри вікна. Як параметри індивідуального діалогового вікна зазвичай використовуються наступні атрибути:
dialogWidth, dialogHeight – задають вихідну ширину і висоту діалогового вікна в відносних одиницях em, наприклад, dialogWidth: 25em;
dialogLef t; dialogTop – вихідне положення лівої і верхньої меж вікна;
font (шрифт за замовчуванням для діалогового вікна), font-family (гарнітура
шрифту), font-size (розмір шрифту), font-style (стиль виведення символів). Всі
ці властивості можуть приймати ті ж значення, що і властивості CSS;
border – задає товщину границі діалогового вікна шляхом присвоєння значень thick (товста) або thin (тонка);
center – вирівнює діалогове вікно по центру екрана, ця властивість може мати значення yes або no (або відповідно 1 або 0);
maximize і minimize – визначають відображення кнопок розгортання і згортання вікна відповідно; цим властивостям можуть присвоюватися значення yes, no (або 1,0);
help – визначає наявність кнопки довідки в рядку заголовка (значення параметра yes або 1) або відсутність цієї кнопки (значення nо або 0).
Виклик методу showModalDialog, в якому вказуються значення параметрів, може виглядати наступним чином:
window. showModalDialog ( "datalog.html11," varToDialog "," dialogWidth: 30em; dialogHeight: 20em; center: 1; maximize; border: thick ");
Якщо параметри відсутні в списку features будуть призначені параметри вікна за замовчуванням. Якщо розмір створеного вікна недостатній для розміщення в ньому вмісту HTML-документа (файл, вказаний в "URL"), то у вікні автоматично з'явиться смуга прокрутки.
Розглянемо приклад створення діалогового вікна, що виводить на екран деяку інформацію у вигляді багаторядкового текстового поля (Рис. 6.4).
Рис. 6.4 - Приклад диалогу
Для виклику діалогу введемо відповідний елемент в поточне вікно браузера, наприклад, кнопку «Про нас». Якщо натиснути цю кнопку, з'явиться створюване діалогове вікно з інформацією, наприклад, про фірму. Наведемо фрагмент коду цієї сторінки:
<HTML>
<HEAD>
<TITLE> Створення діалогу </ TITLE>
<SCRIPT LANGUAGE = "JavaScriptі>
function ref ()
{
window.showModalDialog ("about.html", "DialExamp",
"DialogWidth: 25em; dialogHeight: 18em");
</ SCRIPT>
</ HEAD>
<BODY>
<! - HTML-код сторінки ~~>
<INPUT type = "button" value = "O нас" onclick = "ref ();">
</ BODY>
</ HTML>
HTML-код цього діалогового вікна розміщується в окремому файлі about .html, який вказаний в першому аргументі методу showModalDialog
<HTML>
<HEAD>
<TITLE> Інформація </ ТITLE>
</ HEAD>
<BODY STYLE = "background: lightgrey">
<CENTER>
<BR>
<НЗ> Інформація про нас </ НЗ>
<TEXTAREA rows = 4 cols = 40 name = comments>
Видавництво "Web-Опус" організовано для просування в Web всього найкращого, чудово-прикольного і унікально-незвичайного, створеного не руками маніяків і терористів, а в головах наших авторів.
</ TEXTAREA>
<BR> <BR>
<INPUT type = button style = "Width: 15em" value = "OK" onclick = "window.close ()">
</ BODY>
</ HTML>
Для продовження роботи закрийте діалог, клацнувши на кнопці ОК, і ви повернетеся у вихідне вікно браузера. Зверніть увагу, що метод window.close закриває діалогове вікно, а не вікно браузера. Якщо ж документ about. html у вас був відкритий не в окремому вікні, а в поточному вікні браузера (командою Файл - Відкрити), то при закритті вікна клацанням по кнопці ОК з'явиться попередження про спробу закриття файлу самої Web-сторінкою.
Обмін даними між діалоговим вікном і документом.
Для введення інформації в HTML-документ можна використовувати діалогові вікна. Якщо потрібно вводити невеликий обсяг даних, то можна скористатися простим немодальним вікном, що викликається за допомогою методу prompt. Однак для передачі безлічі значень в вихідний документ більш підходить індивідуальне діалогове вікно. Це вікно дозволяє організувати обмін даними між користувачем та програмою. У діалозі можуть вводитися значення в поля введення, вибиратися опції зі списку, встановлюватися прапорці і перемикачі і т.д.
Приклад.
Привітання Клубу знавців.
Уявімо, що ви опинилися учасником гри в клубі знавців. Спробуємо змоделювати вхід в клуб. Перед початком гри вам потрібно в вихідної Web-сторінці (Рис. 6.5) натиснути кнопку Ваше ім'я. У відповідь з'явиться діалогове вікно (Рис. 6.5), в якому необхідно в текстовому полі набрати своє ім'я. Після закриття цього вікна діалогу клацанням по кнопці ОК, в вихідному вікні з'явиться вітання гравцю «Хорошої гри, ..»
Рисунок 6.5 - Приклад
Наведемо приклад коду вихідного HTML-документа:
<HTML>
<HEAD>
<TITLE> Greeting </ TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function ref () {
xname = window.showModalDialog ("dianame.html", "", "dialogWidth: 20em; dialogHeight: 12em"); Greet .value = "Хорошої гри," + xnaine + "!"; }
</ SCRIPT>
</ HEAD>
<BODY>
<CENTER>
<Н1> Клуб знавців </ Н1>
<INPUT type = "button" value = "Baiue ім'я" onclick = "ref (); n>
<BR> <BR>
<INPUT typee = "text" id = "Greet" size = 30>
</ CENTER>
</ BODY>
</ HTML>
Тут метод showModalDialog вказує на файл dianame. html, що містить код діалогового вікна:
<HTML>
<HEAD>
<ТITLE> Ім'я </ Т1ITLE>
</ HEAD>
<BODY style = "text-align: center; background: lightgrey"
onunload = "window.returnValue = login.value;"> <Н2> Введіть імж / Н2>
<INPUT type = "text" name = "login">
<BR> <BR>
<INPUT type = "button" style = "width: 5em" value = "OK"
onclick = "window.close ()">
</ BODY>
</ HTML>
Діалогове вікно після свого закриття повертає значення текстового поля login. Значення, що повертається міститься у властивості window. returnValue, яке виступає як обробник події onUnload.
Приклад. Замовлення в ресторані
Розглянемо більш складний приклад введення даних через діалогове вікно. Нехай це буде замовлення екзотичних страв в китайському ресторані. Для виконання замовлення потрібно в початковому вікні (Рис 6.7 a), що має кнопку і два текстових поля, натиснути кнопку Замовлення. Потім в діалозі (Рис. 6.7 b) відвідувач може встановити прапорці, що відповідають замовленням, і натиснути кнопку ОК. Після цього у вихідному вікні документа в текстових полях з'явиться інформація про кількість замовлених страв і про суму замовлення.
Рис.6.7 Приклад обміну інформацією між діалоговим вікном і вихідним документом
А -вікно додатка;
б - діалогове вікно
Сценарій вихідного документа містить визначення масиву цін, виклик діалогового вікна, що заповнюється відвідувачем, і обробку даних, переданих з діалогового вікна:
<HEAD>
<ТIITLE> Замовлення </ ТITLE>
<SCRIPT language = "JavaScript">
// Визначення масиву price, що містять ціни страв
var price = new Array ();
price [0] = 1.5;
price [1] = 2.5;
price [2] = 2;
price [3] = 1;
// Визначення функції-обробника події onclick кнопки «Замовлення"function ref () {/ * Виклик методу showModalDialog для обміну інформацією з діалоговим вікном. Перший аргумент методу вказує файл zakaz.html, який відповідає вмісту діалогу. Другий аргумент відсутній. Третій аргумент визначає набір відображуваних елементів діалогового вікна. Значення діалогового вікна, що повертається, передаються масиву client. * /
var client = new Array ();
client = window.showModalDialog ("zakaz.html", "",
"DialogWidth: 15em; dialogHeight: 18em"); // Визначення кількості замовлених страв і вартості замовлення.
var zakNumber = 0; var zakSum = 0; for(var i=0; i<4; i++){ zakNumber += client[i]; zakSum += client[i]*price[i]; }
Sum.value = zakSum;
Num.value =" Ви замовили"+zakNumber+" страви"; }
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<Н2>Китайський ресторан</Н2>
<INPUT type="but ton" s ty1e="background:1ightgrey" value="Заказ"
onClick="ref() ; ">
<BR><BR>
<INPUT type="text" id=ffNum" size=25>
<BR><BR>
Ціна заказу, $:<BR>
<INPUT type="text" id="Sum" size=10>
</CENTER>
</BODY>
</HTML>
Наведемо код діалогового вікна, що міститься у файлі zakaz .html. Основні пояснення дамо в коментарях:
<HTML>
<HEAD>
<Т1ТЬЕ> Меню </ TITLE>
<SCRIPT language = "JavaScript">
/ * Визначення масиву-індикатора zak.
Елементи цього масиву приймають тільки два значення: 0 ( «не замовлено") і 1 "замовлено") * / var zak = new Array ();// Обнулення початкових значень елементів масиву zak for (var i = 0; i <4; i ++) zak [i] = 0;
// Визначення функції обробника onclick кнопки OK function outvalues () {
/ * Визначення значень, що повертаються (масиву zak) і закриття діалогового вікна * /
window.returnValue = zak; window.close (); }
</ SCRIPT> </ HEAD>
<BODY leftmargin = 40 style = іtext-align: lef t; background: 1ightgrey "> <BR>
<Н2> Меню </ Н2> <НЗ> Зробіть замовлення </ НЗ>
<FORM name = "menu"> <INPUT type = checkbox name = flrnenu0ptions "onclick =" zak [O] = 1 "
Акулячі плавники <ВК> <INPUT type = checkbox name = Mmenu0ptions "onclick =" zak [l] = 1 "
Риб'ячий шлунок <ВІ> <INPUT type = checkbox narne = llmenu0ptions "onclick =" zak [2] = 1 "
Летюча Mbiuib <BR> <INPUT type = checkbox narne = f'menu0ptionsH onclick = "zak [3] = 1"
Паростки бамбука <ВІ> </ FORM>
<INPUT TYPE = button style = nwidth: 5ein "value = nOK" onclick ^ "outvalues ()"> </ BODY> </ HTML>
Обробка подій вікна
Нагадаємо, що до подій вікна відносяться події, пов'язані із завантаженням і розвантаженням документа. Розглянемо обробку цих подій в динамічному HTML.
Подія onLoad для різних елементів. Після аналізу документа і його розмітки браузер переходить до завантаження впроваджених елементів. Простежити послідовність завантаження різних елементів і всього документа можна за допомогою події onload (див. Пункт «Події завантаження і вивантаження» розділу 11).
Для визначення черговості настання подій завантаження розглянемо приклад документа, що містить зображення. Встановимо обробник події onload в тегах <IMG> H <BODY>:
<HTML>
<HEAD>
<Т1ТЬЕ> Послідовність подій onload </ TITLE>
</ HEAD>
<BODY onload = "alert ( 'Наступ onload для BODYf);">
<! - Інструкції HTML-документа ->
<IMG src = "puz.jpg" onload = "alert ( 'Наступ onload для
IMG '); ">
<! - Інструкції HTML-документа ->
</ BODY>
</ HTML>
Обробники подій onload будуть захоплюватися по мірі завантаження елементів документа. Спочатку спливе повідомлення «Наступ onload для IMG», яке сигналізує про те, що завантажено зображення. Після цього з'явиться повідомлення «Наступ onload для BODY», що сигналізує про завантаження всього документа. Для об'єкта window не існує елемента - прямого аналога в коді HTML (як, наприклад, для зображення). Однак за поведінкою елемента BODY можна сказати, що подія onload для об'єкта window виникає, коли документ цілком проаналізований і всі його елементи (включаючи і всі малюнки) завантажені.
Перевірка завантаження документа.
Щоб уникнути звернення до якого-небудь елементу HTML до закінчення завантаження документа, можна поступити наступним чином. Скористаємося подією onload об'єкту window, яке виникає, коли документ цілком проаналізований і виконане його початкове завантаження. В тег <BODY> (або в тег <FRAMESET>, якщо мова йде про фрейм) введемо обробник подій onload (), для якого визначимо нову властивість об'єкта window. Цю властивість, назвемо його isLoaded, буде приймати значення true лише в разі завантаження документа:
<BODY onload = "window.isLoaded = true;">
Тепер при запуску інших обробників подій можна перевіряти значення window. isLoaded з тим, щоб бути впевненими, що документ повністю завантажений і всі об'єкти, що в ньому містяться визначені. Наведемо приклад такої перевірки для елемента button, побудувавши документ за наступною схемою:
<HTML>
<HEAD>
<Т1ТЬЕ> Запуск обробника з перевіркою </ Т1Т'Е>
<SCRIPT>
window.isLoaded = false;
// Будь-яка функція обробника події
function inform () {
alert ( "Документ завантажений"); }
</ SCRIPT> </ HEAD> <BODY onLoad = "window.isLoaded = true;">
<! - Інструкції HTML-документа ->
<INPUT TYPE = BUTTON NAME = rest VALUE = "Відомості про завантаження"
onClick = "if (window.isLoaded) inform ();">
<! - Інструкції HTML-документа -> </ BODY> </ HTML>
Натискання кнопки «Відомості про завантаження» буде оброблятися лише в разі значення window. isLoaded = true, тобто для завантаженого документа. В принципі подібні перевірки значення прапора window. isLoaded можна встановити у всіх обробниках подій, які повинні виконуватися за умови повного завантаження документа.