知问前端——对话框UI(二)
dialog()方法的事件
除了属性设置外，dialog()方法也提供了大量的事件，这些事件可以给各种不同状态时的对话框提供回调函数，这些回调函数中的this值等于对话框内容的div对象，不是整个对话框的div。
dialog事件选项
| 事件名 | 说明 |
| 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 | 当结束拖拉对话框时，会调用resizeStop方法。该方法有两个参数(event, ui)。此事件中的ui有四个属性对象： 1.size，得到对话框的大小，有两个子属性：width和height。 2.position，得到对话框的坐标，有两个子属性：top和left。 3.originalSize，得到对话框原始的大小，有两个子属性：width和height。 4.originalPosition，得到对话框原始的坐标，有两个子属性：top和left。 |
jQuery代码：
index.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>知问前端</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript" src="index.js"></script> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" /> <link rel="stylesheet" type="text/css" href="jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header"> <div class="header_main"> <h1>知问</h1> <div class="header_search"> <input type="text" name="search" class="search" /> </div> <div class="header_button"> <input type="button" value="查询" id="search_button" /> </div> <div class="header_member"> <a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a> </div> </div> </div> <div id="reg" title="会员注册"> 表单区--会员注册 </div> <div id="login" title="会员登录"> 表单区--会员登录 </div> </body> </html>
focus——当对话框获得焦点后，【当对话框被激活时（首次显示以及每次在上面点击）会调用focus方法】：
$("#reg").dialog({
focus:function(e,ui) {
alert("注册！");
}
});
$("#login").dialog({
focus:function(e,ui) {
alert("登录！");
}
});
当点击会员注册对话框，会调用其对应的focus()；当点击会员登录对话框，会调用其对应的focus()。
create——当创建对话框时：
$('#reg').dialog({
create : function(e, ui) {
alert('创建对话框');
}
});
open——①当首次显示对话框时：
$('#reg').dialog({
open:function() {
alert("首次打开对话时触发！");
}
});
②当调用dialog('open')方法显示对话框时：
$('#reg').dialog({
autoOpen:false,
open:function() {
alert("调用dialog('open')方法打开对话时触发！");
}
});
$("#reg_a").click(function() {
$("#reg").dialog("open");
});
close——①当单击关闭按钮关闭对话框时：
$('#reg').dialog({
close:function() {
alert("单击关闭按钮关闭对话框！");
}
});
②调用dialog('close')方法关闭对话框时：
$('#reg').dialog({
autoOpen:false,
close:function() {
alert("调用dialog('close')方法关闭对话框！");
}
});
//点击div(id="reg")元素关闭
$("#reg").click(function() {
$("#reg").dialog("close");
});
beforeClose——同close，只是对话框将要关闭时(我觉得应该是在关闭之前)（当单击关闭按钮或调用dialog('close')方法），会调用beforeClose方法。如：
$('#reg').dialog({
beforeClose:function() {
alert("对话框将要关闭，关闭前做的事！");
}
});
如果该函数返回false，对话框将不会被关闭：
$('#reg').dialog({
//这个事件可以做一些关闭确认的工作
beforeClose:function() {
alert("对话框将要关闭，关闭前做的事！");
return false;
}
});
drag——当对话框移动时，每次移动一点均会调用drag方法，每次移动一点这让人很烦！
$('#reg').dialog({
drag:function() {
alert("每次移动都执行！");
}
});
此事件中的ui有两个属性对象，我们只测试position属性对象：position，得到当前移动的坐标，有两个子属性：top和left。
$('#reg').dialog({
drag:function(e,ui) {
alert("top:" + ui.position.top + "\n"
+"left:" + ui.position.left);
}
});
dragStart——当开始移动对话框时，会调用dragStart方法，同上。
$('#reg').dialog({
dragStart:function(e,ui) {
alert("top:" + ui.position.top + "\n"
+"left:" + ui.position.left);
}
});
dragStop——当结束移动对话框时，会调用dragStop方法，同上。
$('#reg').dialog({
dragStop:function(e,ui) {
alert("top:" + ui.position.top + "\n"
+"left:" + ui.position.left);
}
});
resize——当对话框拉升大小的时候，每一次拖拉都会调用resize方法，同样，这一点也让人很烦！
$('#reg').dialog({
resize:function() {
alert("每次调整大小都执行！");
}
});
此事件中的ui有四个属性对象，我们只测试size属性对象：size，得到对话框的大小，有两个子属性：width和height。
$('#reg').dialog({
resize:function(e,ui) {
alert("width:" + ui.size.width + "\n" +
"height:" + ui.size.height);
}
});
resizeStart——当开始拖拉对话框时，会调用 resizeStart方法，同上。
$('#reg').dialog({
resizeStart:function(e,ui) {
alert("width:" + ui.size.width + "\n" +
"height:" + ui.size.height);
}
});
resizeStop——当结束拖拉对话框时，会调用resizeStop方法，同上。
$('#reg').dialog({
resizeStop:function(e,ui) {
alert("width:" + ui.size.width + "\n" +
"height:" + ui.size.height);
}
});
dialog('action',param)方法
| 方法 | 返回值 | 说明 |
| 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属性的值 |
注意：dialog('close')和dialog('destroy')的区别，dialog('close')是将对话框隐藏起来，即display: none；而dialog('destroy')是将对话框销毁掉。
初始隐藏对话框：
$('#reg').dialog({
autoOpen : false
});
打开对话框：
$('#reg_a').click(function () {
$('#reg').dialog('open');
});
点击div(id="reg")元素关闭或销毁对话框：
$("#reg").click(function() {
$("#reg").dialog("close"); //dialog('close')是将对话框隐藏起来，即display: none
$("#reg").dialog("destroy"); //dialog('destroy')是将对话框直接销毁掉
});
判断对话框打开或关闭状态：
alert($("#reg").dialog("isOpen")); //若对话框属性autoOpen:false，则返回false，反之，则返回true
现在来讨论dialog('open')和dialog('widget')的返回值！
dialog('open')：
$('#reg').dialog({
autoOpen : false
});
alert($("#reg").dialog("open")); //[object Object]，返回jQuery对象，即对话框内容的div(id="reg")对象
所以可以连缀使用常用方法：
$("#reg").dialog("open").css("font-size", "50px");
dialog('widget')：
$("#reg").dialog("open");
alert($("#reg").dialog("widget")); //返回整个对话框div对象
当然可以连缀使用了。
$("#reg").dialog("widget").css("font-size", "50px");
获取某个options的param选项的值：
alert($("#reg").dialog("option","title"));
alert($("#reg").dialog("option","autoOpen")); //若对话框属性autoOpen:false，则返回false，反之，则返回true，同alert($("#reg").dialog("isOpen"));
设置某个options的param选项的值：
$("#reg").dialog("option","title","我爱李阿昀");
dialog中使用on()
在dialog的事件中，提供了使用on()方法处理的事件方法。
on()方法触发的对话框事件
| 特效名称 | 说明 |
| dialogfocus | 得到焦点时触发 |
| dialogopen | 显示时触发 |
| dialogbeforeclose | 将要关闭时触发 |
| dialogclose | 关闭时触发 |
| dialogdrag | 每一次移动时触发 |
| dialogdragstart | 开始移动时触发 |
| dialogdragstop | 移动结束后触发 |
| dialogresize | 每次调整大小时触发 |
| dialogresizestart | 开始调整大小时触发 |
| dialogresizestop | 结束调整大小时触发 |
on()方法的使用同上，现只讨论dialogclose事件：
$("#reg").on("dialogclose",function() {
alert("关闭！");
});
注意：还必须点击关闭按钮才能关闭对话框。
