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(二)的更多相关文章

  1. 第一百七十八节，jQuery-UI，知问前端--对话框 UI

    jQuery-UI,知问前端--对话框 UI 学习要点: 1.开启多个 dialog 2.修改 dialog 样式 3.dialog()方法的属性 4.dialog()方法的事件 5.dialog 中 ...

  2. 知问前端——日历UI(二)

    datapicker外观选项 属性 默认值/类型 说明 disabled false/布尔值 禁用日历 numberOfMonths 1/数值 日历中同时显示的月份个数.默认为1,如果设置3就同时显示 ...

  3. 知问前端——对话框UI(一)

    对话框(dialog),是jQuery UI非常重要的一个功能.它彻底的代替了JavaScript的alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余. 开启多个dialog 我们 ...

  4. 第一百八十二节，jQuery-UI，知问前端--日历 UI

    jQuery-UI,知问前端--日历 UI 学习要点: 1.调用 datepicker()方法 2.修改 datepicker()样式 3.datepicker()方法的属性 4.datepicker ...

  5. 知问前端——日历UI(一)

    日历(datepicker)UI,可以让用户更加直观的.更加方便的输入日期,并且还考虑不同国家的语言限制,包括汉语. 调用datepicker()方法 $('#date').datepicker(); ...

  6. 知问前端——日历UI(三)

    datepicker日期选择选项 属性 默认值/类型 说明 minDate 无/对象.字符串或数值 日历中可以选择的最小日期 maxDate 无/对象.字符串或数值 日历中可以选择的最大日期 defa ...

  7. 知问前端——工具提示UI

    工具提示(tooltip),是一个非常实用的UI.它彻底扩展了HTML中的title属性,让提示更加丰富,更加可控制,全面提升了用户体验. 调用tooltip()方法 在调用tooltip()方法之前 ...

  8. 知问前端——按钮UI

    按钮(button),可以给生硬的原生按钮或者文本提供更多丰富多彩的外观.它不单单可以设置按钮或文本,还可以设置单选按钮和多选按钮. 使用button按钮 使用button按钮UI的时候,不一定必须是 ...

  9. 第一百七十九节，jQuery-UI，知问前端--按钮 UI-图标

    jQuery-UI,知问前端--按钮 UI 学习要点: 1.使用 button 按钮 2.修改 button 样式 3.button()方法的属性 4.button('action', param) ...

随机推荐

  1. paramiko基本操作

    paramiko 是一个用作远程控制的模块,它遵循SSH2协议,支持以加密和认证的方式来进行远程服务器的连接.操作.上传和下载. 官方文档地址:http://docs.paramiko.org/ pa ...

  2. decltype和新的返回值语法

    新的返回值语法 让我们讲一下新的返回值语法,这个语法还能看到auto的另一个用处.在以前版本的C和C++中,返回值的类型必须写在函数的前面: int multiply(int x, int y) 在C ...

  3. 笔记-docker-2安装(centos6.5环境)

    笔记-docker-2安装(centos6.5环境) 1.      centos6.5安装docker 1.1.    升级内核 安装docker,官方文档要求linux kernel至少3.8以上 ...

  4. 模块hashlib和logging

    Python的hashlib提供了常见的摘要算法MD5. 我们以常见的摘要算法MD5为例,计算出一个字符串的MD5值: import hashlib md5=hashlib.md5() md5.upd ...

  5. html+css调用服务器端字体

    在浏览网页时,由于客户端没有安装某些特殊字体,导致网页文字无法按设计正常显示,这时我们可以使用服务器字体来避免这种现象的发送 语法 @font-face { /* 自定义字体名称 */ font-fa ...

  6. P1021 邮票面值设计

    P1021 邮票面值设计 题目描述 给定一个信封,最多只允许粘贴N张邮票,计算在给定K(N+K≤15)种邮票的情况下(假定所有的邮票数量都足够),如何设计邮票的面值,能得到最大值MAX,使在1-MAX ...

  7. 抽象类的作用之一：sdk 传递你需要的参数

    抽象类可以干什么?抽象类可以让别人必须做一件事情,比如实现一个方法. 那它有什么作用呢? 我开始也不知道啊,后来慢慢的知道了,在开发中,我知道了它是干什么的,怎么用的.比如你要写一个sdk给别人用.但 ...

  8. Python基础——安装运行

    Python是如何运行的? 像绝大多数编程语言一样,要在计算机上能够运行python程序,至少需要安装一个最小的Python包:一个Python解释器和支持的库. 安装Python 安装包下载:htt ...

  9. 剑指Offer - 九度1521 - 二叉树的镜像

    剑指Offer - 九度1521 - 二叉树的镜像2013-11-30 23:32 题目描述: 输入一个二叉树,输出其镜像. 输入: 输入可能包含多个测试样例,输入以EOF结束.对于每个测试案例,输入 ...

  10. 《Cracking the Coding Interview》——第12章：测试——题目3

    2014-04-24 23:28 题目:玩象棋游戏,你要设计一个bool型的方法来检测一个棋子能否移动到指定位置. 解法:不同的棋子有不同的移动规则,那么应该采取棋子基类实现接口,各个棋子子类来实现的 ...