jQuery UI库中dialog对话框功能使用全解析
对话框(dialog),是jQuery UI 非常重要的一个功能。它彻底的代替了JavaScript
的alert()、prompt()等方法,也避免了新窗口或页面的繁杂冗余。
一.开启多个dialog
只要设置不同的id 即可实现。
$('#x').dialog(); $('#y').dialog();
二.修改dialog 样式
在弹出的dialog 对话框中,在火狐浏览器中打开Firebug 或者右击->查看
元素。可以看看dialog 的样式,对dialog 的标题背景进行修改。
//无须修改ui 里的CSS,直接用style.css 替代掉 .ui-widget-header { background:url(../img/xxx.png); }
三.dialog()方法的属性
对话框方法有两种形式:1.dialog(options),options 是以对象键值对的形式
传参,每个键值对表示一个选项;2.dialog('action', param),action 是操作对
话框方法的字符串,param则是options 的某个选项。
属性 | 默认值/类型 | 说明 |
title | 无/字符串 | 对话框的标题,可以直接设置在DOM 元素上 |
buttons | 无/对象 |
以对象键值对方式,给dialog 添加按钮。键是按钮 的名称,值是用户点击后调用的回调函数 |
$('#reg').dialog({ title : '注册', buttons : { '按钮' : function () {} } );
属性 | 默认值/类型 | 说明 |
position | center/字符串 |
设置一个对话框窗口的坐标位置,默认为center。 其他设置值为:left top、top right、bottom left、 right bottom(四个角)、top、bottom(顶部或底 部,宽度居中)、left 或right(左边或右边,高度 居中)、center(默认值) |
$('#reg').dialog({ position : 'left top' });
属性 | 默认值/类型 | 说明 |
width | 300/数值 | 对话框的宽度。默认为300,单位是像素。 |
height | auto/数值 | 对话框的高度。默认为auto,单位是像素。 |
minWidth | 150/数值 | 对话框的最小宽度。默认150,单位是像素。 |
minHeight | 150/数值 | 对话框的最小高度。默认150,单位是像素。 |
maxWidth | auto/数值 | 对话框的最大宽度。默认auto,单位是像素。 |
maxHeight | auto/数值 | 对话框的最大高度。默认auto,单位是像素。 |
$('#reg').dialog({ height : 500, width : 500, minWidth : 300, minHeight : 300, maxWidth : 800, maxHeight : 600 });
属性 | 默认值/类型 | 说明 |
show | false/布尔值 | 显示对话框时,默认采用淡入效果。 |
hide | false 布尔值 | 关闭对话框时,默认采用淡出效果。 |
$('#reg').dialog({ show : true, hide : true });
注意:设置true 后,默认为淡入淡出,如果想使用别的特效,可以使用以下表格中的字符串参数。
特效名称 | 说明 |
blind | 对话框从顶部显示或消失 |
bounce | 对话框断断续续地显示或消失,垂直运动 |
clip | 对话框从中心垂直地显示或消失 |
slide | 对话框从左边显示或消失 |
drop | 对话框从左边显示或消失,有透明度变化 |
fold | 对话框从左上角显示或消失 |
highlight | 对话框显示或消失,伴随着透明度和背景色的变化 |
puff | 对话框从中心开始缩放。显示时“收缩”,消失时“生长” |
scale | 对话框从中心开始缩放。显示时“生长”,消失时“收缩” |
pulsate | 对话框以闪烁形式显示或消失 |
$('#reg').dialog({ show : 'blind', hide : 'blind' });
属性 | 默认值/类型 | 说明 |
autoOpen | true/布尔值 |
默认为true,调用dialog()方法时就会打开对话框; 如果为false,对话框不可见,但对话框已创建,可 以通过dialog('open')才能可见。 |
draggable | true/布尔值 | 默认为true,可以移动对话框,false 无法移动。 |
resizable | true/布尔值 | 默认为true,可以调整对话框大小,false 无法调整 |
modal | false/布尔值 |
默认为false,对话框外可操作,true 对话框会遮罩 一层灰纱,无法操作。 |
closeText | 无/字符串 | 设置关闭按钮的title 文字 |
$('#reg').dialog({ autoOpen : false, draggable : false, resizable : false, modal : true, closeText : '关闭' });
四.dialog()方法的事件
除了属性设置外,dialog()方法也提供了大量的事件。这些事件可以给各种不同状态
时提供回调函数。这些回调函数中的this 值等于对话框内容的div 对象,不是整个对话框
的div。
事件名 | 说明 |
focus |
当对话框被激活时(首次显示以及每次在上面点击)会 调用focus 方法,该方法有两个参数(event, ui)。此事件中 的ui 参数为空。 |
create |
当对话框被创建时会调用create 方法,该方法有两个参 数(event, ui)。此事件中的ui 参数为空。 |
open |
当对话框被显示时(首次显示或调用dialog('open')方法) 会调用open 方法,该方法有两个参数(event, ui)。此事件 中的ui 参数为空。 |
beforeClose |
当对话框将要关闭时( 当单击关闭按钮或调用 dialog('close')方法),会调用beforeclose 方法。如果该函 数返回false,对话框将不会被关闭。关闭的对话框可以 用dialog('open')重新打开。该方法有两个参数(event, ui)。 此事件中的ui 参数为空。 |
close |
当对话框将要关闭时( 当单击关闭按钮或调用 dialog('close')方法),会调用close 方法。关闭的对话框可 以用dialog('open')重新打开。该方法有两个参数(event, ui)。此事件中的ui 参数为空。 |
drag |
当对话框移动时,每次移动一点均会调用drag 方法。该 方法有两个参数。该方法有两个参数(event, ui)。此事件 中的ui 有两个属性对象: 1.position,得到当前移动的坐标,有两个子属性:top 和 left。 2.offset,得到当前移动的坐标,有两个子属性:top 和left。 |
dragStart |
当开始移动对话框时,会调用dragStart 方法。该方法有 两个参数(event, ui)。此事件中的ui 有两个属性对象: 1.position,得到当前移动的坐标,有两个子属性:top 和 left。 2.offset,得到当前移动的坐标,有两个子属性:top 和left。 |
dragStop |
当开始移动对话框时,会调用dragStop 方法。该方法有 两个参数(event, ui)。此事件中的ui 有两个属性对象: 1.position,得到当前移动的坐标,有两个子属性:top 和 left。 2.offset,得到当前移动的坐标,有两个子属性:top 和left。 |
resize |
当对话框拉升大小的时候,每一次拖拉都会调用resize 方法。该方法有两个参数(event, ui)。此事件中的ui 有四 个属性对象: 1.size,得到对话框的大小,有两个子属性:width 和 height。 2.position,得到对话框的坐标,有两个子属性:top 和left。 3.originalSize,得到对话框原始的大小,有两个子属性: width 和height。 4.originalPosition,得到对话框原始的坐标,有两个子属 性:top 和left。 |
resizeStart |
当开始拖拉对话框时,会调用resizeStart 方法。该方法有 两个参数(event, ui)。此事件中的ui 有四个属性对象: 1.size,得到对话框的大小,有两个子属性:width 和 height。 2.position,得到对话框的坐标,有两个子属性:top 和left。 3.originalSize,得到对话框原始的大小,有两个子属性: width 和height。 4.originalPosition,得到对话框原始的坐标,有两个子属 性:top 和left。 |
resizeStop |
当结束拖拉对话框时,会调用resizeStart 方法。该方法有 两个参数(event, ui)。此事件中的ui 有四个属性对象: 1.size,得到对话框的大小,有两个子属性:width 和 height。 2.position,得到对话框的坐标,有两个子属性:top 和left。 3.originalSize,得到对话框原始的大小,有两个子属性: width 和height。 4.originalPosition,得到对话框原始的坐标,有两个子属 性:top 和left。 |
//当对话框获得焦点后 $('#reg').dialog({ focus : function (e, ui) { alert('获得焦点'); } }); //当创建对话框时 $('#reg').dialog({ create : function (e, ui) { alert('创建对话框'); } }); //当将要关闭时 $('#reg').dialog({ beforeClose : function (e, ui) { alert('关闭前做的事!'); return flag; } }); //关闭对话框时 $('#reg').dialog({ close : function (e, ui) { alert('关闭!'); } }); //对话框移动时 $('#reg').dialog({ drag : function (e, ui) { alert('top:' + ui.position.top + '\n' + 'left:' + ui.position.left); } }); //对话框开始移动时 $('#reg').dialog({ dragStart : function (e, ui) { alert('top:' + ui.position.top + '\n' + 'left:' + ui.position.left); } }); //对话框结束移动时 $('#reg').dialog({ dragStop : function (e, ui) { alert('top:' + ui.position.top + '\n' + 'left:' + ui.position.left); } }); //调整对话框大小时 $('#reg').dialog({ resize : function (e, ui) { alert('size:' + ui.size.width + '\n' + 'originalSize:' + ui.originalSize.width); } }); //开始调整对话框大小时 $('#reg').dialog({ resizeStart : function (e, ui) { alert('size:' + ui.size.width + '\n' + 'originalSize:' + ui.originalSize.width); } }); //结束调整对话框大小时 $('#reg').dialog({ resizeStop : function (e, ui) { alert('size:' + ui.size.width + '\n' + 'originalSize:' + ui.originalSize.width); } });
方法 | 返回值 | 说明 |
dialog('open') | jQuery 对象 | 打开对话框 |
dialog('close') | jQuery 对象 | 关闭对话框 |
dialog('destroy') | jQuery 对象 | 删除对话框,直接阻断了dialog |
dialog('isOpen') | 布尔值 | 判断对话框是否打开状态 |
dialog('widget') | jQuery 对象 | 获取对话框的jQuery 对象 |
dialog('option', param) | 一般值 | 获取options 属性的值 |
dialog('option', param, value) | jQuery 对象 | 设置options 属性的值 |
//初始隐藏对话框 $('#reg').dialog({ autoOpen : false }); //打开对话框 $('#reg_a').click(function () { $('#reg').dialog('open'); }); //关闭对话框 $('#reg').click(function () { $('#reg').dialog('close'); }); //判断对话框打开或关闭状态 $(document).click(function () { alert($('#reg').dialog('isOpen')); }); //将指定对话框置前 $(document).click(function () { $('#reg').dialog('moveToTop'); }); //获取某个options 的param 选项的值 var title = $('#reg').dialog('option', 'title'); alert(title); //设置某个options 的param 选项的值 $('#reg').dialog('option', 'title', '注册');
五.dialog 中使用on()
在dialog 的事件中,提供了使用on()方法处理的事件方法。
特效名称 | 说明 |
dialogfocus | 得到焦点时触发 |
dialogopen | 显示时触发 |
dialogbeforeclose | 将要关闭时触发 |
dialogclose | 关闭时触发 |
dialogdrag | 每一次移动时触发 |
dialogdragstart | 开始移动时触发 |
dialogdragstop | 移动结束后触发 |
dialogresize | 每次调整大小时触发 |
dialogresizestart | 开始调整大小时触发 |
dialogresizestop | 结束调整大小时触发 |
$('#reg').on('dialogclose', function () { alert('关闭'); });