知问前端——对话框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	结束调整大小时触发