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

jQuery-UI，知问前端--对话框 UI

学习要点：

　　1.开启多个 dialog

　　2.修改 dialog 样式

　　3.dialog()方法的属性

　　4.dialog()方法的事件

　　5.dialog 中使用 on()

dialog()方法，将指定区块实现对话框功能

一．开启多个

dialog 我们可以同时打开多个 dialog，只要设置不同的 id 即可实现。

$('#reg').dialog();
$('#login').dialog();

二．修改 dialog 样式

在弹出的 dialog 对话框中，在火狐浏览器中打开 Firebug 或者右击->查看元素。这样，我们可以看看 dialog 的样式，根据样式进行修改。我们为了和网站主题符合，对 dialog 的标题背景进行修改。

//无须修改 ui 里的 CSS，直接用 style.css 替代掉
.ui-widget-header {
　　background:url(../img/ui_header_bg.png);
}

注意：其他修改方案类似。

三．dialog()方法的属性

对话框方法有两种形式：1.dialog(options)，options 是以对象键值对的形式传参，每个键值对表示一个选项；2.dialog('action', param)，action 是操作对话框方法的字符串，param 则是 options 的某个选项。

dialog()方法，接收一个对象，对象以键值对方式，设置对话框的各种参数

dialog 外观选项

title 字符串对话框的标题，可以直接设置在 DOM 元素上

buttons 对象以对象键值对方式，给 dialog 添加按钮。键是按钮的名称，值是用户点击后调用的回调函数

html

<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="javascript:void(0)" id="login_a">登录</a>
        </div>
    </div>
</div>

<div id="reg">
    表单区
</div>

$('#reg_a').click(function () {
        $('#reg').dialog({
            'title': '会员注册',        //title 字符串 对话框的标题，可以直接设置在 DOM 元素上
            'buttons':{
                '提交':function () {    //buttons 对象 以对象键值对方式，给 dialog 添加按钮。键是按钮的名称，值是用户点击后调用的回调函数
                    
                },
                '重置':function () {    //buttons 对象 以对象键值对方式，给 dialog 添加按钮。键是按钮的名称，值是用户点击后调用的回调函数
                    
                }
            }
        });
    });

dialog 页面位置选项

position 字符串，设置一个对话框窗口的坐标位置，

默认为 center。其他设置值为：left top、top right、bottom left、right bottom（四个角）、top、bottom（顶部或底部，宽度居中）、left 或 right（左边或右边，高度居中）、center（默认值）

$('#reg_a').click(function () {
        $('#reg').dialog({
            'title': '会员注册',        //title 字符串 对话框的标题，可以直接设置在 DOM 元素上
            'buttons':{
                '提交':function () {    //buttons 对象 以对象键值对方式，给 dialog 添加按钮。键是按钮的名称，值是用户点击后调用的回调函数
                    
                },
                '重置':function () {    //buttons 对象 以对象键值对方式，给 dialog 添加按钮。键是按钮的名称，值是用户点击后调用的回调函数
                    
                }
            },
            'position':'center'         //position 字符串，设置一个对话框窗口的坐标位置，
        });
    });

dialog 大小选项

width 默认300/数值对话框的宽度。默认为 300，单位是像素。

height 默认auto/数值对话框的高度。默认为 auto，单位是像素。

minWidth 默认150/数值对话框的最小宽度。默认 150，单位是像素。

minHeight 默认150/数值对话框的最小高度。默认 150，单位是像素。

maxWidth 默认auto/数值对话框的最大宽度。默认 auto，单位是像素。

maxHeight 默认auto/数值对话框的最大高度。默认 auto，单位是像素。

$('#reg_a').click(function () {
        $('#reg').dialog({
            'title': '会员注册',        //title 字符串 对话框的标题，可以直接设置在 DOM 元素上
            'buttons':{
                '提交':function () {    //buttons 对象 以对象键值对方式，给 dialog 添加按钮。键是按钮的名称，值是用户点击后调用的回调函数
                    
                },
                '重置':function () {    //buttons 对象 以对象键值对方式，给 dialog 添加按钮。键是按钮的名称，值是用户点击后调用的回调函数
                    
                }
            },
            'position':'center',        //position 字符串，设置一个对话框窗口的坐标位置，
            'width': 400,               //width 默认300/数值 对话框的宽度。默认为 300，单位是像素。
            'height':300                //height 默认auto/数值 对话框的高度。默认为 auto，单位是像素。
        });
    });

dialog 视觉选项

show 默认false/布尔值显示对话框时，默认采用淡入效果。

hide 默认false 布尔值关闭对话框时，默认采用淡出效果。

$('#reg_a').click(function () {
        $('#reg').dialog({
            'title': '会员注册',         //title 字符串 对话框的标题，可以直接设置在 DOM 元素上
            'buttons': {
                '提交': function () {    //buttons 对象 以对象键值对方式，给 dialog 添加按钮。键是按钮的名称，值是用户点击后调用的回调函数

                },
                '重置': function () {    //buttons 对象 以对象键值对方式，给 dialog 添加按钮。键是按钮的名称，值是用户点击后调用的回调函数

                }
            },
            'position': 'center',        //position 字符串，设置一个对话框窗口的坐标位置，
            'width': 400,                //width 默认300/数值 对话框的宽度。默认为 300，单位是像素。
            'height': 300,               //height 默认auto/数值 对话框的高度。默认为 auto，单位是像素。
            'show':true,                 //show 默认false/布尔值 显示对话框时，默认采用淡入效果。
            'hide':true                  //hide 默认false 布尔值 关闭对话框时，默认采用淡出效果。

        });
    });

注意：设置 true 后，默认为淡入淡出，如果想使用别的特效，可以使用以下表格中的字符串参数。

show 和 hide 可选特效

blind 对话框从顶部显示或消失

bounce 对话框断断续续地显示或消失，垂直运动

clip 对话框从中心垂直地显示或消失

slide 对话框从左边显示或消失

drop 对话框从左边显示或消失，有透明度变化

fold 对话框从左上角显示或消失

highlight 对话框显示或消失，伴随着透明度和背景色的变化

puff 对话框从中心开始缩放。显示时“收缩”，消失时“生长”

scale 对话框从中心开始缩放。显示时“生长”，消失时“收缩”

pulsate 对话框以闪烁形式显示或消失

$('#reg_a').click(function () {
        $('#reg').dialog({
            'title': '会员注册',         //title 字符串 对话框的标题，可以直接设置在 DOM 元素上
            'buttons': {
                '提交': function () {    //buttons 对象 以对象键值对方式，给 dialog 添加按钮。键是按钮的名称，值是用户点击后调用的回调函数

                },
                '重置': function () {    //buttons 对象 以对象键值对方式，给 dialog 添加按钮。键是按钮的名称，值是用户点击后调用的回调函数

                }
            },
            'position': 'center',        //position 字符串，设置一个对话框窗口的坐标位置，
            'width': 400,                //width 默认300/数值 对话框的宽度。默认为 300，单位是像素。
            'height': 300,               //height 默认auto/数值 对话框的高度。默认为 auto，单位是像素。
            'show':'puff',               //puff 对话框从中心开始缩放。显示时“收缩”，消失时“生长”
            'hide':'puff'                //puff 对话框从中心开始缩放。显示时“收缩”，消失时“生长”

        });
    });

dialog 行为选项

autoOpen 默认true/布尔值默认为 true，调用 dialog()方法时就会打开对话框；如果为 false，对话框不可见，但对话框已创建，可以通过 dialog('open')才能可见。

draggable 默认true/布尔值默认为 true，可以移动对话框，false 无法移动。

resizable 默认True/布尔值默认为 true，可以调整对话框大小，false 无法调整

modal 默认false/布尔值默认为 false，对话框外可操作，true 对话框会遮罩一层灰纱，无法操作。

closeText 默认英文/字符串设置关闭按钮的 title 文字

$('#reg_a').click(function () {
        $('#reg').dialog({
            'title': '会员注册',         //title 字符串 对话框的标题，可以直接设置在 DOM 元素上
            'buttons': {
                '提交': function () {    //buttons 对象 以对象键值对方式，给 dialog 添加按钮。键是按钮的名称，值是用户点击后调用的回调函数

                },
                '重置': function () {    //buttons 对象 以对象键值对方式，给 dialog 添加按钮。键是按钮的名称，值是用户点击后调用的回调函数

                }
            },
            'position': 'center',        //position 字符串，设置一个对话框窗口的坐标位置，
            'width': 400,                //width 默认300/数值 对话框的宽度。默认为 300，单位是像素。
            'height': 300,               //height 默认auto/数值 对话框的高度。默认为 auto，单位是像素。
            'show':'puff',               //puff 对话框从中心开始缩放。显示时“收缩”，消失时“生长”
            'hide':'puff',               //puff 对话框从中心开始缩放。显示时“收缩”，消失时“生长”
            'draggable': false,          //draggable 默认true/布尔值 默认为 true，可以移动对话框，false 无法移动。
            'resizable': false,          //resizable 默认True/布尔值 默认为 true，可以调整对话框大小，false 无法调整
            'modal':true,                //modal 默认false/布尔值 默认为 false，对话框外可操作，true 对话框会遮罩一层灰纱，无法操作。
            'closeText':'关闭窗口'       //closeText 默认英文/字符串 设置关闭按钮的 title 文字

        });

    });

四．dialog()方法的事件

除了属性设置外，dialog()方法也提供了大量的事件。这些事件可以给各种不同状态时提供回调函数。这些回调函数中的 this 值等于对话框内容的 div 对象，不是整个对话框的 div。

focus()当对话框被激活时（首次显示以及每次在上面点击）会调用 focus 方法，该方法有两个参数(event, ui)。此事件中的 ui 参数为空。

    $('#reg_a').click(function () {
        $('#reg').dialog({
            focus:function (e,ui) {    //得到焦点，执行回调函数
                alert('获取焦点');
            }
        });
    });

create()当对话框被创建时会调用 create 方法，该方法有两个参数(event, ui)。此事件中的 ui 参数为空。

    $('#reg_a').click(function () {
        $('#reg').dialog({
            create:function (e,ui) {    //创建焦点，执行回调函数
                alert('创建焦点');
            }
        });
    });

open()当对话框被显示时（首次显示或调用 dialog('open')方法）会调用 open 方法，该方法有两个参数(event, ui)。此事件中的 ui 参数为空。

    $('#reg_a').click(function () {
        $('#reg').dialog({
            open:function (e,ui) {    //显示，执行回调函数
                alert('显示');
            }
        });
    });

beforeClose()当对话框将要关闭时（当单击关闭按钮或调用dialog('close')方法），会调用 beforeclose 方法。如果该函数返回 false，对话框将不会被关闭,关闭的对话框可以用 dialog('open')重新打开。该方法有两个参数(event, ui)。此事件中的 ui 参数为空。

    $('#reg_a').click(function () {
        $('#reg').dialog({
            beforeClose:function (e,ui) {    //将要关闭，执行回调函数
                alert('将要关闭');
            }
        });
    });

    $('#reg_a').click(function () {
        $('#reg').dialog({
            beforeClose:function (e,ui) {    //将要关闭，执行回调函数
                alert('将要关闭');
                return false;               //返回false，对话框不关闭，只执行回调函数
            }
        });
    });

close()当对话框将要关闭时（当单击关闭按钮或调用dialog('close')方法），会调用 close 方法。关闭的对话框可以用 dialog('open')重新打开。该方法有两个参数(event,ui)。此事件中的 ui 参数为空。

    $('#reg_a').click(function () {
        $('#reg').dialog({
            close:function (e,ui) {    //关闭，执行回调函数
                alert('关闭');
            }
        });
    });

drag()当对话框移动时，每次移动一点均会调用 drag 方法。该方法有两个参数。该方法有两个参数(event, ui)。此事件中的 ui 有两个属性对象：
　　1.position，得到当前移动的坐标，有两个子属性：top 和left。得到对话框与头部和左边的位置
　　2.offset，得到当前移动的坐标，有两个子属性：top 和 left。得到对话框与页面开始头部和左边的位置

    $('#reg_a').click(function () {
        $('#reg').dialog({
            drag:function (e,ui) {                   //每次移动，执行回调函数
                alert('头部：' + ui.position.top);    //得到对话框与头部的位置
                alert('左边：' + ui.position.left);   //得到对话框与左边的位置
            }
        });
    });

    $('#reg_a').click(function () {
        $('#reg').dialog({
            drag:function (e,ui) {                   //每次移动，执行回调函数
                alert('头部：' + ui.offset.top);    //得到对话框与页面开始头部的位置
                alert('左边：' + ui.offset.left);   //得到对话框与页面开始左边的位置
            }
        });
    });

dragStart()当开始移动对话框时，会调用 dragStart 方法。该方法有两个参数(event, ui)。此事件中的 ui 有两个属性对象：
　　1.position，得到当前移动的坐标，有两个子属性：top 和left。得到对话框与头部和左边的位置
　　2.offset，得到当前移动的坐标，有两个子属性：top 和 left。得到对话框与页面开始头部和左边的位置

    $('#reg_a').click(function () {
        $('#reg').dialog({
            dragStart:function (e,ui) {             //开始移动对话框时，执行回调函数
                alert('头部：' + ui.offset.top);    //得到对话框与页面开始头部的位置
                alert('左边：' + ui.offset.left);   //得到对话框与页面开始左边的位置

                alert('头部：' + ui.position.top);    //得到对话框与头部的位置
                alert('左边：' + ui.position.left);   //得到对话框与左边的位置
            }
        });
    });

dragStop()当开始移动对话框时，会调用 dragStop 方法。该方法有两个参数(event, ui)。此事件中的 ui 有两个属性对象：
　　1.position，得到当前移动的坐标，有两个子属性：top 和left。得到对话框与头部和左边的位置
　　2.offset，得到当前移动的坐标，有两个子属性：top 和 left。得到对话框与页面开始头部和左边的位置

    $('#reg_a').click(function () {
        $('#reg').dialog({
            dragStop:function (e,ui) {             //开始移动对话框时，执行回调函数
                alert('头部：' + ui.offset.top);    //得到对话框与页面开始头部的位置
                alert('左边：' + ui.offset.left);   //得到对话框与页面开始左边的位置

                alert('头部：' + ui.position.top);    //得到对话框与头部的位置
                alert('左边：' + ui.position.left);   //得到对话框与左边的位置
            }
        });
    });

resize()当对话框拉升大小的时候，每一次拖拉都会调用 resize方法。该方法有两个参数(event, ui)。此事件中的 ui 有四个属性对象：
　　1.size，得到对话框的大小，有两个子属性：width 和height。
　　2.position，得到对话框的坐标，有两个子属性：top 和 left。
　　3.originalSize，得到对话框原始的大小，有两个子属性：width 和 height。
　　4.originalPosition，得到对话框原始的坐标，有两个子属性：top 和 left。

    $('#reg_a').click(function () {
        $('#reg').dialog({
            resize:function (e,ui) {               //当对话框拉升大小的时候，执行回调函数
                alert('大小：' + ui.size.width + '|' + ui.size.height);    //得到对话框的大小

                alert('头部和左边：' + ui.position.width + '|' + ui.position.height);    //得到对话框与头部和左边的位置

                alert('原始大小：' + ui.originalSize.width + '|' + ui.originalSize.height);    //得到对话框原始大小

                alert('原始大小：' + ui.originalPosition.width + '|' + ui.originalPosition.height);    //得到对话框原始头部和左边的位置
            }
        });
    });

resizeStart()当开始拖拉对话框时，会调用 resizeStart 方法。该方法有两个参数(event, ui)。此事件中的 ui 有四个属性对象：
　　1.size，得到对话框的大小，有两个子属性：width 和height。
　　2.position，得到对话框的坐标，有两个子属性：top 和 left。
　　3.originalSize，得到对话框原始的大小，有两个子属性：width 和 height。
　　4.originalPosition，得到对话框原始的坐标，有两个子属性：top 和 left。

    $('#reg_a').click(function () {
        $('#reg').dialog({
            resizeStart:function (e,ui) {               //当开始拖拉对话框时，执行回调函数
                alert('大小：' + ui.size.width + '|' + ui.size.height);    //得到对话框的大小

                alert('头部和左边：' + ui.position.width + '|' + ui.position.height);    //得到对话框与头部和左边的位置

                alert('原始大小：' + ui.originalSize.width + '|' + ui.originalSize.height);    //得到对话框原始大小

                alert('原始大小：' + ui.originalPosition.width + '|' + ui.originalPosition.height);    //得到对话框原始头部和左边的位置
            }
        });
    });

resizeStop()当结束拖拉对话框时，会调用 resizeStart 方法。该方法有两个参数(event, ui)。此事件中的 ui 有四个属性对象：
　　1.size，得到对话框的大小，有两个子属性：width 和height。
　　2.position，得到对话框的坐标，有两个子属性：top 和 left。
　　3.originalSize，得到对话框原始的大小，有两个子属性：width 和 height。
　　4.originalPosition，得到对话框原始的坐标，有两个子属性：top 和 left。

    $('#reg_a').click(function () {
        $('#reg').dialog({
            resizeStop:function (e,ui) {               //当结束拖拉对话框时，执行回调函数
                alert('大小：' + ui.size.width + '|' + ui.size.height);    //得到对话框的大小

                alert('头部和左边：' + ui.position.width + '|' + ui.position.height);    //得到对话框与头部和左边的位置

                alert('原始大小：' + ui.originalSize.width + '|' + ui.originalSize.height);    //得到对话框原始大小

                alert('原始大小：' + ui.originalPosition.width + '|' + ui.originalPosition.height);    //得到对话框原始头部和左边的位置
            }
        });
    });

dialog('open') jQuery 对象打开对话框

    $('#reg_a').click(function () {
        $('#reg').dialog({
            autoOpen:false   //隐藏对话框
        });
        $('#reg').dialog('open');  //dialog('open') jQuery 对象 打开对话框
    });

dialog('close') jQuery 对象关闭对话框

    $('#reg_a').click(function () {
        $('#reg').dialog({

        });
        $('#reg').dialog('close');  //dialog('close') jQuery 对象 关闭对话框
    });

dialog('destroy') jQuery 对象删除对话框，直接阻断了 dialog。

    $('#reg_a').click(function () {
        $('#reg').dialog({
            'title': '会员注册'
        });
        $('#reg').dialog('destroy');  //dialog('destroy') jQuery 对象 删除对话框，直接阻断了 dialog。
    });

dialog('isOpen') 布尔值判断对话框是否打开状态

    $('#reg_a').click(function () {
        $('#reg').dialog({
            'title': '会员注册'
        });
        alert($('#reg').dialog('isOpen'));  //dialog('isOpen') 布尔值 判断对话框是否打开状态
    });

dialog('widget') jQuery 对象获取对话框的 jQuery 对象

    $('#reg_a').click(function () {
        $('#reg').dialog({
            'title': '会员注册'
        });
        alert($('#reg').dialog('widget'));  //dialog('widget') jQuery 对象 获取对话框的 jQuery 对象
        //也就是返回的对话框整个对象
    });

dialog('option', param) 一般值获取 options 属性的值，也可以获取其他属性值，第二个参数是要获取的属性

    $('#reg_a').click(function () {
        $('#reg').dialog({
            'title': '会员注册'
        });
        alert($('#reg').dialog('option', 'title'));  //dialog('option', param) 一般值 获取 options 属性的值
    });

dialog('option', param, value) jQuery 对象设置 options 属性的值，也可以设置其他属性值，参数2属性，参数3属性值

    $('#reg_a').click(function () {
        $('#reg').dialog({
            'title': '会员注册'
        });
        $('#reg').dialog('option', 'title','表单会员注册');  //dialog('option', param, value) jQuery 对象 设置 options 属性的值，也可以设置其他属性值，参数2属性，参数3属性值
    });

五．dialog 中使用 on()事件

在 dialog 的事件中，提供了使用 on()方法处理的事件方法。

dialogfocus 得到焦点时触发

dialogopen 显示时触发

dialogbeforeclose 将要关闭时触发

dialogclose 关闭时触发

dialogdrag 每一次移动时触发

dialogdragstart 开始移动时触发

dialogdragstop 移动结束后触发

dialogresize 每次调整大小时触发

dialogresizestart 开始调整大小时触发

dialogresizestop 结束调整大小时触发

    $('#reg_a').click(function () {
        $('#reg').dialog({
            'title': '会员注册'
        });
        $('#reg').on('dialogclose', function () {  //dialogclose 关闭时触发
            alert('关闭');
        });
    });

其他同理

posted @ 2017-03-12 13:22 林贵秀阅读(290) 评论(0) 编辑收藏举报

刷新页面返回顶部

林贵秀

开始Python之旅

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

公告