Пример JQuery UI - Dialog (Диалог)
Открытый контент в интерактивном наложения.
Для получения более подробной информации о диалоговых компонентов см API документации диалоговых компонентов (диалоговое окно Widget) .
По умолчанию функция
Основное диалоговое окно расположено в зоне обзора в покровном слое, через содержание плавающего фрейма и страницы отделенного (как выбрать элементы). Она состоит из заголовка и композиции области содержимого, и могут быть перемещены, изменять размер, по умолчанию значком 'X', чтобы закрыть.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI Dialog (Dialog) - функция по умолчанию </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#dialog") .dialog ();
});
</ Script>
</ Head>
<Body>
<Div ID = "Диалог" название = "Основной диалог">
<P> Это диалоговое окно по умолчанию для отображения информации. Диалог окно можно перемещать, изменять размер, по умолчанию значком 'X', чтобы закрыть. </ P>
</ Div>
</ Body>
</ HTML>
анимация
Можно указать специальные эффекты показать / скрыть свойство анимации, чтобы отобразить диалоговое окно. Вы должны обратиться в отдельный файл для эффекта, который вы хотите использовать специальные эффекты.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI Dialog (Диалог) - Аниме </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#dialog") .dialog ({
AutoOpen: ложь,
шоу: {
Эффект: "слепой",
Продолжительность: 1000
},
скрыть: {
Эффект: "взрываются",
Продолжительность: 1000
}
});
$ ( "#opener") .click (Функция () {
$ ( "#dialog") .dialog ( "Open");
});
});
</ Script>
</ Head>
<Body>
<Div ID = "Диалог" название = "Основной диалог">
<P> Это анимированный отображение диалогового окна для отображения информации. Диалог окно можно перемещать, изменять размер, по умолчанию значком 'X', чтобы закрыть. </ P>
</ Div>
<Кнопка ID = "открыватель"> Открыть диалоговое окно </ кнопка>
</ Body>
</ HTML>
Базовый режим
Диалог остальные режимное страницы, чтобы запретить пользователям за пределами диалогового окна, чтобы взаимодействовать, пока диалоговое окно не будет закрыто.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI Dialog (Диалог) - основной модальный </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "# Диалог-модальный») .dialog ({
высота: 140,
модальный: правда
});
});
</ Script>
</ Head>
<Body>
<Div ID = "Диалог-модальный" название = "основные модальные диалоговые окна">
<P> Add-модальный экран наложения, сделать диалог будет выглядеть более заметным, поскольку он тускнеет пусть другое содержимое на странице. </ P>
</ Div>
<P> Сед Vel диам ID либеро <a href="http://www.w3cschool.cc"> rutrum convallis </a>. Донец aliquet Лев Vel Магна. Phasellus rhoncus faucibus анте. Etiam Bibendum, enim faucibus aliquet rhoncus, arcu Felis ultricies neque, сидеть Амет auctor Элит EROS A Lectus. </ p>
</ Body>
</ HTML>
Модальные подтверждение
Подтвердить разрушительное действие может быть также возможно чувство. Установка modal возможность верно, и buttons , чтобы назначить первичные и вторичные пользовательские варианты действий.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI Dialog (Диалог) - модальный подтверждение </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "Диалог-Confirm #") .dialog ({
изменяемыми: ложь,
высота: 140,
модальный: правда,
Кнопки: {
"Удалить все элементы": Функция () {
$ (Это) .dialog ( "закрыть");
},
Отмена: функция () {
$ (Это) .dialog ( "закрыть");
}
}
});
});
</ Script>
</ Head>
<Body>
<Div ID = "Диалог-Confirm" название = "Очистить корзину?">
<P> <SPAN класс = "UI-значок UI-значок-предупреждение" стиль = "плавать: слева; маржа: 0 7px 20px 0;"> </ SPAN> Эти пункты будут навсегда удалены и не могут быть восстановлены. Вы уверены? </ P>
</ Div>
<P> Сед Vel диам ID либеро <a href="http://www.w3cschool.cc"> rutrum convallis </a>. Донец aliquet Лев Vel Магна. Phasellus rhoncus faucibus анте. Etiam Bibendum, enim faucibus aliquet rhoncus, arcu Felis ultricies neque, сидеть Амет auctor Элит EROS A Lectus. </ p>
</ Body>
</ HTML>
Модальная форма
модальное диалоговое окно, чтобы запросить пользователя ввести данные в многоступенчатый процесс. Встроенные в содержательной форме область набора тегов modal вариант правда, и buttons , чтобы назначить первичные и вторичные пользовательские варианты действий.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI Dialog (Диалог) - модальные формы </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
тело {размер шрифта: 62,5%;}
этикетки, вход {дисплей: блок;}
input.text {краю дна: 12px; ширина: 95%; обивка: .4em;}
FIELDSET {утеплитель: 0; граница: 0; маржа-топ: 25px;}
h1 {размер шрифта: 1.2em; маржа: .6em 0;}
DIV # пользователей, содержит {ширина: 350px; поле: 20px 0;}
DIV # пользователей-содержат таблицы {край: 1em 0; границы коллапса: коллапса, ширина: 100%;}
DIV # пользователей, содержат таблицы тд, отд # пользователей, содержит таблицу й {границы: 1px твердый #eee; отступы: .6em 10px; выравнивания текста: слева;}
.ui-диалог .ui состояния ошибок {утеплитель: .3em;}
.validateTips {границы: 1px твердый прозрачный; обивка: 0.3em;}
</ Style>
<Script>
$ (Function () {
Имя переменная = $ ( "#name"),
электронная почта = $ ( "#email"),
пароль = $ ( "#password"),
allFields = $ ([]) .Добавьте (имя) .Add (электронная почта) .Add (пароль),
советы = $ ( ".validateTips");
Функция updateTips (т) {
чаевые
.text (т)
.addClass ( "Пользовательский интерфейс-состояние-изюминка");
setTimeout (функция () {
tips.removeClass ( "Пользовательский интерфейс-состояние-изюминка", 1500);
}, 500);
}
Функция checkLength (о, п, мин, макс) {
если (o.val (). длина> тах || o.val (). Длина <мин) {
o.addClass ( "Пользовательский интерфейс состояния ошибок");
updateTips ( "" + п + "должен находиться под" +
мин + "между". "и" + не более +);
возвращение ложным;
} Else {
возвращает истину;
}
}
Функция checkRegexp (о, регулярное выражение, п) {
если (! (regexp.test (o.val ()))) {
o.addClass ( "Пользовательский интерфейс состояния ошибок");
updateTips (п);
возвращение ложным;
} Else {
возвращает истину;
}
}
$ ( "Диалог-форма #") .dialog ({
AutoOpen: ложь,
высота: 300,
ширина: 350,
модальный: правда,
Кнопки: {
"Создать учетную запись": функция () {
переменная bValid = TRUE;
allFields.removeClass ( "Пользовательский интерфейс состояния ошибок");
bValid = bValid && checkLength (имя, "Имя пользователя", 3, 16);
bValid = bValid && checkLength (электронная почта, "электронная почта", 6, 80);
bValid = bValid && checkLength (пароль, "пароль", 5, 16);
bValid = bValid && checkRegexp (имя, / ^ [AZ] ([0-9a-Z _]) + $ / я, "имя пользователя должно быть AZ, 0-9, подчеркивания, и должен начинаться с буквы.");
// Из jquery.validate.js (по Йорн), способствовали Скотт Гонсалес: http://projects.scottsplayground.com/email_address_validation/
bValid = bValid && checkRegexp (электронная почта, / ^ ((([AZ] | \ d | [# \ $% & '\ * \ + \ - \ / = \ \ ^ _ `{\ |} !? ~] | . [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) + (\ ([AZ] | \ d | [# \ $% & '\ * \ + \ - \ / = \ \!? ^ _` {\ |} ~] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) +) *) | ((\ x22) ((((\ x20 | \ x09) * ( \ x0D \ x0a)) (\ x20 |? \ x09) +) (([\ x01- \ x08 \ x0b \ x0c \ x0e- \ x1f \ x7f] |? \ x21 | [\ x23- \ X5b] | [ \ x5d- \ x7E] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) | (\\ ([\ x01- \ x09 \ x0b \ x0c \ x0d- \ x7f] | [\ u00A0 ? - \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF])))) * (((\ x20 | \ x09) * (\ x0D \ x0a)) (\ x20 | \ x09) +) (\ x22? ))) @ ((([AZ] | \ d | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) | (([AZ] | \ d | [\ u00A0- \ uD7FF \ uF900 - \ uFDCF \ uFDF0- \ uFFEF]) ([AZ] | \ d | - |. \ | _ | ~ | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) * ([AZ] | \ d | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]))) \) + (([AZ] |. [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF ]) | (([AZ] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) ([AZ] | \ d | - |. \ | _ | ~ | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) * ([AZ] |.?. [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]))) \ $ / я, "например, пользовательский интерфейс @ jquery.com ");
bValid = bValid && checkRegexp (пароль, / ^ ($ /, [0-9a-Za-Z]) + "поле пароля разрешено только: AZ 0-9");
если (bValid) {
$ ( "# Пользователи TBODY") .append ( "<TR>" +
"<Td>" + name.val () + "</ TD>" +
"<Td>" + email.val () + "</ TD>" +
"<Td>" + password.val () + "</ TD>" +
"</ Tr>");
$ (Это) .dialog ( "закрыть");
}
},
Отмена: функция () {
$ (Это) .dialog ( "закрыть");
}
},
близко: функция () {
allFields.val ( "") .removeClass ( "Пользовательский интерфейс состояния ошибок");
}
});
$ ( "# Создать пользователя")
.button ()
.click (функция () {
$ ( "# Диалог-форма") .dialog ( "открытый");
});
});
</ Script>
</ Head>
<Body>
<Div ID = "Диалог-форма" название = "Создать нового пользователя">
<P класс = "validateTips"> все поля формы обязательны для заполнения. </ P>
<Форма>
<Fieldset>
<Ярлык = "имя"> имя </ метка>
<Тип входного = "текст" имя = "имя" ID = "имя" класс = "Текст UI-виджета-контента UI-краеугольный все">
<Ярлык = "электронная почта"> почтового ящика </ метка>
<Тип входного = "текст" имя = "электронная почта" ID = "электронная почта" значение = "" класс = "Текст UI-виджета-контента UI-краеугольный все">
<Ярлык = "пароль"> Пароль </ метка>
<Тип входного = "пароль" имя = "пароль" ID = "пароль" значение = "" класс = "Текст UI-виджета-контента UI-краеугольный все">
</ Fieldset>
</ Форма>
</ Div>
<Div ID = "пользователи-содержат" класс = "UI-виджета">
<H1> существующий пользователь: </ h1>
<Таблица ID = "пользователи" класс = "UI-виджет UI-виджет-контента">
<THEAD>
<Tr класс = "UI-виджет-заголовок">
<Th> Имя </ й>
<Th> почтового ящика </ й>
<Th> пароль </ й>
</ TR>
</ THEAD>
<TBODY>
<Tr>
<Td> John Doe </ TD>
<Td> [email protected] </ TD>
<Td> johndoe1 </ TD>
</ TR>
</ TBODY>
</ Table>
</ Div>
<Button ID = "создать пользователя"> Создание нового пользователя </ кнопка>
</ Body>
</ HTML>
Модальные сообщение
модальное диалоговое окно для подтверждения информации и действия до того, следующее действие выполняется. Установка modal возможность верно, и buttons , чтобы указать основные параметры действий (OK).
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI Dialog (Диалог) - модальный сообщение </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "Диалог-сообщение #") .dialog ({
модальный: правда,
Кнопки: {
Ok: функция () {
$ (Это) .dialog ( "закрыть");
}
}
});
});
</ Script>
</ Head>
<Body>
<Div ID = "Диалог-сообщение" название = "Загрузка завершена">
<P>
<Span класс = "UI-значок UI-значок круга проверить" стиль = "плавать: слева; маржа: 0 7px 50px 0;"> </ SPAN>
Ваш файл был успешно загружен в папку.
</ P>
<P>
Текущее использование дискового пространства <B> 36% </ b>.
</ P>
</ Div>
<P> Сед Vel диам ID либеро <a href="http://www.w3cschool.cc"> rutrum convallis </a>. Донец aliquet Лев Vel Магна. Phasellus rhoncus faucibus анте. Etiam Bibendum, enim faucibus aliquet rhoncus, arcu Felis ultricies neque, сидеть Амет auctor Элит EROS A Lectus. </ p>
</ Body>
</ HTML>