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. python学习之控制流1

    配置环境:python 3.6 python编辑器:pycharm 代码如下: #!/usr/bin/env python #-*- coding: utf-8 -*- # 控制流: # 1.布尔值: ...

  2. poj 1759 二分搜索

    题意:N个等差数列,初项X_i,末项Y_i,公差Z_i,求出现奇数次的数? 思路: 因为只有一个数出现的次数为奇数个 假设 第二个数字的个数为 奇数个,其余全部都是偶数个 ,累计出现的次数 a1偶数 ...

  3. JVM——参数设置、分析

    原文:http://www.cnblogs.com/redcreen/archive/2011/05/04/2037057.html 不管是YGC还是Full GC,GC过程中都会对导致程序运行中中断 ...

  4. 2，MongoDB之增删改查及pymongo的使用

    本章我们来学习一下关于 MongoDB的增删改查 一.MongoDB操作 之 原生ORM,根本不存在SQL语句 创建数据库:这里和一般的关系型数据库一样,都要先建立一个自己的数据库空间 是的,Mong ...

  5. 4 CSS的20/80个知识点

    1.css的基本构成 样式选择器 id选择器 元素选择器 2.css的盒模型 border padding margin 3.Atom快捷键 4.程序 (1)初始程序 <!DOCTYPE htm ...

  6. 【转】android makefile文件分析

    Makefile的规则如下: target ... : prerequisites ... command ... ... target可以是一个目标文件,也可以是Object File(例如hell ...

  7. 什么时候会报unrecognized selector的异常？

    当调用该对象上某个方法,而该对象上没有实现这个方法的时候, 可以通过“消息转发”进行解决,如果还是不行就会报unrecognized selector异常 objc是动态语言,每个方法在运行时会被动态 ...

  8. 《Cracking the Coding Interview》——第18章：难题——题目6

    2014-04-29 02:27 题目:找出10亿个数中最小的100万个数,假设内存可以装得下. 解法1:内存可以装得下?可以用快速选择算法得到无序的结果.时间复杂度总体是O(n)级别,但是常系数不小 ...

  9. UasyUi的各种方法整理

    UasyUi的各种方法整理: 1.拖动 放置 droppable $('#dd').droppable({ }); 2.创建可变大小的窗口 resizable $('#rr').resizable({ ...

  10. PHP遍历数组的几种方法

      这三种方法中效率最高的是使用foreach语句遍历数组.从PHP4开始就引入了foreach结构,是PHP中专门为遍历数组而设计的语句,推荐大家使用.先分别介绍这几种方法     PHP中遍历数组 ...