知问前端——对话框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) ...
随机推荐
- php面向对象（2）值传递
PHP中值传递方式,2中 值传递:传递的时候,拷贝的是数据本身.默认都是值传递 结果:传递完成,有了2份同样的数据,且2个变量“相互独立”,不会相互影响 引用传递:传递的时候,拷贝的是引用关系(数据的 ...
- linux 共享内存
共享内存是最高效的IPC机制,因为它不涉及进程之间的任何数据传输.这种高效带来的问题是,我们必须用其他手段来同步进程对共享内存的访问,否则会产生竞态条件.所以,共享内存通常和其他进程间通信方式一起使用 ...
- Educational Codeforces Round 37 E. Connected Components?（图论）
E. Connected Components? time limit per test 2 seconds memory limit per test 256 megabytes input sta ...
- sap对字符串的操作
REPLACE 替换字段内容 TRANSLATE 转换大/小写 FIND FIRST OCCURRENCE OF 查找字符串 替换字段内容 REPLACE [FIRST /ALL OCCURRENC ...
- tar命令，vi编辑器
一.将用户信息数据库文件和组信息数据库文件纵向合并为一个文件/1.txt(覆盖): [root@localhost /]# cat /etc/passwd /etc/group > 1.txt ...
- 5-1 练习css 总结
1. 边框 border:3px dotted; border: 2px solid yellow; 背景颜色 background-color: red; 外攘 margin:20px 0 20px ...
- Column 'sort' specified twice错误
我使用的是mybatis框架出现的这个问题,如果你们也出现了这个问题的豪华,我想你们的sql代码一定是复制的吧,额哈哈哈
- 《Cracking the Coding Interview》——第12章：测试——题目1
2014-04-24 23:10 题目:找出下面代码里的错误. 解法:请看下面. 代码: // 12.1 What's wrong with the following code segment? # ...
- python学习笔记二：流程控制
一.if else: #!/usr/bin/python x = int(raw_input('please input:')) if x >= 90: if x >= 95: print ...
- Velocity 语法详解
Velocity是基于Java的模板引擎,它允许页面设计者引用Java中定义的方法.页面设计者和Java开发者能够同时使用MVC的模式开发网站,这样网页设计者能够把精力放在页面的设计上,程序员也可以把 ...