Dialog

描述

  Dialog,弹出框,可以覆盖ie6中下拉框。一般情况下不用传入id,传入id时是用来防止重复弹出Dialog。点关闭按钮时,会执行onCancel配置的方法,如果返回结果不为false,则会执行关闭。需要注意的是弹出框包含的页面同样需要引用到Dialog.js,否则配置项中onReady引用的函数不会执行。

标签语法

配置项

配置项 类型 描述
id String  弹框id,通常不传
url String 要打开的页面url地址,使用相对当前页面地址
width Number  弹框宽度
height Number  弹框高度
minWidth Number 默认值为200
minHeight Number 默认值为60
title String|false 标题栏显示的标题,如果为false时,将隐藏标题条
url String 要打开的页面url地址,使用相对当前页面地址
top Number|String 数字或百分比(字符串) 默认为居中对齐
left Number|String 数字或百分比(字符串) 默认为居中对齐
onOk Function 点击确定地要执行的方法
onCancel Function 点击“取消”按钮时执行的函数
onLoad Function iframe载入后执行的函数,第一个参数传入iframe内部window对象
onInit Function 对话框初始化后执行的函数
esc Boolean 是否支持按esc键关闭
draggable Boolean 是否支持拖
closable Boolean 是否显示关闭按钮
autoClose Number 多少秒后自动关闭
closeTip String 默认值为'? 秒后自动关闭',
okText String 默认为“确定”,确定按钮上的文字
cancelText String 默认为“取消”,取消按钮上的文字
OKClass String 确定按钮的样式,默认z-dialog-okbutton
cancelClass String 取消按钮的样式,默认z-dialog-cancelbutton
onReady Function iframe DOM树准备好时执行
icon String 消息图标名称 info|warn|query
message String 信息栏内容
showButtonRow Bollean 是否显示按钮栏
animator Boolean 是否动画显示弹出框(未实现)
resizable Boolean 是否可以调整大小

备注:必须在调用show()方法前,配置以上属性。

代码实例

Dialog实例可访问的属性如下

属性名 类型 描述
title String 弹出框的标题
id String 弹出框的id值
okButton HTMLElement “确定”按钮页面对象
cancelButton HTMLElement “取消”按钮页面对象
okText String “确定”按钮上的文字
cancelText String “取消”按钮上的文字
OKClass String “确定”按钮的样式
cancelClass String “取消”按钮的样式
width Number dialog的宽度
height Number dialog的高度
top String dialog的top值
left String dialog的left值
baseCls String dialog的基本样式
buttons Object dialog的所有按钮
opener window 弹出Dialog实例的窗口
innerFrame HTMLElement 弹出框中的iframe元素(如果存在的话)
innerWin window 弹出框的innerFrame对象的contentWindow对象(如果有权限访问的话)
innerDoc document 弹出框的innerWin对象的document对象(如果有权限访问的话)

Dialog内的iframe中window可访问的对象

  类型 描述
ownerDialog Dialog 当前页面所在的dialog实例
dialogOpener window 即ownerDialog.opener

Dialog类的成员方法

方法名 参数 描述
getTitle - 获得dialog的标题
setTitle String txt 设置dialog的标题
getContentEl - 获得dialog内容对象
disableButton String id 禁用dialog的指定id的按钮
enableButton String id 启用dialog的指定id的按钮
addButton String id,String txt,Function func 添加一个按钮到弹出框按钮栏
content String html 设置内容
time Number second 定时关闭dialog
show - 显示弹出框
close - 关闭dialog
hide - 隐藏dialog
setZIndex Number index 设置dialog的层级大小
setSize Number w,Number h 设置dialog内容器的宽高
setPosition Number left,Number top 根据自身的实例的width、height属性调整位置,一般在窗口尺寸改变时调用

Dialog的静态方法

方法名 参数 描述
getInstance String id 通过id返回一个Dialog实例
alert String msg[,Function okFn] 弹出消息框
warn tring msg[,Function okFn] 弹出消息框,与Dialog.alert不同之处在于图标为三角形红色底感叹号
confirm String msg[,Function okFn,Function noFn] 弹出询问对话框
prompt String msg[,Function okFn,String defaultValue] 弹出可输入对话框,输入文本框的值传入为回调方法okFn的第一个参数
tips String msg[,Number time] 弹出一个简单的,会自动关闭的提示框
wait String msg 弹出一个简单的,按钮内容为计时等待的提示框
Dialog.Manager.closeAll  - 关闭所有的弹出框

JS代码实例(各静态方法的使用)

  

Dialog还提供了$D、$DW的简单实用:

  

继承UICompBase之外的事件

事件 描述
move dialog移动时触发
beforeresize dialog改变大小时触发
beforeshow  
show  
beforehide  
hide  
beforeclose dialog关闭前触发
close dialog关闭时触发

 

hackIE