知问前端——对话框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) ...
随机推荐
- Form表单提交，js验证
Form表单提交,js验证 1, Onclick() 2, Onsubmit() Button标签 input (属性 submit button )标签 Input type=button ...
- Hacker Cups and Balls Gym - 101234A 二分+线段树
题目:题目链接 题意:有编号从1到n的n个球和n个杯子. 每一个杯子里有一个球, 进行m次排序操作,每次操作给出l,r. 如果l<r,将[l,r]范围内的球按升序排序, 否则降序排, 问中间位置 ...
- POJ：3685-Matrix
Matrix Time Limit: 6000MS Memory Limit: 65536K Total Submissions: 7879 Accepted: 2374 Description Gi ...
- （洛谷）P2709 小B的询问
题目描述 小B有一个序列,包含N个1~K之间的整数.他一共有M个询问,每个询问给定一个区间[L..R],求Sigma(c(i)^2)的值,其中i的值从1到K,其中c(i)表示数字i在[L..R]中的重 ...
- java.lang.NoSuchMethodError: cn.makangning.test.dao.Users.getUserBirthday()Ljava/sql/Date;
有时候出现这种怪异的问题,是由于多个版本的class存在. 比如说:某个java编译成class后,放到classes下面,然后lib目录下,也有这个class所在的jar包,这样就导致classpa ...
- saltstack特点
目录 saltstack特点 saltstack特点 实时交互 所有的minion机器同时执行命令 no freeloader 每一台salt minion上都装有执行master传来的命令所需要的程 ...
- PHP.13-日历类实现
日历类实现 1.输出星期 calendar.class.php <?php class Calendar{ function out(){//输出表格 echo '<table align ...
- format内置函数
1. 函数功能将一个数值进行格式化显示. 2. 如果参数format_spec未提供,则和调用str(value)效果相同,转换成字符串格式化. >>> format(3.14159 ...
- cocos2d-x 3.0 Node与Node层级结构
节点解释: 节点是场景图的基本元素.场景图的基本元素必须是节点对象或者是节点对象的子类. 其中主要可以看到Layer.MenuItem.Scene.Sprite.TMXTiledMap(解析and渲染 ...
- Java-JNA使用心得2
自5月初第一次尝试使用Java封装调用C的dll之后,已经先后经历了3次小项目了. 上月末是最近的一次项目实际,任务来的急时间又少,还好在加班加点后还是完成了任务,并把第二次没有实现的功能给实现了(C ...