jquery easyUI dialog事件

原创 2015年07月09日 17:06:20

扩展自$.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>  

使用Javascript创建对话框窗口也是允许的。现在让我们创建一个模式窗口并调用'refresh'方法通过ajax读取内容。

  1. <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');  


 

属性

对话框窗口的属性扩展自window(窗口),对话框窗口重新定义的属性如下:

属性名 属性值类型 描述 默认值
title string 对话框窗口标题文本。 New Dialog
collapsible boolean 定义是否显示可折叠按钮。 false
minimizable boolean 定义是否显示最小化按钮。 false
maximizable boolean 定义是否显示最大化按钮。 false
resizable boolean 定义是否可以改变对话框窗口大小。 false
toolbar array,selector 设置对话框窗口顶部工具栏,可用值有:
1) 一个数组,每一个工具栏中的工具属性都和linkbutton相同。
2) 一个选择器指定工具栏。

对话框窗口工具栏可以声明在<div>标签里面:

<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'我的对话框',toolbar:'#tb',modal:true">
对话框窗口内容。
</div>
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>

对话框窗口工具栏也可以通过数组进行定义:

<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')}
			}]">
	对话框窗口内容。
</div>
null
buttons array,selector 对话框窗口底部按钮,可用值有:
1) 一个数组,每一个按钮的属性都和linkbutton相同。
2) 一个选择器指定按钮栏。

按钮可以声明在<div>标签里面:

<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog',buttons:'#bb',modal:true">
 对话框窗口内容。
</div>
<div id="bb">
<a href="#" class="easyui-linkbutton">保存</a>
<a href="#" class="easyui-linkbutton">关闭</a>
</div>

按钮也可以通过数组定义:

<div class="easyui-dialog" style="width:600px;height:300px"
		data-options="title:'我的对话框',modal:true,
			buttons:[{
				text:'保存',
				handler:function(){...}
			},{
				text:'关闭',
				handler:function(){...}
			}]">
	对话框窗口内容。
</div>
null

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

事件

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

方法

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

方法名 方法参数 描述
dialog none 返回外部对话框窗口对象。

?

 

 


easyui dialog onLoad事件对对话框中的内容进行初始化

easyui dialog onLoad事件对对话框中的内容进行初始化,checkbox、radio、input、textarea禁用 function detail(){ var url...

easyUI 对话框的关闭事件

有一个easyUI的dialog:
  • leftfist
  • leftfist
  • 2015年01月04日 22:34
  • 24790

jQuery Dialog对话框事件

Dialog对话框事件 对话框应用场景 对话框是最常用、最实用的功能。 1)  静态提示类对话框,对话框的内容是固定的 2)  动态提示类对话框,对话框内容是根据事件源变化的 3)  遮罩类...

自定义dialog响应按钮点击事件

1、新建activity类 2、新建dialog类,继承AlertDialog类,(也可以在直接用AlertDialog.Builder新建类) 3、actibity类中创建dialog类对象。 ...

Jquery easyUI dialog的close和destroy

之前在用easyUI的时候遇到一个问题,一直困扰着我。问题:使用dialog来实现保存和编辑框,使用dialog.(“close”)来关闭dialog框,这个时候如果有两个页面的保存页面的表单的字段相...

easyui dialog远程加载内容完成后,进行对话内容(表单)初始化

通过查看easyui的帮助文档,dialog继承于window,window继承于panel,panel中有个onLoad事件,也就是当远程数据加载完成后,触发此事件。因此只要在此事件中对对话框中的内...

[扩展]EasyUI给dialog的buttons绑定click事件

通常,Dialog中的Buttons的Click是在生成的时候就通过如下方式写好的。 官网的代码 ...

easyui 的dialog 的href加载,子页面的document ready事件无效!

http://www.easyui.info/archives/343.html 所以,最好的方法就是放在onload事件中进行初始化操作,然而,这样,代码就就比较乱了,B页面的初始化代码放在了A页面...

jquery easyui dialog不超出父容器以及随浏览器缩放

tag:jquery , easyui, dialog , 缩放 code: body{width:10...

Ext.MessageBox学习,包括alert,confirm,prompt,wait和show的使用方法

1:基本知识Note that the MessageBox is asynchronous. Unlike a regular JavaScript alert (which will halt b...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery easyUI dialog事件
举报原因:
原因补充:

(最多只允许输入30个字)