评论：flavr―超级漂亮的jQuery扁平弹出对话框  [查看原文]

所属分类：UI-弹出层

 145582  1135  95
当前第1页 / 共5页
    似水、逝去de曾经0
    2020/10/15 16:24:05
    呵呵，什么东西？api都不提供？ 回复
    子鱼小窝0
    2019/9/3 15:58:30
    功能比较丰富，优秀
        子鱼小窝0
        2022/7/13 11:49:58
        花了币，居然给的还是压缩版的，浪费感情💔
    回复
    ─━ㄔqunar夏姬ζ0
    2019/4/14 0:33:32
    希望楼主出个简单点的，这个有点复杂看不懂 回复
    那战役0
    2019/4/4 14:22:32
    良心作者！给你个赞 回复
    张~康0
    2019/1/16 9:51:10
    苏生不语0
    2018/9/19 14:36:03
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    /**
     * 封装flavr，方便使用
     */
    var Flavr = function() {
        //动画数组
        var animates = ["tada", "swing", "shake", "rubberBand", "bounce", "pulse"];
        //获取随机动画
        function getAnimate() {
            return animates[Math.floor(Math.random() * animates.length)];
        }
     
        var fr = {
            /**
             * 弹窗信息
             * @param {String} 信息内容 
             */
            alert: function(msg) {
                new $.flavr({
                    buttons: {
                        OK: {
                            text: 'OK',
                            style: 'default',
                            addClass: null,
                            action: null
                        }
                    },
                    animateEntrance: getAnimate(),
                    content: msg
                });
            },
            /**
             * 提示信息
             * @param {String} 信息内容
             */
            msg: function(msg) {
                new $.flavr({
                    modal: false,
                    autoclose: true,
                    timeout: 2000,
                    buttons: {},
                    animateEntrance: getAnimate(),
                    content: msg
                });
            },
            /**
             * 确认信息
             * @param {String} 信息内容
             * @param {Function} 确认回调函数
             * @param {Function} 取消回调函数
             */
            confirm: function(msg, okBack, cancelBack) {
                new $.flavr({
                    dialog: 'confirm',
                    buttons: {
                        OK: {
                            text: '确认',
                            style: 'danger',
                            addClass: null,
                            action: okBack
                        },
                        CANCEL: {
                            text: '取消',
                            addClass: null,
                            action: cancelBack
                        }
                    },
                    animateEntrance: getAnimate(),
                    content: msg
                });
            }
        }
        return fr;
    }
    var flavr = new Flavr();
     
    flavr.alert("Flavr Alert");
    flavr.msg("Flavr Msg");
    flavr.confirm("确定删除吗？", function() {
        flavr.msg("删除成功");
    });
    回复
    望↑圊の???0
    2018/5/17 14:27:32
    看样式还是挺赞的 回复
    肆意0
    2018/1/31 13:25:53
    这个没有官网吗
        whjgz920
        2019/1/7 15:29:26
        应该没有的
    回复
    戒??评论奖励 1 jQ币
    2018/1/29 16:15:31

    把按钮内容变成中文实例，我是参考多个按钮demo改出来的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    new $.flavr({
        content: 'How old are you?',
        dialog: 'prompt',
        prompt: {
            placeholder: 'Enter something'
        },
        buttons: {
            danger: {
                text: '确定',
                style: 'danger',
                action: function() {
                    alert('Mission failed!');
                    return false;
                }
            },
            cancel: {
                text: '取消',
                style: 'default'
            }
        },
    });
    回复
    yuanli0
    2017/11/28 16:22:24
    Confirm和Cancel值怎么改成中文？？
        戒??0
        2018/1/29 16:12:57
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        buttons: {
            danger: {
                text: '确定',
                style: 'danger',
                action: function() {
                    alert('Mission failed!');
                    return false;
                }
            },
            cancel: {
                text: '取消',
                style: 'default'
            }
        }
        戒??0
        2018/1/29 16:13:30

        哈哈，我是参考多个按钮demo代码悟出来的

    回复
    ? 颜颜颜颜颜颜大侠0
    2017/11/7 16:48:39
    jade-like stone?0
    2017/10/12 1:43:05
    龙阳。0
    2017/8/5 13:57:47
    咚！！！0
    2017/7/31 11:10:07
    楼主，我是个前端新手，不太会用这个，照着你说的 做了，但是弹不出来呢！
        咚！！！0
        2017/7/31 11:12:46

          弹出是这样的   

    回复
    73343090
    2017/6/23 14:10:14
    楼主 这个插件怎么把按钮改成中文啊？？ 求教
        p0o9o9p00
        2017/6/28 13:29:09

        这个自己研究下啊，我是在flavr.min.js中改的，都有对应的按钮，可能有的按钮还有其他地方需要改，自己试着改改看

    回复

讨论这个项目（95）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

取消回复