Беспечный confirm html. JavaScript и диалоговые окна: alert, confirm, prompt

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров . Это моя первая публикация в рубрике . Хочу сказать, что мои скромный ресурс не претендовал, не претендует и не будет претендовать на всесторонность, а сам автор никогда не был и не будет web гуру. На страницах своего блога я совершаю попытку простым и понятным для людей языком рассказать об основах различных web технологий. И эта рубрика будет посвящена интерпретируемому языку программирования с объектно-ориентированными возможностями JavaScript .

Помимо выше сказанного, JavaScript является алгоритмическим языком (то есть, при помощи JavaScript мы как бы даем указание браузеру, как ему реагировать на определенные действия пользователя). В рубрики Заметки о HTML, а конкретно в статье, про , мы с вами уже поговорили, из каких трех базовых элементов состоят наши страницы: HTML, HEAD и BODY.

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

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

alert, prompt, confirm



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

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

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

HTML-код

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

Index.php

A jQuery Confirm Dialog Replacement with CSS3 | Tutorialzine Demo

В верхнем отделе документа мы включили шрифт Cuprum из , jQuery.confirm.css (каскадные таблицы стилей для диалогового окна), а также styles.css – каскадные таблицы стилей нашей страницы.

В самом низу тела документа мы включили библиотеку jQuery, jquery.confirm.js (основной файл плагина), а также script.js, который отслеживает событие клика по кнопке и запускает плагин. В заключающем этапе нашей сегодняшней обучающей статьи мы расскажем вам об этих двух файлах.

Для того чтобы включить окно подтверждения в свой веб-сайт, вам надо будет скопировать папку jquery.confirm из скачанного архива, и включить jquery.confirm.css в головную часть кода, а также файл jquery.confirm.js перед тэгом, завершающим тело документа + библиотеку jQuery.

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

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

Код добавлен в тело документа. confirmOverlay отображен поверх остальной страницы, что предотвращает любое взаимодействие с элементами страницы, если диалоговое окно отображено. h1, p и div 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;
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) с предусмотренным откатом в виде прозрачного PNG.

Далее, в расположенном по центру дисплея #confirmBox, мы добавили внутреннюю тень блока (нечто похожее на внутреннее свечение в Photoshop). Мы также использовали шрифт Cuprum, который был добавлен из каталога шрифтов от Google.

Наряду с тенями текста, вы можете увидеть стилизацию кнопок. Они реализованы при помощи скользящих дверок. На данный момент доступно два типа дизайна – синий и серый. Вы можете добавить новый цвет кнопки посредством добавления новых объявлений в код.

jQuery

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

Script.js

$(document).ready(function(){

$(".item .delete").click(function(){

Var elem = $(this).closest(".item");

$.confirm({
"title" : "Delete Confirmation",
"message" : "You are about to delete this item.
It cannot be restored at a later time! Continue?",
"buttons" : {
"Yes" : {
"class" : "blue",
"action": function(){
elem.slideUp();
}
},
"No" : {
"class" : "gray",
"action": function(){} // Nothing to do in this case. You can as well omit the action property.
}
}
});

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

Теперь давайте перейдём к интересной части. В jquery.confirm.js вы можете увидеть исходный код нашего диалогового окна.

Jquery.confirm.js

$.confirm = function(params){

If($("#confirmOverlay").length){
// A confirm is already shown on the page:
return false;
}

Var buttonHTML = "";

// Generating the markup for the buttons:

If(!obj.action){
obj.action = function(){};
}
});

Var markup = [
"

",params.message,"

",
buttonHTML,
"

$(markup).hide().appendTo("body").fadeIn();

Var buttons = $("#confirmBox .button"),
i = 0;

$.each(params.buttons,function(name,obj){
buttons.eq(i++).click(function(){

// Calling the action attribute when a
// click occurs, and hiding the confirm.

Obj.action();
$.confirm.hide();
return false;
});
});
}

$.confirm.hide = function(){
$("#confirmOverlay").fadeOut(function(){
$(this).remove();
});
}

Наш плагин определяет метод $.confirm(). Данный метод обрабатывает данные, которые вы внесли, конструирует разметку, а затем добавляет всё это на страницу. Так как div #confirmOverlay имеет фиксированную позицию посредством CSS-объявления, мы оставим процесс центрирования браузеру, а затем перемещать его при прокрутке страницы пользователем.

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

На этом наше диалоговое окно завешено!

Подытожим

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

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

Внимание! У вас нет прав для просмотра скрытого текста.

В JavaScript существует три базовых операции, которые позволяют получать данные от пользователя, для дальнейшей их обработки в скриптах. Это alert, prompt и confirm. Для чего они применяются, как их использовать и прочие нюансы и будут рассмотрены далее в этой статье.

Применяется для вывода на экран браузера модального окна (это означает, что пользователь ничего не может нажать на странице, пока не закроет это окно. В рассматриваемом примере, до тех пор, пока не кликнет «ОК» в окне).

После вывода сообщения, содержащегося в alert, выполнение скрипта приостанавливается и возобновляется после закрытия модального окна.

В случае заполнения поля и нажатия ОК, в скрипт вернется информация, которую ввел пользователь.

Синтаксис данной команды несколько сложнее, чем предыдущей, поскольку позволяет задать текст обращения к пользователю и содежимое поля для ввода информации, которое будет выводиться по умолчанию: result = prompt(title, default ) ; , где

• title – сообщение, которое будет выведено пользователю в модальном окне. Аргумент обязательный для заполнения.
• default – то, что выведется в поле для ввода текста по умолчанию. Также обязателен для заполнения, поскольку если его не задать, то это может привести к ошибкам в некоторых браузерах. Если же вы хотите оставить поле ввода информации пустым, то просто задайте prompt следующим образом:

  var myTest = prompt("Любое инфо" , """);

Маленький пример использования prompt:

var year = prompt("В каком году вы закончили ВУЗ?" , 2008 ) ; alert("Вы выпускник " + year + " года!" ) ;

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

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

Для того и заточена – для взаимодействия предоставляет пользователю кнопки OK и CANCEL, которые возвращают скрипту булевы значения true и false соответственно.Оценок: 4 (средняя 4 из 5 )