jQuery EasyUI Window Plugin - Dialog
Extends from $.fn.window.defaults. Overrides defaults with $.fn.dialog.defaults.
A dialog is a special type of window that has a toolbar at the top and a button bar at the bottom. By default, a dialog has only one close tool displayed at the top right. Users can configure dialog behavior to display other tools (such as collapsible, minimizable, maximizable, etc.).
Dependencies
- window
- linkbutton
Usage
Create a dialog from an existing DOM node using markup. The following example demonstrates a modal dialog with resizable features.
<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>
Create a dialog using JavaScript. Now let's create a modal dialog and then call the 'refresh' method to load its content via 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');
Properties
This property extends from window. Below are the properties overridden for dialog.
| Name | Type | Description | Default Value |
|---|---|---|---|
| title | string | The title text of the dialog. | New Dialog |
| collapsible | boolean | Defines whether to show the collapse button. | false |
| minimizable | boolean | Defines whether to show the minimize button. | false |
| maximizable | boolean | Defines whether to show the maximize button. | false |
| resizable | boolean | Defines whether the dialog is resizable. | false |
| toolbar | array,selector | The top toolbar of the dialog, possible values: <br>1. Array, each tool option is the same as linkbutton. <br>2. Selector, indicating the toolbar. <br><br>Dialog toolbar can be declared in a <div> tag: <div class="easyui-dialog" style="width:600px;height:300px"<br> data-options="title:'My Dialog',toolbar:'#tb',modal:true"><br> Dialog Content.<br></div><br><div id="tb"><br><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a><br><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a><br></div>Dialog toolbar can also be defined by an array: <div class="easyui-dialog" style="width:600px;height:300px"<br> data-options="title:'My Dialog',modal:true,<br> toolbar:[{<br> text:'Edit',<br> iconCls:'icon-edit',<br> handler:function(){alert('edit')}<br> },{<br> text:'Help',<br> iconCls:'icon-help',<br> handler:function(){alert('help')}<br> }]"><br> Dialog Content.<br></div> | null |
| buttons | array,selector | The bottom buttons of the dialog, possible values: <br>1. Array, each button option is the same as linkbutton. <br>2. Selector, indicating the button bar. <br><br>Buttons can be declared in a <div> tag: <div class="easyui-dialog" style="width:600px;height:300px"<br> data-options="title:'My Dialog',buttons:'#bb',modal:true"><br> Dialog Content.<br></div><br><div id="bb"><br> <a href="#" class="easyui-linkbutton">Save</a><br> <a href="#" class="easyui-linkbutton">Close</a><br></div>Buttons can also be defined by an array: <div class="easyui-dialog" style="width:600px;height:300px"<br> data-options="title:'My Dialog',modal:true,<br> buttons:[{<br> text:'Save',<br> handler:function(){...}<br> },{<br> text:'Close',<br> handler:function(){...}<br> }]"><br> Dialog Content.<br></div> | null |
Events
This event extends from panel.
Methods
This method extends from window. Below are the methods added for dialog.
| Name | Parameters | Description |
|---|---|---|
| dialog | none | Returns the outer dialog object. |