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 返回外部对话框窗口对象。

?

 

 


自定义Dialog如何监听按钮事件

利用回调方法,在调用处,进行Dialog中各按钮的事件处理。 [html] view plaincopyprint? package com.demo;        impo...
  • gaidandan
  • gaidandan
  • 2014年08月15日 08:08
  • 1478

jQuery Dialog对话框事件

Dialog对话框事件 对话框应用场景 对话框是最常用、最实用的功能。 1)  静态提示类对话框,对话框的内容是固定的 2)  动态提示类对话框,对话框内容是根据事件源变化的 3)  遮罩类...
  • dingyan954
  • dingyan954
  • 2012年03月28日 21:10
  • 7352

Jquery easyUI dialog的close和destroy

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

easyUI 对话框的关闭事件

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

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

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

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

easyui dialog onLoad事件对对话框中的内容进行初始化,checkbox、radio、input、textarea禁用 function detail(){ var url...
  • aishangit
  • aishangit
  • 2017年07月28日 10:17
  • 1073

easyUI Dialog

@author YHC 从 $.fn.window.defaults继承,覆盖默认值 $.fn.dialog.defaults. dialog 是一个特殊的类型的window,它可以有一个工具...
  • yhc13429826359
  • yhc13429826359
  • 2012年08月02日 17:04
  • 5328

jQuery EasyUI中window/dialog 窗口折叠和展开方法(显示)

在jQuery的EasyUI中新窗口或消息框是通过class="easyui-window"和class="easyui-dialog"定义,并可以通过其collapsible、minimizable...
  • motrsky
  • motrsky
  • 2015年10月29日 16:29
  • 1259

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

1、新建activity类 2、新建dialog类,继承AlertDialog类,(也可以在直接用AlertDialog.Builder新建类) 3、actibity类中创建dialog类对象。 ...
  • SUNNYXIAOYANAN
  • SUNNYXIAOYANAN
  • 2013年12月19日 10:48
  • 2457

Jquery EasyUI Dialog的使用

jquery easyui设置对话框,具体实现步骤如下: 首先第一步肯定是先新建一个JSP页面(跳过) 第二步是引入所需的js和css文件:   第三步html代码: body>...
  • u010202304
  • u010202304
  • 2015年04月09日 00:29
  • 6244
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery easyUI dialog事件
举报原因:
原因补充:

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