知问前端——对话框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("关闭！");
});
注意：还必须点击关闭按钮才能关闭对话框。
知问前端——对话框UI(二)的更多相关文章
- 第一百七十八节，jQuery-UI，知问前端--对话框 UI
jQuery-UI,知问前端--对话框 UI 学习要点: 1.开启多个 dialog 2.修改 dialog 样式 3.dialog()方法的属性 4.dialog()方法的事件 5.dialog 中 ...
- 知问前端——日历UI(二)
datapicker外观选项 属性 默认值/类型 说明 disabled false/布尔值 禁用日历 numberOfMonths 1/数值 日历中同时显示的月份个数.默认为1,如果设置3就同时显示 ...
- 知问前端——对话框UI(一)
对话框(dialog),是jQuery UI非常重要的一个功能.它彻底的代替了JavaScript的alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余. 开启多个dialog 我们 ...
- 第一百八十二节，jQuery-UI，知问前端--日历 UI
jQuery-UI,知问前端--日历 UI 学习要点: 1.调用 datepicker()方法 2.修改 datepicker()样式 3.datepicker()方法的属性 4.datepicker ...
- 知问前端——日历UI(一)
日历(datepicker)UI,可以让用户更加直观的.更加方便的输入日期,并且还考虑不同国家的语言限制,包括汉语. 调用datepicker()方法 $('#date').datepicker(); ...
- 知问前端——日历UI(三)
datepicker日期选择选项 属性 默认值/类型 说明 minDate 无/对象.字符串或数值 日历中可以选择的最小日期 maxDate 无/对象.字符串或数值 日历中可以选择的最大日期 defa ...
- 知问前端——工具提示UI
工具提示(tooltip),是一个非常实用的UI.它彻底扩展了HTML中的title属性,让提示更加丰富,更加可控制,全面提升了用户体验. 调用tooltip()方法 在调用tooltip()方法之前 ...
- 知问前端——按钮UI
按钮(button),可以给生硬的原生按钮或者文本提供更多丰富多彩的外观.它不单单可以设置按钮或文本,还可以设置单选按钮和多选按钮. 使用button按钮 使用button按钮UI的时候,不一定必须是 ...
- 第一百七十九节，jQuery-UI，知问前端--按钮 UI-图标
jQuery-UI,知问前端--按钮 UI 学习要点: 1.使用 button 按钮 2.修改 button 样式 3.button()方法的属性 4.button('action', param) ...
随机推荐
- sql xml扩展字段 查询语句
[cms:sql query="SELECT ContentXML.value('/fields[1]/Address[1]','varchar(max)')AS valueForm FRO ...
- java 二进制、位运算、和移位运算符（2013-07-30-bd 写的日志迁移
二进制是逢2进位的进位制,0.1是基本算符, 1字节=8位 比如 int a =1 ;int 占4个字节在计算机里表示为: java中的4个位运算,分别是“按位与&.按位或|.按位异或^,按位 ...
- Ajax全解析
什么是Ajax Ajax基本概念 Ajax(Asynchronous JavaScript and XML):翻译成中文就是异步的JavaScript和XML. 从功能上来看是一种在无需重新加载整个网 ...
- B1076 Wifi密码 （15分）
B1076 Wifi密码 (15分) 下面是微博上流传的一张照片:"各位亲爱的同学们,鉴于大家有时需要使用 wifi,又怕耽误亲们的学习,现将 wifi 密码设置为下列数学题答案:A-1:B ...
- 用python实现【五猴分桃】问题
转载链接:https://blog.csdn.net/cy309173854/article/details/78296839 据说“五猴分桃”问题最先是由大物理学家狄拉克提出来的,这一貌似简单的问题 ...
- 笔记-selenium+chrome headless
笔记-selenium+chrome headless 1. selenium+chrome headless phantomjs与selenium分手了,建议使用其它无头浏览器. chro ...
- Spark机器学习之推荐引擎
一. 最小二乘法建立模型 关于最小二乘法矩阵分解,我们可以参阅: 一.矩阵分解模型. 用户对物品的打分行为可以表示成一个评分矩阵A(m*n),表示m个用户对n各物品的打分情况.如下图所示: 其中,A( ...
- 13 Django组件-cookie与session
会话跟踪技术 1 什么是会话跟踪技术 我们需要先了解一下什么是会话!可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应.例如你给10086打个电话,你就是客户端,而10 ...
- poj3348 Cows 凸包 叉积求多边形面积
graham扫描法,参考yyb #include <algorithm> #include <iostream> #include <cstdio> #includ ...
- 常见排序算法题（java版）
常见排序算法题(java版) //插入排序: package org.rut.util.algorithm.support; import org.rut.util.algorithm.Sor ...