Желание confirm html. Операции alert, prompt и confirm. Взаимодействие с пользователем в Javascript. Замена диалога подтверждения с использованием jQuery

Давайте взглянем на два способа ввода. Возможно, ни один из них широко не используется, но они могут быть просто использованы для знакомства с основами.

Prompt. Запрос

Первый из них называется prompt . Он показывает всплывающее окно с текстом, который мы передаем первым параметром, и полем ввода, которое пользователь может заполнить. Когда пользователь нажмет OK , функция prompt() вернет введенное значение. Далее в этом примере мы используем метод document.write , чтобы заменить содержимое html-страницы нашим текстом.

examples/js/prompt.html

var name = prompt("Your name:", ""); document.write("Hello ", name); Try!

Текстовое поле будет предварительно заполнено значением второго параметра. Это может быть очень полезно, если бы мы хотели, чтобы пользователь отредактировал какое-нибудь значение. Можно заполнить поле старым значением.

examples/js/edit.html

var name = prompt("Please correct your e-mail address:", "[email protected]"); document.write("Your e-mail address is ", name); Try!

В другом случае, если пользователь нажмет cancel или клавишу ESC , функция prompt() вернет null .

Confirm. Подтверждение

Это всплывающее окно на самом деле не метод ввода. Оно позволяет разработчику задать вопрос и получить ответ - Да/Нет. Вызов функции confirm() приведет к появлению всплывающего окна с заданным текстом и двумя кнопками. Если пользователь нажмет OK , функция confirm() вернет true , если нажмет cancel или клавишу ESC , тогда функция вернет false .

Конечно, для понимания смысла, вы должны знать, что обозначают true и false , и что делает эта конструкция if - else . Если у вас уже есть какой-то опыт программирования, тогда, вероятно, вы уже поняли код, но даже если и нет, то сможете разобраться.

Этот код может быть описан следующим предложением:

Если "подтверждение" вернуло true, тогда напечатать "Hello World", иначе напечатать "OK, I won"t print it."

Или лучше вот так:

Если пользователь нажал "ОК", когда мы спросили "Shall I print Hello World?", тогда напечатать "Hello World", иначе напечатать "OK, I won"t print it."

examples/js/confirm.html

if (confirm("Shall I print Hello World?")) { document.write("Hello World"); } else { document.write("OK, I won"t print it."); }

Я рассказал про «шаблонные» модальные окна. Т.е. такие, для которых создаются отдельные файлы-шаблоны. И сложность и навороченность этих окон может быть безграничной.

Но нередко для общения с пользователем нужны совсем простые диалоговые окна – просто вывести какое-то сообщение с единственной кнопкой «Ок», которое он не сможет не заметить, или запросить у него подтверждение какого-либо действия.

Часто на сайтах для таких целей используют Системные функции
Есть в движке несколько групп так называемых «системных» функций. Файлы, содержащие эти функции, загружаются в самом начале работы движка, еще до загрузки файлов конфигурации, и сами функции не привязаны к какому-либо модулю и могут использоваться в любом месте, в любом компоненте – в модулях, экшенах, мапперах и пр." class="term">системные функции alert() , confirm() и prompt() . Примерно вот так:
Удалить все!
Это работает в любом браузере, но окна, которые выводятся такими функциями, выглядят некрасиво, примитивно и ломают всю красоту, которую мы наводим на своем сайте.

Чтоб решить эту проблему в движке сейчас можно (я бы сказал – нужно) использовать аналоги:

ls.modal.alert(options) - вывод информационного окна с одной кнопкой «Ок»
ls.modal.confirm(options) - вывод окна с кнопками «Отмена» и «Подтвердить»
ls.modal.prompt(options) - окно с полем ввода

Во всех функциях параметр options может быть либо строкой, либо объектом. Например:
ls.modal.alert(‘Hello, world!’);
Этот код выведен модальное окно с текстом «Hello, world!» и кнопкой «Ok» . И самое главное – это окно будет оформлено точно так же, как все другие модальные окна вашего сайта.

Мы можем также повесть обработчик на нажатие кнопки:
ls.modal.alert({title: "I say", text: "Hello, world!", onConfirm: function(){ // юзер кликнул по кнопке Ok }}); Здесь добавляется заголовок окна "I say" и по нажатию кнопки будет выполнена функция, которая передана в параметре onConfirm .

Но это еще не все! Мы можем в теле окна вывести любой HTML-код:
var htmlCode = " Вот ваш новый аватар"; ls.modal.alert({title: "Аватар", html: htmlCode}); И получим примерно такое вот окошко:

Обратите внимание, что для отображения HTML-кода используется параметр html , а не text (если передать оба параметра, то будет использован text , а html будет проигнорирован).

Аналогично используются функции ls.modal.confirm() и ls.modal.prompt() . Но в этих функциях возможны дополнительные параметры. Например в параметрах функции ls.modal.confirm() мы можем передать, не один, а два обработчика - по обработчику на каждую кнопку:
ls.modal.confirm({title: "Удаление", text: "Удалить все подряд?", onConfirm: function(){ // юзер кликнул по кнопке «Подтвердить» }, onCancel: function(){ // юзер кликнул по кнопке «Отмена» } }); Функция ls.modal.prompt() используется, чтобы запросить у пользователя какое-нибудь значение. И мы можем задать это значение по умолчанию:
ls.modal. prompt ({title: "Ввод числа", text: "Введите сюда число", value: 123 onConfirm: function(value){ // Введенное значение в переменной
Общая схема имени переменной выглядит следующим образом: префикс+ДополнительныйПрефикс+ИмяПеременной+Суффикс. Имена переменных содержат латинские буквы верхнего и нижнего регистров и начинаются с префикса, записаного в нижнем регистре, обозначающего тип данных значения этой переменной. Перечень префиксов, рекомендованых к использованию указан ниже. Дополнительный префикс конкретизирует значение переменной и выбирается из перечня указанных ниже рекоммендуемых дополнительных префиксов. Имя переменной состоит из одного или нескольких слов, описывающих смысловое значение этой переменной, и записывается горбатым регистром. Так как префиксы описывают тип значения переменной, ее имя описывает экземпляр данного типа в единственном числе. Суффикс дополняет имя переменной и конкретизирует ее смысловое значение. Перечень суффиксов, рекоммендованых к использованию указан ниже. Цифры в имени допускаются, но не рекомендуются. Знак нижнего подчеркивания в имени не используется.

Префиксы
Рекомендован к использованию следующий перечень префиксов:
- a (array) - массив значение;
- b (bool) - логическое значение;
- e (entity) - объект типа Entity и наследуемые от него;
- i (integer) - целочисленное значение;
- f (float) - значение вещественного типа;
- m (mapper) - объект типа Mapper и наследуемые от него;
- n (number) - значение неопределеного цифрового типа, которое может принимать как целое, так и
вещественное значение. Требует проверки на значение типа при использовании.

- o (object) - объект, типа отличного от Mapper и Entity;
- s (string) - строковое значение;
- x (miXed) - объект смешанного типа. Требует проверки на значение типа при использовании.

Рекомендован к использованию следующий перечень дополнительных префиксов:
- Min (minimum) - минимальное значение;
- Max (maximum) - максимальное значение;
- Current - текущее значение.

Суффиксы
В отличие от Дополнительных префиксов суффиксы конкретизируют семантическое значение имени переменной, а не ее
значение. Рекомендован к использованию следующий перечень суффиксов:
- First - первое значение из доступного списка;
- Last - последнее значение из доступного списка;
- Limit - предельное значение из доступного списка;
- Tmp - временное значение;
- New - новое (устанавливаемое) значение;
- Old - старое (затираемое) значение;

Исключения
Существуют имена переменных, предназначенных для специального использования - исключения из указанных
рекоммендаций:
- i, j - итераторы для небольших циклов (цикл считается небольшим, если помещается полностью на
один экран и позволяет увидеть сразу все вхождения итераторов);
- k, v - переменные цикла foreach ($aData as $k => $v);
- key, value - переменные цикла foreach ($aData as $key => $value);
- s - cериализованное представление данных;
- data - переменная с данными в сеттере сущности, а также данные возвращаемые из методов маппера;
- sql - в мапперах переменная, содержащая текст запроса – префикс «s» не используется." class="term">переменной «value» } }); Здесь в обработчик передается введенное пользователем значение и мы можем использовать его для того, чтоб определиться, что ж с ним дальше делать.

В заключении этой части хочу обратит внимание на одну особенность, о которой не надо забывать: есть важное отличие в поведении системных функций alert() , confirm() и prompt() и их аналогах, о которых идет речь - ls.modal.alert(options) , ls.modal.confirm(options) и ls.modal.prompt(options) . А именно - Системные функции
Есть в движке несколько групп так называемых «системных» функций. Файлы, содержащие эти функции, загружаются в самом начале работы движка, еще до загрузки файлов конфигурации, и сами функции не привязаны к какому-либо модулю и могут использоваться в любом месте, в любом компоненте – в модулях, экшенах, мапперах и пр." class="term">системные функции останавливают выполнение кода javascript и ждут реакции пользователя. И только после того, как пользователь среагировал, выполнение кода продолжается. Когда же вы используете описанные здесь функции, то сначала выполняется полностью весь код, где идет сам вызов, и только потом выводится диалоговое окно.

Поэтому если взять код, приведенной в начале статьи и просто заменить вызов confirm() на ls.modal.confirm() и код придется переписать примерно так:
Удалить все! $(function(){ $("js-delete-all").click(ls.modal.confirm("Вы уверены?", function(){ location.href="site.com/delete/all/"; });); }); Обратите внимание - функция обработчик передается не в параметре onConfirm, а вторым аргументом функции, это тоже допустимо.

Да, кода получается немного больше. Но зато красиво! А красота, как известно, требует жертв.

И снова я приветствую Вас в очередной теме посвященной языку JavaScript , в которой мы разберем методы alert, prompt, confrim . Данные методы являются встроенными в язык Javascript и помогают нам взаимодействовать с пользователем.
Alert выводит на экран браузера окно с определенной информацией, которое приостанавливает скрипт до момента нажатия пользователем кнопки ОК.
Prompt , как правило, выводит окно, в котором пользователю задают вопрос, на который он должен ответить в определенном текстовом поле, после чего нажать клавишу ОК. Также пользователь может ничего не вводить, нажав клавишу отмена.
Confirm также выводит окно, в котором пользователь уже не может вводить что-либо в текстовое поле, а может лишь нажать кнопку ОК или отмена.
А теперь после небольшого вступления перейдем к рассмотрению всего вышесказанного на практике.

alert, prompt, confirm



alert("Привет, дорогой пользователь!" );
var nameUser = prompt("Ваше имя?" , "name" );
var userAnswer = confirm("Вы действительно хотите покинуть сайт?" );

В результате при обновлении страницы браузера у нас появится окно с приветствием пользователя. После нажатия кнопки ОК, появится следующее окно, где будут спрашивать ваше имя. В данном методе есть два параметра, первый является обязательным и отвечает за заголовок, который будет выводиться, в нашем случае это вопрос имени пользователя. И второй параметр отвечает за значение, которое будет выводиться по умолчанию в текстовом поле. Если Вы введете ваше имя и нажмете кнопку ОК, то ваше имя поместиться в переменную nameUser . Если вы нажмете кнопку отмена, то в переменную будет записан null .
И напоследок окно, которое спрашивает у пользователя, хочет он покинуть наш сайт или нет. В случае согласия в переменную будет помещено булево значение true , и при отказе false соответственно. Вот и все, что следует знать о данных методах, до встречи в следующих уроках!

В этой статье мы изучим три интересных метода, а именно методы alert(), confirm() и prompt() . Они все предназначены для взаимодействия с пользователем .

Все эти три метода принадлежат объекту window(Окно браузера). И они могут вызываться таким образом: window.название_метода(); Но, JavaScript нам позволяет этот объект window не указать, а писать просто название метода.

Начнём мы с метода alert(). Данный метод, выводит указанное сообщение в окошко браузера пользователя. Это окошко отобразится поверх всей страницы, и пока пользователь не нажмёт на кнопку OK, оно не закроется.

Для демонстрации выведем какое-то сообщение с помощью метода alert()

Var today_is = "Понедельник"; alert("Сегодня " + today_is);

Внутри метода мы можем указать любую строку, только без html тегов. Они здесь не обрабатываются, а выводятся как есть.

Если строка, которую хотим указать очень длинная, и мы хотим сделать переход на новую строку, то здесь html тег
не сработает. Здесь нужно использовать символ "\n".

Alert("Looooooooong \nStringggggggg");

Данный метод используется часто для поиска ошибки в коде .

Процесс обработки кода идёт сверху вниз, поэтому для ловли ошибки, просто пишем метод alert() в предполагаемую область, где находится ошибка. И если alert() сработал, значит до строчки, где он написан, ошибок нет.

Дальше, нужно его перенести на одну строку или больше ниже. Сохраняем изменения, опять обновляем страницу в браузере, и смотрим, если alert() сработал, значит, ошибок до строчки, где он находится, нет, в противном случае, если он не сработал, ошибка находится в строку выше той, где он сейчас находится . Таким вот образом можно найти ошибку в коде.

метод confirm()

Этот метод используется для подтверждения ответа, на какой-то вопрос. Есть только два варианта ответа, да(OK) или нет(Cancel/Отмена). Если пользователь отвечает да, то метод возвращает истину(true), иначе он возвращает лож(false).

Для примера, выведем окошко с помощью метода confirm(), где спросим пользователя "Вы точно хотите покинуть страницу?". Если пользователь ответит да, то через метод alert() выведем такое сообщение "Пользователь хочет покинуть страницу", иначе выведем другое сообщение "Пользователь НЕ хочет покинуть страницу".

Var user_answer = confirm("Вы точно хотите покинуть страницу?"); if(user_answer) alert("Пользователь хочет покинуть страницу"); else alert("Пользователь НЕ хочет \nпокинуть страницу");

Таким вот образом работает метод confirm(). Он может использоваться в разных случаях. Например, перед тем как удалить что-то с сайта принято спросить пользователя, уверен ли он в свои действия. Или же перед тем как отправить форму, тоже можно спросить пользователя "Вы все заполнили правильно?", если он ответит да, то форма отправиться, иначе она не отправится.

Метод prompt()

И последний метод, которого мы изучим, это метод prompt(). Данный метод используется реже, чем остальные два метода. Он позволяет получить некую информацию от пользователя, которую он введёт в текстовое поле.

Как результат метод prompt() возвращает либо введённую строку, если пользователь нажал кнопку OK, либо null, если пользователь нажал на кнопку отмена.

Как параметр, то есть внутри скобок у данного метода мы можем написать указательную строку или вопрос, чтобы пользователь знал какую информацию необходимо ввести.

Например, попросим пользователя ответить на вопрос "Как Вас зовут?". Введённое пользователем имя, отобразим на экран с помощью метода alert().

Var name = prompt("Как Вас зовут?"); alert("Вас зовут " + name);

Сохраняем и открываем страницу в браузере.

Разумеется, в текстовое поле из метода prompt() можно ввести любую информацию. Эта информация будет возвращена как строка, даже в случае чисел или других спецсимволов.

Для примера попросим пользователя ввести две числа, чтобы потом умножить их. Будет некий калькулятор для умножения чисел.

Var x = prompt("Введите первое число:"); var y = prompt("Введите второе число:"); //Преобразование введенных чисел из строкового типа в числовой тип x = Number(x); y = Number(y); document.write(x + " * " + y + " = " + (x * y));

Введённые числа являются строками, поэтому для правильного результата умножения, необходимо эти числа пройти через функцию Number(), которая преобразует их из строкового типа в нормальные числа.

Ну и на этом все. Теперь Вы знаете ещё три метода: alert(), confirm() и prompt() . Которых Вы смело можете использовать на практике.

В качестве альтернативы для стандартных средств браузера в данном уроке мы построим крос-браузерное решение для организации диалога подтверждения в форме простого в использовании плагина jQuery. Можно будет изменять текст, кнопки и действия, которые будут выполняться при нажатии на кнопки.

HTML

Хотя основные усилия будут сконцентрированы на диалоге подтверждения, сначала скажем несколько слов о странице, которая будет использоваться для демонстрации. Те, кто жаждут увидеть код плагина, могут сразу прокрутить текст до раздела, посвященного jQuery.

index.php

Замена диалога подтверждения с использованием jQuery | Демонстрация для сайта сайт " target="_blank"> " alt="" width="250" /> Замена диалога подтверждения с использованием jQuery

В разделе заголовка нашей страницы включается шрифт Cuprum из Google Font , jquery_confirm.css , в котором заданы стили для диалога подтверждения, и styles.css , который содержит стили для демонстрационной страницы.

Внизу раздела тела страницы включается библиотека jQuery , jquery_confirm.js , который содержит основной код плагина, и script.js , который содержит код для обработчика события click , используемого на демонстрационной странице для запуска плагина.

Для использования диалога подтверждения на своем сайте надо скопировать папку jquery_confirm из архива с исходниками и включить jquery_confirm.css в раздел заголовка страницы, а jquery_confirm.js вставить перед закрытием тега body , также как и библиотеку jQuery.

Сам по себе диалог подтверждения является не более чем несколькими линиями кода HTML. Ниже приведен код, который генерирует плагин для вывода окна диалога.

Пример кода диалога

Заголовок окна

Описание процесса

Да Нет

Данный код добавляется к документу. Элемент confirmOverlay выводится над остальным содержанием страницы, предотвращая любые взаимодействия с ней пока открыт диалог подтверждения (модальное окно). Элементы h1 , p и confirmButtons заполняются в соответствии с аргументами, которые передаются плагину. Далее по тексту урока приводятся дополнительные разъяснения.

CSS

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

jquery_confirm.css

#confirmOverlay{ width:100%; height:100%; position:fixed; top:0; left:0; background:url("ie.png"); background: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) repeat-x rgba(11,11,11,0.2); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) repeat-x rgba(11,11,11,0.2); z-index:100000; } #confirmBox{ background:url("body_bg.jpg") repeat-x left bottom #e5e5e5; width:460px; position:fixed; left:50%; top:50%; margin:-130px 0 0 -230px; border: 1px solid rgba(33, 33, 33, 0.6); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset; -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset; box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset; } #confirmBox h1, #confirmBox p{ font:26px/1 "Cuprum","Lucida Sans Unicode", "Lucida Grande", sans-serif; background:url("header_bg.jpg") repeat-x left bottom #f5f5f5; padding: 18px 25px; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6); color:#666; } #confirmBox h1{ letter-spacing:0.3px; color:#888; } #confirmBox p{ background:none; font-size:16px; line-height:1.4; padding-top: 35px; } #confirmButtons{ padding:15px 0 25px; text-align:center; } #confirmBox .button{ display:inline-block; background:url("buttons.png") no-repeat; color:white; position:relative; height: 33px; font:17px/33px "Cuprum","Lucida Sans Unicode", "Lucida Grande", sans-serif; margin-right: 15px; padding: 0 35px 0 40px; text-decoration:none; border:none; } #confirmBox .button:last-child{ margin-right:0;} #confirmBox .button span{ position:absolute; top:0; right:-5px; background:url("buttons.png") no-repeat; width:5px; height:33px } #confirmBox .blue{ background-position:left top;text-shadow:1px 1px 0 #5889a2;} #confirmBox .blue span{ background-position:-195px 0;} #confirmBox .blue:hover{ background-position:left bottom;} #confirmBox .blue:hover span{ background-position:-195px bottom;} #confirmBox .gray{ background-position:-200px top;text-shadow:1px 1px 0 #707070;} #confirmBox .gray span{ background-position:-395px 0;} #confirmBox .gray:hover{ background-position:-200px bottom;} #confirmBox .gray:hover span{ background-position:-395px bottom;}

Используется несколько правил CSS3. В определении #confirmOverlay мы задаем градиенты CSS3 (они будут доступны только в браузерах Firefox, Safari и Chrome).

В #confirmBox , который располагается в центре экрана, добавлены внутренние тени, которые эффектно выглядят (наподобие внутреннего свечения в Фотошоп). Также используется шрифт Cuprum , который входит в Google Font.

Для кнопок используются спрайты CSS. Доступны два варианта дизайна - серый и голубой. Вы можете также добавить свой собственный стиль для кнопок.

jQuery

Прежде чем рассматривать код плагина взглянем на то, как его использовать. В файле scripts.js происходит вызов плагина.

script.js

$(document).ready(function(){ $(".item .delete").click(function(){ var elem = $(this).closest(".item"); $.confirm({ "title" : "Подтверждение удаления", "message" : "Вы решили удалить пункт.
После удаления его нельзя будет восстановить! Продолжаем?", "buttons" : { "Да" : { "class" : "blue", "action": function(){ elem.slideUp(); } }, "Нет" : { "class" : "gray", "action": function(){} // В данном случае ничего не делаем. Данную опцию можно просто опустить. } } }); }); });

Когда на элементе div .delete нажимают кнопку мыши, скрипт выполняет функцию $.confirm , определенную плагином. Она передает плагину заголовок диалога, описание и объект с кнопками. Каждая кнопка получает имя класса CSS и свойство action . Данное свойство устанавливает функцию, которая выполняется при нажатии кнопки.

Теперь можно перейти к самой интересной части нашего урока. В файле jquery_confirm.js содержится код плагина альтернативы стандартному диалогу подтверждения.

jquery_confirm.js

(function($){ $.confirm = function(params){ if($("#confirmOverlay").length){ // Диалог подтверждения уже выведен на странице: return false; } var buttonHTML = ""; $.each(params.buttons,function(name,obj){ // Генерируем разметку кнопок: buttonHTML += ""+name+""; if(!obj.action){ obj.action = function(){}; } }); var markup = [ "", "", "",params.title,"", "

",params.message,"

", "", buttonHTML, "" ].join(""); $(markup).hide().appendTo("body").fadeIn(); var buttons = $("#confirmBox .button"), i = 0; $.each(params.buttons,function(name,obj){ buttons.eq(i++).click(function(){ // Когда на кнопку нажимают, вызываем функцию действия // и закрываем диалог подтверждения. obj.action(); $.confirm.hide(); return false; }); }); } $.confirm.hide = function(){ $("#confirmOverlay").fadeOut(function(){ $(this).remove(); }); } })(jQuery);

Наш плагин определяет метод $.confirm() . Метод читает передаваемые аргументы, конструирует разметку и добавляет ее на страницу. Так как div #confirmOverlay имеет фиксированное позиционирование, то он располагается по центру экрана и остается в своем положении, даже если пользователь прокрутит страницу.

После добавления разметки скрипт устанавливает обработчики событий, которые выполняют соответствующие действия для кнопок диалога.

Готово!

Заключение

Вы можете изменить стиль диалога, модифицируя файл jquery_confirm.css . Так как атрибут сообщения диалога принимает HTML текст, то вы можете добавлять в них изображения и иконки для вывода в диалоговом окне.

Также можно использовать плагин для вывода предупреждений - нужно только передать только одну кнопку без атрибута действия.