Вредоносное ПО (malware) - это назойливые или опасные программы,...
Разработка HTML-формы для диалогового окна
В качестве интерфейса записной книжки мы создадим диалоговое окно (пользовательскую форму), которое показано на рис. 7.3.
Рис. 7.3. Диалоговое окно для работы с записной книжкой
Эта форма реализуется с помощью HTML-файл Phone.htm, который полностью приведен в листинге 7.6.
В самом начале файла Phone.htm ставится тег , указывающий на то, что содержимым файла является текст в формате HTML, а также теги и , внутри которых задаются используемая кодировка (charset=windows-1251) и заголовок формы (теги и ):
Форма для записной книжки
Для того чтобы задать цвет формы, в теге используется атрибут bgcolor со значением " silver ":
Атрибут scroll="no" указывает на то, что в диалоговом окне не должно быть полос прокрутки.
Наша форма состоит из семи текстовых полей ввода (табл. 7.2) и восьми кнопок (табл. 7.3).
Таблица 7.2. Поля ввода диалогового окна для работы с записной книжкой
txtLastName | 50 | Поле для ввода фамилии |
txtName | 50 | Поле для ввода имени |
txtPhone | 15 | Поле для ввода номера телефона |
txtStreet | 50 | Поле для ввода названия улицы |
txtHouse | 10 | Поле для ввода номера дома |
txtApp | 5 | Поле для ввода номера квартиры |
txtNote | 80 | Поле для ввода примечания |
Таблица 7.3. Кнопки диалогового окна для работы с записной книжкой
btnNext | Переход к следующей записи | |
>> | btnFinal | Переход к последней записи |
Команды, создающие форму, находятся внутри тегов и . Сами текстовые поля ввода и кнопки создаются в HTML-файле с помощью одного и того же тега . Внутри этого тега нужно указать несколько атрибутов:
Type - определяет тип элемента управления (для поля ввода type="text" , для кнопки type="button");
Name - задает имя элемента управления;
Size - определяет длину строки поля ввода в символах;
Value - задает надпись на кнопке.
Для того чтобы поля ввода располагались точно друг под другом, мы поместим их в таблицу с невидимыми границами, состоящую из двух столбцов: в первом находится описание (метка) для поля, во втором - сам элемент управления. Таблица в HTML-файле создается с помощью парных тегов
и | , определяющие одну ячейку таблицы, например:Фамилия | указывается аргумент width , задающий ширину строки в процентах от общей ширины строки. Кнопки в форме выводятся друг за другом, нужное расстояние между ними достигается с помощью неразрывных пробелов (escape-последовательность  ), например: Листинг 7.6. Описание формы в HTML-файле (Phone.htm) Форма для записной книжки
Все готово. Как видите мы использовали минимальное количество строк кода, несоизмеримое с тем, если бы мы подключали для этого сторонний плагин. Теперь при нажатие на кнопку «Открыть окно» вы увидите диалоговое окно, нажатие на кнопку «Закрыть» скроет его. Стилизации диалоговых оконНе думаю, что нужно сильно погружаться в то, как стилизовать данное всплывающее окошко с помощью CSS. Здесь все предельно ясно и без моей помощи. Задам лишь его общий стиль для макета. dialog { top: 28%; width: 400px; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 15px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); border-top: 5px solid #eb9816; } button{ display: inline-block; border-radius: 3px; border: none; font-size: 0.9rem; padding: 0.4rem 0.8em; background: #eb9816; border-bottom: 1px solid #f1b75c; color: white; font-weight: bold; margin: 0 0.25rem; text-align: center; } button:hover, button:focus { opacity: 0.92; cursor: pointer; }
Если требуется полностью сфокусировать внимание пользователя на всплывающем окне, есть смысл использовать модальные диалоговые окна. Их вызов не сильно отличается от обычных. Требуется изменить лишь в JS файле.show() на the .showModal() . В HTML не нужно ничего менять. (function() { var dialog = document.getElementById("Dialog"); document.getElementById("showDialog").onclick = function() { dialog. showModal(); }; document.getElementById("closeDialog").onclick = function() { dialog.close(); }; })();
Очень часто для ввода каких-либо данных в Windows-приложениях применяются диалоговые окна. Эти окна содержат элементы управления, в которых и вводятся требуемые приложением данные, и кнопки ОК и Отмена , первая из которых подтверждает ввод данных, а вторая - отменяет. Диалоговые окна бывают двух видов:
Internet Explorer позволяет нам использовать в HTML-приложениях как модальные, так и немодальные диалоговое окна. Сейчас мы рассмотрим, как это делается. Примечание:
1. Готовим тестовое HTML-приложение
Набор параметров, которые пользователь может указать, у нас будет небольшим. Это, прежде всего, функция переноса текста в области редактирования - будет ли она включена или отключена. И цвет текста; пусть пользователь получит возможность выбирать между чёрным, синим, зелёным и красным цветом. Мы реализуем это приложение в двух версиях: первая будет использовать для ввода параметров модальное диалоговое окно, а вторая - немодальное. HTML-код приложения приведён ниже.
Сохраним это приложение в двух файлах: Textedit_modal.hta (версия с модальным диалоговым окном) и Textedit_modeless.hta (версия с немодальным диалоговым окном). И приступим... 2. Как реализуются диалоговые окна
При открытии модального диалогового окна мы можем передать ему некоторые данные (об этом - далее). Это могут быть, скажем, текущие значения параметров приложения, которые потом будут подставлены в элементы управления диалогового окна. При закрытии модального диалогового окна мы можем передать какие-либо данные окну, которое его открыло. В случае диалогового окна настроек это могут быть значения параметров, введённые пользователем. При открытии немодального диалогового окна мы не можем передать ему никаких данных, а также не можем вернуть введённые в него данные окну, которое его открыло. Однако мы можем получить доступ к этому окну из окна, которое его открыло, и, наоборот, "добраться" из диалогового окна к окну, что его открыло. Этим мы можем воспользоваться для обмена данными между окнами и выполнения действий над содержимым одного окна из другого. Вот пока и всё. Займёмся практикой. А остальные теоретические вопросы рассмотрим по ходу дела. 3. Реализация модальных диалоговых окон
3.1. Открытие модального диалогового окна
Для открытия модального диалогового окна применяется метод showModalDialog объекта Window. Формат вызова этого метода таков:
.showModalDialog( Window.showModalDialog("options_modal.html");
Третий, также необязательный, параметр указывает параметры самого диалогового окна. Он должен представлять собой строку, содержащую наименования параметров и их значения. Наименование параметра отделяется от значения двоеточием, а отдельные параметры друг от друга - точкой с запятой (как и в случае написания стилей CSS).
Список параметров диалоговых окон, поддерживаемых Internet Explorer, довольно велик. Давайте их рассмотрим.
После вызова метода show ModalDialog выполнение веб-сценария останавливается, пока диалоговое окно не будет закрыто. Выполнение будет продолжено только после закрытия окна. Осталось сказать о результате, который возвращает метод showModalDialog. Это значение, которое было передано диалоговым окном окну, что его открыло. Это значение может быть любого типа: строка, число, логическое значение, массив, функция или экземпляр любого объекта. Примечание:
3.2. Передача модальному диалоговому окну каких-либо данных при его открытии
Мы уже знаем, что можем передать модальному диалоговому окну значение любого типа, подставив его вторым параметром в вызов метода showModalDialog. Window.showModalDialog("options_modal.html", 2); Способ первый - создать массив и поместить значения, которые следует передать, в его элементы. Var aParams = true; Мы можем создать и ассоциативный массив (хэш): Var aParams["wrap"] = true; Способ второй - создать экземпляр объекта Object, воспользовавшись инициализатором JavaScript, создать в нём свойства, которым и присвоить передаваемые значения. Var oParams = { wrap: true, color: "black" }; 3.3. Получение в модальном диалоговом окне данных, переданных окном, которое его открыло
Объект Window поддерживает доступное только для чтения свойство dialogArguments. Оно хранит значение, которое было передано диалоговому окну вторым параметром метода showModalDialog. То, что нам нужно. Примечание:
Вот так мы можем получить значения, переданные как элементы хэша: Var aParams = window.dialogArguments; Var oParams = window.dialogArguments; Какое-либо значение передавать из диалогового окна окну, которое его открыло, следует только в том случае, если пользователь нажал кнопку ОК . В случае нажатия кнопки Отмена этого делать обычно не нужно; вообще, кнопка Отмена должна только закрывать диалоговое окно, не выполняя никаких прочих действий. Итак, пользователь нажал в диалоговом окне кнопку ОК . Теперь нам нужно передать какие-то данные окну, из которого было открыто диалоговое окно. Как это сделать? Объект Window поддерживает свойство returnValue. В этом свойстве сохраняется значение, которое должно быть передано из модального диалогового окна в окно, что его открыло. Значение это может быть любого типа. Примечание:
Например, так мы можем передать из открывшему окну одно-единственное значение: Window.returnValue = 2; Window.returnValue = { wrap: bWrap, color: sColor }; Если же пользователь нажал в диалоговом окне кнопку Отмена , мы, как условились ранее, не будем присваивать свойству returnValue никакого значения. В таком случае данное свойство получит своё значение по умолчанию - null. Кстати, то же самое случится, если пользователь закроет диалоговое окно нажатием кнопки закрытия или комбинации клавиш +. Хорошо! Диалоговое окно закрыто (как его закрыть, мы узнаем потом). Теперь окно, которое его открыло, должно получить значение свойства returnValue. Как? Очень просто. Значение свойства returnValue будет возвращено методом showModalDialog в качестве результата. Впрочем, это уже говорилось в параграфе 2.1. Мы должны проверить, равно ли это значение null. Если это так, значит, никаких данных диалоговое окно не передало. В противном случае мы сможем как-то использовать переданные им данные в приложении. Var oResult = window.showModalDialog(. . .); Window.close(); Код самого HTML-приложения (файл Textedit_modal.hta) после исправлений станет таким:
Var bWrap = true; Function showParameters() Прежде всего, мы объявили две переменные - bWrap и sColor, - которые будут хранить текущие значения параметров приложения. Первая переменная будет хранить логическую величину - признак того, выполняется ли в области редактирования в данный момент перенос строк. А вторая переменная будет хранить текущее значение цвета текста в области редактирования в виде строки. Примечание:
Область редактирования представляется экземпляром объекта HTMLTextAreaElement. Этот объект поддерживает свойство wrap, задающее режим переноса строк. Значение "soft" этого свойства указывает области редактирования выполнять перенос строк, причём в местах переноса не будут вставляться символы возврата каретки и перевода строки ("мягкий" перенос строк). А значение "off" указывает области редактирования вообще не выполнять перенос строк. Все объекты, представляющие элементы веб-страницы, поддерживают свойство style. Это свойство хранит экземпляр объекта CSSStyle, представляющий текущий стиль CSS, который привязан к данному элементу веб-страницы. Объект CSSStyle, в свою очередь, поддерживает множество свойств, соответствующих различным атрибутам стиля. Так, свойство color соответствует одноимённому атрибуту стиля, задающему цвет текста. Теперь создадим веб-страницу, реализующую само диалоговое окно. Поместим на ней флажок Перенос текста , раскрывающийся список Цвет текста и, разумеется, обязательные для окон подобного плана кнопки ОК и Отмена . Код этой веб-страницы приведён ниже.
OChkWrap.checked = oParams.wrap; Function sendParams() Перенос текста Цвет текста
Здесь, опять же, всё нам уже знакомо. Пояснения требуются самые минимальные. Атрибут SIZE тега , создающего список, задаёт размер данного списка в пунктах. Значение 1 этого атрибута тега указывает, что список должен иметь высоту в один пункт, то есть это должен быть раскрывающийся список. Атрибут VALUE тега , создающего отдельный пункт списка, задаёт значение этого пункта. Сразу после окончания загрузки веб-страницы, реализующей диалоговое окно, возникнет событие load. В качестве обработчика этого события мы указали функцию setup. Эта функция получит значение, переданное диалоговому окну от окна, что его открыло, - экземпляр объекта Object со свойствами, хранящими текущие значения параметров приложения. После этого она занесёт эти значения в соответствующие им элементы управления. Объект HTMLInputElement, представляющий элемент управления, в том числе и флажок, поддерживает свойство checked, доступное только для флажков. Это свойство указывает состояние флажка: установлен ли он (значение true) или сброшен (значение false). Объект HTMLSelectElement, представляющий список, поддерживает свойство value. Оно содержит значение пункта списка, который выбран в данный момент, в виде строки. Присвоив этому свойству какое-либо значение, мы укажем списку изначально выбрать пункт с этим значением. При щелчке на кнопке ОК выполнится обработчик её события click - функция sendParams. Она создаст экземпляр объекта Object с помощью инициализатора JavaScript, занесёт в его свойства значения, заданные пользователем в элементах управления диалогового окна, - они станут новыми значениями параметров приложения. Полученный экземпляр объекта она передаст окну, которое открыло это диалоговое окно, то есть самому приложению, после чего закроет диалоговое окно. Кнопка Отмена просто закрывает диалоговое окно. В результате окну, которое открыло это диалоговое окно, будет передано значение null - сигнал, что пользователь не подтвердил ввода новых параметров приложения. Сохраним эту веб-страницу в файле options_modal.html. И проверим готовое HTML-приложение в действии. Элемент (от англ. dialog - диалог) создаёт диалоговое окно, в котором можно выводить сообщение или форму, например, для входа на сайт. Диалоговое окно отображается со следующим предустановленным стилем. Position: absolute; left: 0; right: 0; margin: auto; border: solid; padding: 1em; background: white; color: black; Таким образом диалоговое окно отображается с белым фоном, чёрной рамкой и по центру горизонтальной оси. Ширина совпадает с шириной родительского контейнера. Для отображения и сокрытия диалогового окна применяются, соответственно, методы show() и close() , как показано в примере ниже. Кроме того, диалог можно превратить в модальное окно, используя вместо show() метод showModal() . В этом случае остальные элементы на странице блокируются - текст нельзя выделить, а кнопки нажать до тех пор, пока диалоговое окно не будет закрыто. Также модальное окно можно закрыть клавишей Esc . Синтаксис... Закрывающий тегОбязателен. Примерdialog body { background: url(/example/image/shark.jpg) no-repeat; background-size: cover; } dialog { background: rgba(255, 255, 255, 0.7); width: 300px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius: 5px; } Открыть окно Полинезийцы называют Млечный путь Манго-Роа-И-Ата, что в переводе с маори означает «Длинная акула на рассвете». Закрыть окно var dialog = document.querySelector("dialog"); document.querySelector("#openDialog").onclick = function() { dialog.show(); // Показываем диалоговое окно } document.querySelector("#closeDialog").onclick = function() { dialog.close(); // Прячем диалоговое окно }Результат данного примера показан на рис. 1. При нажатии на кнопку «Открыть окно» отображается содержимое элемента , до этого невидимое. При нажатии на кнопку «Закрыть окно» диалоговое окно скрывается. Рис. 1. Вид диалогового окна СпецификацияКаждая спецификация проходит несколько стадий одобрения.
Особняком стоит живой стандарт HTML (Living ) - он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно. Многие процессы в вебе на сегодняшний день требуют согласия пользователя для своего завершения. Например, пользователям может понадобиться удалить аккаунт, сменить имя или подтвердить денежную операцию. Общий подход в таких случаях - показ диалогового окна обычно с двумя кнопками; одна для отмены, другая для выполнени действия. Вот уже на протяжении многих лет для этого , однако в этом уроке собираемся сделать это нативными средствами при помощи экспериментального тега . Использование элемента Dialogпоявился в HTML5 (в 5.1 если точнее). Он классифицируется как "корневой секционный" элемент, так же как и элементы , и каждый из которых устанавливает новый независимый блок с контентом. Вы можете разместить его как дочерний к body элемент или же использовать наподобие или – оба этих подхода правильные.
Поддерживающие браузеры (Chrome 37+ и Opera 27+) по умолчанию будут показывать элемент скрытым, делая его видимым при вызове show() или showModal() , а также close() чтобы снова скрыть его. Как правило, мы будем запускать этот метод при срабатывании события click , вот так: Var $accountDelete = $("#delete-account"), $accountDeleteDialog = $("#confirm-delete"); $accountDelete.on("click", function() { $accountDeleteDialog.showModal(); }); $("#cancel").on("click", function() { $accountDeleteDialog.close(); }); Отличия между методами show() и showModal()Стоит отметить, что методы show() и showModal() ведут себя по-разному. Метод show() открывает диалог в соответствии с его положением внутри DOM. Если вы добавили его непосредственно перед , он появится внизу страницы. Нам пришлось бы добавлять кастомные стили например для позиционирования диалога в центр страницы. Эти стили обычно используют для показа элемента выше других, выставляется свойство position в absolute , вместе с left и top . Метод showModal() напротив покажет элемент как модальное окно. Оно будет отображаться по центру страницы, располагается в верхнем слое, как в fullscreen API , который предотвращает наложения применением z-index , относительного позиционирования (relative position) и overflow к родительскому элементу. В большинстве случаев, вполне вероятно, мы будем использовать showModal() вместо метода show() . Кастомизация стилейДиалоговое окно по умолчанию использует стили браузера, однако их можно переопределись, как и для большинства элементов. Например вы можете сделать границу диалогового окна тоньше, скруглить уголки и добавить тень. К тому же, когда элемент показывается методом showModal() , мы имеем в своем распоряжении дополнительный псевдоэлемент::backdrop . Этот псевдоэлемент располагается непосредственно под диалоговым окном, перекрывая всю область просмотра (viewport). Он используется в качестве прозрачного темного фона – кликните по красной кнопке, чтобы увидеть в действии: Добавляем элегантность с помощью transitionsКастомизация стилей диалогового окна должна быть простой, но что по поводу добавления CSS transition? Что насчет плавного открытия окна, используя эффект масштабирования, примерно так же как это делает OS X? Шаг 1Для начала мы уменьшим масштаб диалогового окна на 90%, применим transition и скроем окно с глаз долой. Dialog { visibility: hidden; transform: scale(0.1); transition: transform 200ms; } Шаг 2Теперь мы определяем класс, который будет масштабировать диалоговое окно до реального размера и делать его видимым. Dialog.dialog-scale { visibility: visible; transform: scale(1); } Шаг 3Наш трюк состоит в том, чтобы "задержать" диалоговое окно малого масштаба на несколько миллисекунд прежде чем добавить класс dialog-scale . Чтобы добиться этого, мы добавляем класс, используя js-метод setTimeout() : Var transition; $accountDelete.on("click", function() { $accountDeleteDialog.showModal(); transition = setTimeout(function() { $accountDeleteDialog.addClass("dialog-scale"); }, 0.5); }); Шаг 4Не забываем удалить этот класс и очистить timeout при закрытии диалогового окна. $("#cancel").on("click", function() { $accountDeleteDialog.close(); $accountDeleteDialog.removeClass("dialog-scale"); clearTimeout(transition); }); На этом все! Результат можно посмотреть на следующем демо: Подводя итогреально удобен, но все же имеет место очень плохая поддержка браузерами. Если и когда все основные браузеры реализуют поддержку, мы будем меньше зависеть от библиотек, контент станет более семантичным и у нас будет стандартный метод для показа модальных диалогов. http://caniuse.com/#feat=dialogА до тех пор можно использовать polyfil от Google Chrome для симуляции подобного поведения в браузерах, которые этого еще не поддерживают. Рекомендуем почитать |