jQuery EasyUI Window -Создание диалогового окна

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

Создание диалогового окна

Диалоговое окно очень простое; его можно создать из тега DIV, как показано ниже:

    <div id="dd" class="easyui-dialog" style="padding:5px;width:400px;height:200px;"
            title="My Dialog" iconCls="icon-ok"
            toolbar="#dlg-toolbar" buttons="#dlg-buttons">
        Dialog Content.
    </div>

Подготовка панели инструментов и кнопки

    <div id="dlg-toolbar">
        <a href="../index.html" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">Add</a>
        <a href="../index.html" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">Save</a>
    </div>
    <div id="dlg-buttons">
        <a href="../index.html" class="easyui-linkbutton" iconCls="icon-ok" onclick="javascript:alert('Ok')">Ok</a>
        <a href="../index.html" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Cancel</a>
    </div>

В приведённом выше коде мы создали диалоговое окно с панелью инструментов и кнопками. Это стандартная конфигурация диалогового окна, панели инструментов, содержимого и кнопок.

Скачать примеры jQuery EasyUI

jeasyui-win-dlg1.zip