jQuery EasyUI Window Plugin -Dialog

jQuery EasyUI 插件Плагин jQuery EasyUI

Наследует от $.fn.window.defaults. Переопределите значения по умолчанию с помощью $.fn.dialog.defaults.

Диалог — это особый тип окна, имеющий панель инструментов сверху и панель кнопок снизу. По умолчанию диалог имеет только один инструмент закрытия, отображаемый в правой части заголовка. Пользователи могут настроить поведение диалога, чтобы отображать другие инструменты (такие как: сворачиваемый, минимизируемый, максимизируемый и т. д.).

Зависимости

  • window
  • linkbutton

Использование

Создайте диалог из существующего узла DOM с разметкой. Пример ниже демонстрирует модальный диалог с возможностью изменения размера.

<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"
    data-options="iconCls:'icon-save',resizable:true,modal:true">
    Dialog Content.
</div>

Создайте диалог с помощью JavaScript. Теперь давайте создадим модальный диалог, затем вызовем метод 'refresh', чтобы загрузить его содержимое через ajax.

<div id="dd">Dialog Content.</div>

$('#dd').dialog({
    title: 'My Dialog',
    width: 400,
    height: 200,
    closed: false,
    cache: false,
    href: 'get_content.php',
    modal: true
});
$('#dd').dialog('refresh', 'new_content.php');

Свойства

Эти свойства наследуются от window. Ниже перечислены свойства, переопределённые для диалога.

Name Type Описание Значение по умолчанию
title string Текст заголовка диалога. Новый диалог
collapsible логическое значение Определяет, отображать ли кнопку сворачивания. false
minimizable логическое значение Определяет, отображать ли кнопку минимизации. false
maximizable логическое значение Определяет, отображать ли кнопку максимизации. false
resizable логическое значение Определяет, можно ли изменять размер диалога. false
toolbar массив, селектор Верхняя панель инструментов диалога. Возможные значения:
1. Массив, опции каждого инструмента такие же, как у linkbutton.
2. Селектор, указывающий на панель инструментов.

Панель инструментов dialog можно объявить в теге <div>:
<div class="easyui-dialog" style="width:600px;height:300px"
        data-options="title:'My Dialog',toolbar:'#tb',modal:true">
    Dialog Content.
</div>
<div id="tb">
<a href="../index.html" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
<a href="../index.html" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>
Панель инструментов dialog также можно определить с помощью массива:
<div class="easyui-dialog" style="width:600px;height:300px"
        data-options="title:'My Dialog',modal:true,
            toolbar:[{
                text:'Edit',
                iconCls:'icon-edit',
                handler:function(){alert('edit')}
            },{
                text:'Help',
                iconCls:'icon-help',
                handler:function(){alert('help')}
            }]">
    Dialog Content.
</div>
null
buttons массив, селектор Нижние кнопки dialog. Возможные значения:
1. Массив, опции каждой кнопки такие же, как у linkbutton.
2. Селектор, указывающий на панель кнопок.

Кнопки можно объявить в теге <div>:
<div class="easyui-dialog" style="width:600px;height:300px"
        data-options="title:'My Dialog',buttons:'#bb',modal:true">
    Dialog Content.
</div>
<div id="bb">
    <a href="../index.html" class="easyui-linkbutton">Save</a>
    <a href="../index.html" class="easyui-linkbutton">Close</a>
</div>
Кнопки также можно определить с помощью массива:
<div class="easyui-dialog" style="width:600px;height:300px"
        data-options="title:'My Dialog',modal:true,
            buttons:[{
                text:'Save',
                handler:function(){...}
            },{
                text:'Close',
                handler:function(){...}
            }]">
    Dialog Content.
</div>
null

Events

Эти события наследуются от panel.

Методы

Эти методы наследуются от window. Ниже перечислены методы, добавленные для dialog.

Name Parameters Описание
dialog none Возвращает объект внешнего диалогового окна.
jQuery EasyUI 插件jQuery EasyUI Plugin Другие расширения