JQuery UI API - диалог компонент (Dialog Widget)
категория
использование
Описание: Открытый контент в интерактивном наложения.
Новая версия: 1.0
Диалог представляет собой плавучее окно, которое включает в себя строку заголовка и область содержимого. Диалог окно можно перемещать, изменять размер, по умолчанию значком 'X', чтобы закрыть.
Если длина содержимого превышает максимальную высоту, полоса прокрутки появится автоматически.
Кнопка нижней панели, и режим полупрозрачные наложения является общим для добавления опций.
фокус
При открытии диалогового окна, фокус автоматически перемещается соответствовать критериям ниже первого пункта:
- С
autofocusДиалог первый элемент в свойствах - Первое содержимое диалогового окна внутри
:tabbableэлемента - Первая панель внутри кнопки диалогового
:tabbableэлемент - Диалоговое окно, кнопка Закрыть
- Само диалоговое окно
При открытии диалоговых компонентов (Dialog Widget) обеспечивают коробки для переключения фокуса между элементами на вкладке, диалоговое окно не включает в себя элементы снаружи. Модальный диалог не позволяет пользователю щелкает элементы мыши вне диалогового окна.
При закрытии диалога, фокус автоматически возвращается в предыдущее диалоговое окно на элементе фокуса.
Скрыть кнопку закрытия
В некоторых случаях вы можете захотеть, чтобы скрыть кнопку закрытия, например, кнопка панели есть кнопка, чтобы закрыть дело. Лучшее решение через CSS. В качестве примера, можно определить простое правило, такие как:
.Но-близко .ui-диалог-Titlebar-закрыть {
Дисплей: нет;
}
Затем, вы можете добавить no-close , класс произвольного диалогового окна используется для скрытия кнопки закрытия:
$ ( "#dialog") .dialog ({
dialogClass: "нет-близко»,
Кнопки: [
{
текст: "OK",
нажмите: функция () {
$ (Это) .dialog ( "закрыть");
}
}
]
});
Тематизация
Диалог компонентов (Виджет диалога) с использованием JQuery рамки UI CSS , чтобы определить внешний вид и его стиль. Если вам необходимо использовать диалоговое окно, чтобы определить стиль, вы можете использовать следующее имя класса CSS:
-
ui-dialog: диалогового внешнего контейнера.-
ui-dialog-titlebar: диалогового окна содержит заголовок и кнопка закрытия в строке заголовка.-
ui-dialog-title: Диалог текста заголовка вокруг контейнера. -
ui-dialog-titlebar-close: кнопку , чтобы закрыть диалоговое окно.
-
-
ui-dialog-content: диалогового содержания вокруг контейнера. Это также часть элемента инстанциируется. -
ui-dialog-buttonpane: содержит диалоговое панель кнопок. Только тогда , когда установочныеbuttons, когда представлены варианты.-
ui-dialog-buttonset: кнопок вокруг контейнера.
-
-
Кроме того, при установке modal параметры времени, с ui-widget-overlay имени класса элемента добавляется к <body> .
полагаться
- Ядро пользовательского интерфейса (UI ядра)
- Библиотеки компонентов (Widget Factory)
- Расположение (Position)
- Кнопка компонента (кнопка Widget)
- Перетаскиваемые виджеты (перетаскиваемую виджетов) ( по желанию, когда
draggableпри использовании с опциями) - Изменение размера виджетов (The Изменяемые виджетов) ( по желанию, когда и
resizableпри использовании с опциями) - Эффекты Ядро (Core Effects) (опционально, когда
showиhideпри использовании с опциями)
дополнительная информация
- Часть требует некоторой функциональной CSS, в противном случае она не будет работать. Если вы создаете собственную тему, используйте виджет указанный файл CSS в качестве отправной точки.
примеров
Простой JQuery UI Dialog (Диалог).
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> диалоговые компоненты (Dialog Widget) Demo </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.10.2.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
</ Head>
<Body>
<Кнопка ID = "открыватель"> Открыть диалоговое окно </ кнопка>
<Div ID = "Диалог" название = "Диалог Title"> Я диалоговое окно </ DIV>
<Script>
$ ( "#dialog") .dialog ({AutoOpen: ложь});
$ ( "#opener") .click (Функция () {
$ ( "#dialog") .dialog ( "Open");
});
</ Script>
</ Body>
</ HTML>