easy

DocsVersion : 0.1.0

Dialog 对话框组件

Define in : dialog.js

该组件用于创建一个 Dialog 对话框,对话框里可以包含任何你想添加的内容。对话框的 HTML 结构是组件自动构建的,只需传递一个简单的文本就可以创建一个对话框,当然,你也可以传递自定义的 HTML 结构。对话框默认的样式是 windows 8 的简洁风格,你也可以很方便的自定义对话框的样式。

Dialog( target, [ options ] )

依赖
JS : 依赖 Drag 组件
CSS : 依赖样式
HTML : 组件自动构建
参数
  • target
    String|
    Element|
    easyJS Object
    必需

    target 可以是选择器字符串、DOM 元素,也可以是 easyJS Object,仅匹配第一个元素,该元素用于触发事件来显示对话框。

  • options
    Object
    可选

    多选形式的可配置参数。

下表列出多选可配置形式的参数的详细说明。

参数 数据类型 默认值 说明
autoClose Number null

自动关闭对话框的时间。

content String|html String Hello world : )

对话框的内容,可以是 HTML 字符串。

drag Boolen true

是否允许拖拽对话框。

dragHandle String|Element|easyJS Object null

自定义对话框的拖拽区域。

effects String null

动画效果的名称。

fade 淡入淡出效果。

slide 由顶部向中间快速滑动的效果。

zoom 缩放效果。

elem String|Element|easyJS Object null

自定义对话框的HTML结构。

fixed Boolean true

是否固定定位,为 false 时则相对 body 进行绝对定位。

height String auto

对话框的高度,需带单位。

left String null

设置对话框的 x 轴定位值,需带单位,默认为水平居中。

lock Boolean false

是否锁定对话框,锁定对话框时没有关闭按钮,也不能使用 ESC 键来关闭。

noFn Function null

取消按钮的回调函数,该回调函数的 this 指向对话框元素,如果该函数返回 false,将不会关闭对话框。未设置该参数将不显示取消按钮。同时关闭按钮也会调用该回调函数。

noText String 取消

取消按钮的文本内容。

overlay Boolean true

是否显示遮罩层。

title String null

对话框的标题,未设置该参数将不显示对话框的标题栏。

top String null

设置对话框的 Y 轴定位值,需带单位,默认为垂直居中。

topWindow Boolean false

如果对话框定义在一个 iframe 中,是否允许其在顶级 window 中显示,如果需要在顶级窗口中显示,需要确保顶级窗口中有对话框的样式。

trigger String click

触发显示对话框的事件,支持自定义事件。

width String 320px

对话框的宽度,需带单位。

yesFn Function null

确定按钮的回调函数,该回调函数的 this 指向对话框元素,如果该函数返回 false,将不会关闭对话框。未设置该参数将不显示确定按钮。

yesText String 确定

确定按钮的文本内容。

zIndex Number 9999

对话框的定位层级。

方法
  • close

    关闭对话框实例,返回实例便于链式调用。

  • destroy

    销毁对话框实例。

  • on

    对对话框实例绑定事件,该方法接受2个参数,第一个参数是事件类型,第二个参数是事件处理器,返回实例便于链式调用。

  • un

    卸载对话框实例的事件。该方法接受1个事件类型的参数。返回实例便于链式调用。

下表列出了支持的事件类型。

事件类型 说明 事件对象
open

对话框显示时触发的事件。

event.target 对话框元素。

close

对话框关闭时触发的事件。

event.target 对话框元素。

在使用 Dialog 组件前,对其进行加载。

E.use( 'dialog', function(){
    // 在回调中实例化对话框
});

Dialog 组件需要依赖样式。

.eui_overlay{ background:#333; opacity:0.6; filter:alpha(opacity=60); }
.eui_dialog .dg_wrapper{ background:#3498f0; box-shadow:0 0 4px rgba(0, 0, 0, 0.4); position:relative; padding:5px; border:1px solid #3571a4; }
.eui_dialog .dg_header{ height:27px; line-height:22px; overflow:hidden; color:#fff; font-weight:700; text-indent:5px; }
.eui_dialog .dg_btn_close{ width:18px; height:18px; line-height:18px; overflow:hidden; float:right; font-size:22px; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; color:#fff; text-decoration:none; text-align:center; font-weight:400; position:absolute; top:6px; right:6px; background:#3498f0; }
.eui_dialog .dg_btn_close:hover{ background:#c75050; color:#fff; }
.eui_dialog .dg_content{ padding:25px 10px; line-height:22px; border:1px solid #3c79ad; background:#fff; }
.eui_dialog .dg_footer{ width:300; padding:10px; padding-top:0; overflow:hidden; _zoom:1; border:1px solid #3c79ad; border-top:0 none; margin-top:-1px; background:#fff; }
.eui_dialog .dg_btn_no,
.eui_dialog .dg_btn_yes{ padding:0 18px; *padding:0 9px; height:20px; line-height:20px; background:#eaeaea; cursor:pointer; float:right; margin-left:10px; font-family:"Microsoft yahei",arial; font-size:12px; outline:none; color:#333; text-decoration:none; border:1px solid #acacac; }
.eui_dialog .dg_btn_yes{ color:#000; border-color:#3399ff; }
.eui_dialog .dg_btn_yes:hover,
.eui_dialog .dg_btn_no:hover{ background:#e0effc; }
例子1

创建一个对话框。

new E.ui.Dialog( '#runDemo1', {
    title : '对话框标题',
    content : '对话框内容',
    yesFn : function(){
        alert( '我是确定按钮,回调函数返回false时不会关闭对话框。' );
        return false;
    },
    noFn : function(){
        alert( '我是取消按钮' );
    }
});

运行

例子2

创建一个对话框,不要遮罩层,传递 HTML 字符串作为内容。

new E.ui.Dialog( '#runDemo2', {
    content : '不设置标题,直接不显示标题栏',
    overlay : false
});

运行

例子3

创建一个对话框,并设置其显示和隐藏的动画效果为淡入淡出。

new E.ui.Dialog( '#runDemo3', {
    title : '对话框的动画效果',
    content : '显示和隐藏对话框的动画效果为淡入淡出。',
    effects : 'fade'
});

运行

例子4

创建一个对话框,并设置其显示和隐藏的动画效果为滑动。

new E.ui.Dialog( '#runDemo4', {
    title : '对话框的动画效果',
    content : '显示和隐藏对话框的动画效果为滑动。',
    effects : 'slide'
});

运行

例子5

创建一个对话框,并设置其显示和隐藏的动画效果为缩放。

new E.ui.Dialog( '#runDemo5', {
    title : '对话框的动画效果',
    content : '显示和隐藏对话框的动画效果为缩放。',
    effects : 'zoom'
});

运行

例子6

创建一个对话框,设置其绝对定位,并设置其在左上角显示。

new E.ui.Dialog( '#runDemo6', {
    title : '对话框的绝对定位',
    content : '设置对话框在左上角显示。',
    top : '100px',
    left : '100px'
});

运行

例子7

自定义对话框的HTML结构。

<div id="testBox" style="width:120px; height:100px; background:#fff; text-align:center; line-height:100px; display:none;">Press Esc close.</div>
new E.ui.Dialog( '#runDemo7', {
    elem : '#testBox',
    dragHandle : '#testBox'
});

运行