EasyUI中Dialog对话框的简单使用

淩亂°似流年 2023-10-18 20:08 35阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

### 属性 ###

该属性扩展自窗口（window）下面是为对话框（dialog）重写的属性。

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>string</td> 
   <td>对话框的标题文本。</td> 
   <td>New Dialog</td> 
  </tr> 
  <tr> 
   <td>collapsible</td> 
   <td>boolean</td> 
   <td>定义是否显示折叠按钮。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>minimizable</td> 
   <td>boolean</td> 
   <td>定义是否显示最小化按钮。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>maximizable</td> 
   <td>boolean</td> 
   <td>定义是否显示最大化按钮。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>resizable</td> 
   <td>boolean</td> 
   <td>定义对话框是否可调整尺寸。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>toolbar</td> 
   <td>array,selector</td> 
   <td>对话框的顶部工具栏，可能的值：<br> 1、数组，每个工具的选项都与链接按钮（linkbutton）一样。<br> 2、选择器，指示工具栏。<br><br> 对话框工具栏可以在 &lt;div&gt;标签中声明： <pre>&nbsp;</pre> 
    <ol> 
     <li>&lt;div class="easyui-dialog" style="width:600px;height:300px"</li> 
     <li>data-options="title:'My Dialog',toolbar:'#tb',modal:true"&gt;</li> 
     <li>Dialog Content.</li> 
     <li>&lt;/div&gt;</li> 
     <li>&lt;div id="tb"&gt;</li> 
     <li>&lt;a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a&gt;</li> 
     <li>&lt;a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a&gt;</li> 
     <li>&lt;/div&gt;</li> 
    </ol> 对话框工具栏也可以通过数组定义： <pre>&nbsp;</pre> 
    <ol> 
     <li>&lt;div class="easyui-dialog" style="width:600px;height:300px"</li> 
     <li>data-options="title:'My Dialog',modal:true,</li> 
     <li>toolbar:[{ </li> 
     <li>text:'Edit',</li> 
     <li>iconCls:'icon-edit',</li> 
     <li>handler:function(){alert('edit')}</li> 
     <li>},{ </li> 
     <li>text:'Help',</li> 
     <li>iconCls:'icon-help',</li> 
     <li>handler:function(){alert('help')}</li> 
     <li>}]"&gt;</li> 
     <li>Dialog Content.</li> 
     <li>&lt;/div&gt;</li> 
    </ol></td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>buttons</td> 
   <td>array,selector</td> 
   <td>对话框的底部按钮，可能的值：<br> 1、数组，每个按钮的选项都与链接按钮（linkbutton）一样。<br> 2、选择器，指示按钮栏。<br><br> 按钮可以在 &lt;div&gt;标签中声明： <pre>&nbsp;</pre> 
    <ol> 
     <li>&lt;div class="easyui-dialog" style="width:600px;height:300px"</li> 
     <li>data-options="title:'My Dialog',buttons:'#bb',modal:true"&gt;</li> 
     <li>Dialog Content.</li> 
     <li>&lt;/div&gt;</li> 
     <li>&lt;div id="bb"&gt;</li> 
     <li>&lt;a href="#" class="easyui-linkbutton"&gt;Save&lt;/a&gt;</li> 
     <li>&lt;a href="#" class="easyui-linkbutton"&gt;Close&lt;/a&gt;</li> 
     <li>&lt;/div&gt;</li> 
    </ol> 按钮也可以通过数组定义： <pre>&nbsp;</pre> 
    <ol> 
     <li>&lt;div class="easyui-dialog" style="width:600px;height:300px"</li> 
     <li>data-options="title:'My Dialog',modal:true,</li> 
     <li>buttons:[{ </li> 
     <li>text:'Save',</li> 
     <li>handler:function(){...}</li> 
     <li>},{ </li> 
     <li>text:'Close',</li> 
     <li>handler:function(){...}</li> 
     <li>}]"&gt;</li> 
     <li>Dialog Content.</li> 
     <li>&lt;/div&gt;</li> 
    </ol></td> 
   <td>null</td> 
  </tr> 
 </tbody> 
</table>

### 事件 ###

该事件扩展自面板（panel）。

### 方法 ###

该方法扩展自窗口（window），下面是为对话框（dialog）添加的方法。

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>dialog</td> 
   <td>none</td> 
   <td>返回外部对话框（dialog）对象。</td> 
  </tr> 
 </tbody> 
</table>

## 实现 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
        <script type="text/javascript" src="/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    <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>
    </body>
    </html>

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190619221745242.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70