jquery easyUI dialog事件

野性酷女 2022-08-02 04:57 223阅读 0赞

扩展自$.fn.window.defaults。使用$.fn.dialog.defaults重写默认值对象。

该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。

默认弹框是对于浏览器窗口剧中的，如果想对于当前操作页面居中可以自己设置：

弹框需要一个显示的容器<div id='dlg'></div>

这样就可以用$("\#dlg").panel("move",\{left: 100,top:200 \})，要是对于当前页面居中：

$('#dlg').dialog({   
        title: 'My Dialog',   
        width: 400 
    });

可以将left的值设置成（$(document).width()-dialog中对应的width属性的值）/2即可

用法

通过已存在的DOM节点元素标签创建。下面的例子显示了一个可变大小的模式窗口。

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

<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读取内容。

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

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

1.  $('\#dd').dialog(\{   
2.      title: 'My Dialog',   
3.      width: 400,   
4.      height: 200,   
5.      closed: false,   
6.      cache: false,   
7.      href: 'get\_content.php',   
8.      modal: true  
9.  \});   
10. $('\#dd').dialog('refresh', 'new\_content.php');

$('\#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(窗口)，对话框窗口重新定义的属性如下：

<table> 
 <tbody> 
  <tr> 
   <th><strong>属性名</strong></th> 
   <th><strong>属性值类型</strong></th> 
   <th><strong>描述</strong></th> 
   <th><strong>默认值</strong></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) 一个选择器指定工具栏。 <p>对话框窗口工具栏可以声明在&lt;div&gt;标签里面：</p> <p>&lt;div class="easyui-dialog" style="width:600px;height:300px"<br> data-options="title:'我的对话框',toolbar:'#tb',modal:true"&gt;<br> 对话框窗口内容。<br> &lt;/div&gt;<br> &lt;div id="tb"&gt;<br> &lt;a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a&gt;<br> &lt;a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a&gt;<br> &lt;/div&gt;<br> </p> <p>对话框窗口工具栏也可以通过数组进行定义：</p> <pre>&lt;div class="easyui-dialog" style="width:600px;height:300px"
		data-options="title:'My Dialog',modal:true,
			toolbar:[{
				text:'编辑',
				iconCls:'icon-edit',
				handler:function(){alert('edit')}
			},{
				text:'帮助',
				iconCls:'icon-help',
				handler:function(){alert('help')}
			}]"&gt;
	对话框窗口内容。
&lt;/div&gt;
</pre> </td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>buttons</td> 
   <td>array,selector</td> 
   <td>对话框窗口底部按钮，可用值有：<br> 1) 一个数组，每一个按钮的属性都和linkbutton相同。<br> 2) 一个选择器指定按钮栏。 <p>按钮可以声明在&lt;div&gt;标签里面：</p> <p>&lt;div class="easyui-dialog" style="width:600px;height:300px"<br> data-options="title:'My Dialog',buttons:'#bb',modal:true"&gt;<br> &nbsp;对话框窗口内容。<br> &lt;/div&gt;<br> &lt;div id="bb"&gt;<br> &lt;a href="#" class="easyui-linkbutton"&gt;保存&lt;/a&gt;<br> &lt;a href="#" class="easyui-linkbutton"&gt;关闭&lt;/a&gt;<br> &lt;/div&gt;<br> </p> <p>按钮也可以通过数组定义：</p> <pre>&lt;div class="easyui-dialog" style="width:600px;height:300px"
		data-options="title:'我的对话框',modal:true,
			buttons:[{
				text:'保存',
				handler:function(){...}
			},{
				text:'关闭',
				handler:function(){...}
			}]"&gt;
	对话框窗口内容。
&lt;/div&gt;
</pre> </td> 
   <td>null</td> 
  </tr> 
 </tbody> 
</table>

### ###

#### 事件 ####

对话框窗口事件完全继承自window(窗口)。

#### 方法 ####

对话框窗口的方法扩展自window(窗口)，对话框窗口新增的方法如下：

<table> 
 <tbody> 
  <tr> 
   <th><strong>方法名</strong></th> 
   <th><strong>方法参数</strong></th> 
   <th><strong>描述</strong></th> 
  </tr> 
  <tr> 
   <td>dialog</td> 
   <td>none</td> 
   <td>返回外部对话框窗口对象。</td> 
  </tr> 
 </tbody> 
</table>