LuLu UI组件中文文档 » 模态层-弹框

Fork Me

模态层-弹框

一、弹框效果演示和对应代码示意

alert成功提示

new Dialog().alert('操作成功!', {
    type: 'success'
}); 

confirm确认

$('#xxx').click(function() {
    var elBtn = $(this);
    new Dialog().confirm('\
        <h6>您确定要停用所选的成员吗?</h6>\
        <p>成员停用后,可以在停用成员列表中重新启用。</p>'
    , {
        buttons: [{
            events: function(event) {
                elBtn.disabled();
                event.data.dialog.remove();;
            }
        }, {}]
    });
});

普通panel

new Dialog({
    title: '普通文本框',
    content: '我是一段HTML,啦啦啦啦啦',
    buttons: [{
        value: '知道啦!'
    }]
}); 

内部滚动自适应panel(类名特殊处理)

var dialog = new Dialog({
    title: '中间高度自适应的容器',
    content: '<div class="bg-white p20">'+ (function() {
        var html = '';
        for (var i=0; i<100; i++) {
            html = html + '<img src="http://mat1.gtimg.com/www/mb/images/face/'+ i +'.gif" class="db">';
        }
        return html;
    })() +'</div>',
   buttons: [{}]
});
// 拉伸相关CSS见如下
dialog.el.dialog.addClass('ui-dialog-auto');
.ui-dialog-auto {
    width: 600px; max-height: 1000px; /*min-height: 400px;*/
    position: absolute; top: 20px; bottom: 30px; left: 50%;
    margin: auto 0 auto -300px;
}
.ui-dialog-auto .ui-dialog-footer {
    position: absolute;
    left: 0; bottom: 0; right: 0;
}
.ui-dialog-auto .ui-dialog-body {
    position: absolute; left: 0; right: 0;
    top: 50px; bottom: 90px;
    padding: 0 0 0 25px;
    overflow: auto;
}

点击按钮含有请求(html)的panel

new Dialog().ajax({
    url: 'common/cgi/example.php',
    dataType: 'html'
}, {
    title: '请求html代码',
    buttons: [{}]
}); 

点击按钮含有请求(json)的panel

var dialog = new Dialog({
    width: 700
}).ajax({
    url: 'common/cgi/get_text.json'
}, {
    title: '请求JSON代码',
    content: function(json) {
        if (json.ret == 0 && json.data) {
            return (function() {
                var html = '<div class="bg-white">';
                $.each(json.data.item, function(index, obj) {
                    html = html + '<div class="mt15 mb15"><p>'+ obj.text +'</p><p class="f14 gray">'+ obj.create_time +'</p></div>';
                });

                html += '</div>';

                return html;
            })();
        } else {
            dialog.alert('后台出错了,联系管理员!').unloading(0);
        }
    },
   buttons: [{}]
}); 

请求不存在地址

new Dialog().ajax({
    url: 'common/cgi/xxx.json'
});

数据解析错误

 new Dialog().ajax({
    url: 'common/cgi/parse_error.json'
});

后台返回错误信息

var dialog = new Dialog().ajax({
    url: 'common/cgi/get_detail.json'
}, {
    title: '后台出错演示',
    content: function(json) {
        if (json.ret == 1 && json.msg) {
            var msg = '<h6>友情提示</h6><p>' + json.msg + '</p>';
            // 可以new构造一个新的alert弹框
            /*new Dialog({
                onRemove: function() {
                    dialog.remove();
                }
            }).alert(msg);*/
            // 也可以直接使用alert弹框, unloading()值为0,错误提示不需要动画
            dialog.alert(msg).unloading(0);
        }
    },
   buttons: [{}]
}); 

loading弹框,无法关闭,请刷新

new Dialog().loading();

content为页面上DOM元素

下拉:

var domDialog;
$('#domDialog').click(function() {
    if (domDialog) {
        domDialog.show();
    } else {
        domDialog = new Dialog({
            title: 'jQuery包装器对象载入事件测试',
            content: $('#domDialogTarget').show(),
            buttons: [{},{}]
        });
    }
});

iframe内弹框测试

// 母页面代码-全局暴露
window.globalDialog = Dialog;

// iframe页面代码
var text = '';
// 是否在iframe内
if (window.location != window.parent.location && window.parent.globalDialog) {
    Dialog = window.parent.globalDialog;
    text = 'iframe外';
}

$('#alertDialog').click(function() {
    new Dialog({
        onShow: function() {
            console.log(this.el.body.text());
        }
    }).alert(text + '操作成功!', {
        type: 'success'
    });
});

二、语法和API详细说明

  1. 概述

    弹框扩展(alert, confirm, ajax, loading, ...)也集合在了Dialog组件中。弹框和后面半透明的遮罩层属于同一个容器,更方便控制。弹框的水平居中、以及上下约2:3的定位均是CSS完成,兼容IE7+浏览器。支持弹框的上下拉伸实现,需要特异处理。

  2. 基本使用

    基本的弹框使用方法为:

    new Dialog(options);

    也支持jquery风格用法:

    $.dialog(options);

    两种用法返回值都是弹框实例,一模一样,API也是一样的。

    其中options是可选参数,支持的参数包括:

    参数名称 支持类型 默认值 释义
    title String '' 表示弹框的标题。
    content String|Object|Function '' 表示弹框显示的主体内容。可以是字符串,或者是jQuery包装器对象,也可以是返回特定字符串或对象的函数。不同的类别,默认弹框关闭触发的方法不一样,包装器对象hide(), HTML内容remove().
    width* String|Number 'auto' 标题弹框的主体宽度。本组件宽度自动自适应。因此建议还是设置弹框内容的宽度实现需要的效果。
    buttons Array [] 弹框的按钮元素。默认是空数组,表示没有按钮。每个按钮为一个{}对象,含一些可选参数,这里空间狭小,具体释义见表格下面内容。
    onShow* Function $.noop 弹框显示时候的回调。this为当前弹框实例对象.
    onHide* Function $.noop 弹框隐藏时候的回调。this为当前弹框实例对象.
    onRemove* Function $.noop 弹框移除时候的回调。this为当前弹框实例对象.

    备注:后面跟随*的参数,为Dialog()方法独有的可选参数。其他扩展方法,无法重置。

    按钮对象的参数如下:
    {
        type: '',
        value: '',
        events: {}
    }

    其中:

    参数名称 支持类型 默认值 释义
    type String 'primary''' 表示按钮的类型。和Button.css中按钮类名对应。默认值与按钮对象在buttons参数数组中的位置有关。第一个按钮对象,默认值是'primary',也就是蓝色按钮,也就是如果你的弹框只有一个按钮,默认是蓝色。之后的按钮,默认则是白色按钮,如白色的“取消”按钮。
    value String '确定''取消' 表示按钮的文字内容。默认值与按钮对象在buttons参数数组中的位置有关。第一个按钮对象,默认值是'确定', 后面的按钮默认值是'取消'
    events Object|Function {
      click: function() {
        dialog.remove();
      }
    }
    表示按钮绑定的事件。默认自带点击弹框关闭事件。这里的事件对象就是jQuery对包装器绑定事件的jQuery对象,你可以可以添加hover等事件。

    如果只有click事件,可以直接使用Function类型参数,例如:

    events: function(event) {
      event.data.dialog.remove();
    }

    因此:

    1. 如果你的弹框默认就是一个文字为“确定”的确认按钮,则buttons参数内容就是:

    {
        buttons: [{}]
    }

    2. 如果你的弹框默认就是一个蓝色确认按钮,但是文字内容是“我知道了”,则buttons参数内容就是:

    {
        buttons: [{
            value: '我知道了'
        }]
    }

    3. 如果你的弹框默认就是一个文字为“确定”的确认按钮,但是是红色的警示按钮,则buttons参数内容就是:

    {
        buttons: [{
            type: 'warning'
        }]
    }

    4. 如果你的弹框默认就有一个蓝色“确定”按钮,和一个白色“取消”按钮,则buttons参数内容就是:

    {
        buttons: [{}, {}]
    }

    我们只需要空对象占位就好了。你也可以使用null占位。

  3. 弹框扩展之alert弹框

    模拟浏览器window.alert()弹框。用法如下:

    new Dialog(options).alert(message, alertOptions);

    其中,参数options就是「基本使用」展示的参数。不过,还是有些不一样的,这里,能够生效的参数,只有后面跟着红色星号*width, onShow, onHide, onRemove这4个参数。剩余的其他参数,会被messagealertOptions参数重置。

    其中,message表示提示的文字,是必须参数;alertOptions支持参数如下:

    参数名称 支持类型 默认值 释义
    title String '' alert弹框默认无标题文字,本项目,此参数不需要关心。
    type String 'remind' alert弹框的类型, 参数包括'remind', 'success', 'warning', 或者任意自定义'custom'。对应效果图缩略图如下(此截图有问题,按钮颜色实际与图标颜色是一一对应的):

    buttons Array [{}] 表示按钮。默认为1个蓝色“确定”按钮。

    一般而言,我们用不到可选参数,实际使用类似这样:

    new Dialog().alert('弹弹弹,弹走鱼尾纹……');
  4. 弹框扩展之confirm弹框

    模拟浏览器window.confirm()弹框。用法如下:

    new Dialog(options).confirm(message, confirmOptions);

    其中,参数options就是「基本使用」展示的参数。不过,还是有些不一样的,这里,能够生效的参数,只有后面跟着红色星号*width, onShow, onHide, onRemove这4个参数。剩余的其他参数,会被messageconfirmOptions参数重置。

    其中,message表示提示的文字,是必须参数;confirmOptions支持参数如下:

    参数名称 支持类型 默认值 释义
    title String '' alert弹框默认无标题文字,本项目,此参数不需要关心。
    type String 'warning' confirm弹框的类型, 参数包括'remind', 'success', 'warning', 或者任意自定义'custom'。等同alert弹框,差别在于图标。
    buttons Array [{ type: 'warning' }] 表示按钮。默认为1个红色警示“确定”按钮。

    一般而言,我们需要对第一个警示按钮写事件,也就是确认删除之后干嘛干嘛,如:

    new Dialog().confirm('确定弹弹弹,弹走鱼尾纹?', {
        buttons: [{
            events: {
                click: function() {
                    /*
                     * 这里回调,巴拉巴拉小魔仙……
                     * ......
                    */
                    dialog.remove();  // dialog为弹框实例对象
                }
            }
        }, {}]
    });
  5. 弹框扩展之ajax弹框

    含有异步动态请求的弹框。有些弹框,我们需要点击一个按钮,先去拉取数据,然后再模板解析再呈现,这个时候就需要使用ajax弹框。

    语法如下:

    new Dialog(options).ajax(ajaxData, ajaxOptions);

    其中,options跟上面alert, confirm方法的options参数一样,不赘述。

    ajaxData为Ajax请求的一些参数,和jQuery的$.ajax()方法的参数几乎一模一样,不同的是:一是本弹框ajax方法的默认返回类型dataType'json',二是内置了error错误回调方法,功能是弹框提示‘网络错误’, 见上面的404示例。其中url是必须参数。其他根据自己的实际需要自定义。

    ajaxOptions为ajax弹框相关的参数,具体如下表:

    参数名称 支持类型 默认值 释义
    title String '' alert弹框的标题文字。
    content Function function() {
      /* 根据Ajax返回内容处理成弹框需要的HTML代码 */
    }
    默认Ajax请求类型是'json', 显然,JSON数据我们不能直接在弹框中呈现,或使用模板技术返回我们需要的HTML代码,或直接使用JS拼接;总而言之,此方法必须返回字符串。如果ajax类型是'html', 此参数可以忽略,会自动返回。
    buttons Array [] 表示按钮。默认没有任何按钮。
  6. 弹框扩展之open方法

    作用是替换当前弹框实例为新的弹框内容,包括,标题、主体内容以及按钮。我们每次使用new Dialog()构造的时候,都是一个全新的弹框。有时候,我们希望直接当前弹框内容替换,例如,从loading弹框到普通弹框(可以有更好的动画呈现体验),就可以使用此方法。

    语法如下:

    new Dialog(options).open(html, openOptions);

    options参数同上。需要注意的是,如果这里的API使用的是有红色星号标注的,则弹框替换的时候,这些API是公用的。

    html为必须参数,你可以理解为options中的content参数。

    openOptions为新弹框的一些参数,包括:

    参数名称 支持类型 默认值 释义
    title String '' alert弹框的标题文字。
    buttons Array [] 表示按钮。默认没有任何按钮。
  7. 弹框扩展之loading弹框

    语法如下:

    new Dialog(options).loading();

    我们可以设定弹框的宽度以及各个回调。loading模式下,标题、关闭按钮、底部按钮都不可见,只有菊花转转转。此方法使用了Loading组件。

  8. 弹框其他方法

    ①. unloading()方法

    语法如下:

    dialog.unloading(time);    // dialog为弹框实例对象

    此方法用在loading完毕,HTML更新之后,主要作用是使标题、关闭按钮、底部按钮呈现。

    其中有一个可选参数time, 默认会触发内容高度和透明度的动画呈现效果。当time值设为0的时候,弹框单纯呈现,没有动态效果。此方法使用了Loading组件。

    本组件ajax弹框内部使用了此方法。机制如下:如果Ajax请求的时间小于100毫秒(用户无感知),则直接呈现;如果Ajax请求时间较长,则弹框已舒缓的动画效果呈现。

    ②. show()方法

    语法如下:

    dialog.show();  // dialog为弹框实例对象

    弹框显示,会触发onShow回调方法。

    ③. hide()方法

    语法如下:

    dialog.hide();  // dialog为弹框实例对象

    弹框显示,会触发onHide回调方法。

    ④. remove()方法

    语法如下:

    dialog.remove();  // dialog为弹框实例对象

    弹框显示,会触发onRemove回调方法。本组件弹框的关闭都是调用的这里的remove()方法。

  9. 弹框实例对象

    我们每次new一下Dialog都会返回一个弹框实例对象,例如:

    var dialog = new Dialog()
    也可以使用$.dialog jQuery风格语法:
    var dialog = $.dialog();

    此实例对象,包含上面出现的各个方法(alert, confirm, ajax, ...)

    我们可以很开心地调用:

    dialog.alert('xxx');

    同时,该实例对象好暴露了其他一些参数,方便我们的使用,完整如下:

    {
        el: {
          container: $(),    // 含半透明遮罩的容器
          dialog: $(),       // 弹框主体元素
          title: $(),        // 弹框标题元素
          close: $(),        // 弹框关闭按钮
          body: $(),         // 弹框主内容元素
          footer: $(),       // 弹框底部元素
          button0: $(),      // 弹框按钮1(如果有)
          button1: $()       // 弹框按钮2(如果有)
        },
        width: 'auto',       // 弹框的宽度,默认是'auto', 也可能是数值,看设置
        callback: {          // 3个回调方法
          show: $.noop,
          hide: $.noop,
          remove: $.noop
        }
    }

三、作为弹框插件单独使用

如果是基本弹框功能,直接引用下面CSS和JS即可:

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Button.css">
<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Dialog.css">
<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Dialog.js"></script>

如果需要用到ajax加载弹框,则还需要引入loading组件相关资源。完整示意如下:

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Button.css">
<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Loading.css">
<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Dialog.css">
<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Loading.js"></script>
<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Dialog.js"></script>

单独使用Demo演示

Fork Me 返回顶部