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. Linux中的代码编辑器vim

    Vim的三种工作模式 命令行模式 插入模式 底行模式 Vim 的命令行模式 命令行模式是进入vim后的初始模式,在该模式下主要是使用方向键来移动光标的位置,并通过相应的命令来进行文字的编辑. 切换方法 ...

  2. php-5.6.26源代码 - 如何用C语言支持“类似异常”机制

    代码编写在文件php-\Zend\zend.h #define zend_bailout() _zend_bailout(__FILE__, __LINE__) #ifdef HAVE_SIGSETJ ...

  3. busybox编译 fatal error: curses.h: 没有那个文件或目录解决办法

    执行make menuconfig时出现如下错误@ubuntu:/home/dev/busybox-1.19.3# make menuconfig HOSTCC scripts/kconfig/lxd ...

  4. Social Media Addiction【社交媒体上瘾】

    Social Media Addiction Children as young as ten are becoming dependent on social media for their sen ...

  5. 第一章 UNIX 基础知识

    1.1 Unix体系结构 OS定义为一种软件,它控制计算机硬件资源,提供程序运行环境,一般称其为内核(kernel),它体积小,位于环境中心. 内核的接口为系统调用(system call),共用函数 ...

  6. 笔记-python -asynio

    笔记-python -asynio 1.      简介 asyncio是做什么的? asyncio is a library to write concurrent code using the a ...

  7. selenium+PhantomJS 抓取淘宝搜索商品

    最近项目有些需求,抓取淘宝的搜索商品,抓取的品类还多.直接用selenium+PhantomJS 抓取淘宝搜索商品,快速完成. #-*- coding:utf-8 -*-__author__ =''i ...

  8. 3，MongoDB之数据类型

    一.MongoDB 之数据类型 首先我们要先了解一下MongoDB中有什么样的数据类型: Object  ID :Documents 自生成的 _id String: 字符串,必须是utf-8 Boo ...

  9. windows上php环境下memcache和mongodb的安装

    mangodb安装 1. 下载mongodb的安装文件,我安装的windows 64位的,下载地址如下: https://fastdl.mongodb.org/win32/mongodb-win32- ...

  10. 去除文件夹中的.svn

    一.在Dos窗口中运行如下命令 for/r <你项目的路径> %i in (.svn) do rd /s /q %i 二.将“Delete SVN Folders”操作添加到右击菜单中 建 ...