flavr―超级漂亮的jQuery扁平弹出对话框

所属分类:UI-弹出层

 132814  1037  查看评论 (94)
分享到微信朋友圈
X
flavr―超级漂亮的jQuery扁平弹出对话框 ie兼容8

flavr特点

  1. 清洁和现代平面设计

  2. 充分响应

  3. 轻量级的、功能强大的

  4. 基于Bootstrap 开发

  5. CSS3动画在现代浏览器

  6. jQuery提供动力

  7. 跨浏览器支持

调用示例

确认对话框

new $.flavr({
    content     : 'Press a button',
    dialog      : 'confirm',
    onConfirm   : function( $container ){
        alert('You pressed Confirm!');
        return false;
    },
    onCancel    : function( $container ){
        alert('You pressed Cancel');
    }
});

提示对话框

new $.flavr({
    content     : 'Please enter your name',
    dialog      : 'prompt',
    prompt      : { value: 'Harry Potter', addClass: 'prompt-name' },
    onConfirm   : function( $container, $prompt ){
        alert('Howdy ' + $prompt.val() + ' !');
        return false;
    }
});

表单对话框

var html =  
'   <div class="form-row">' +
'       <input type="text" name="username" ' +
'       placeholder="Username" />' +
'   </div>' +
'   <div class="form-row">' +
'       <input type="password" name="password" ' +
'       placeholder="Password" />' +
'   </div>' +
'   <div class="form-row">' +
'       <input type="checkbox" name="remember" ' +
'       id="check"/>' +
'       <label for="check">Remember me</label>' +
'   </div>';
 
new $.flavr({
    title       : 'Form',
    content     : 'Please login to continue',
    dialog      : 'form',
    form        : { content: html, addClass: 'form-html' },
    onSubmit    : function( $container, $form ){
        alert( $form.serialize() );        
        return false;
    }
});

还有其他一些用法在页面源代码中写得很详细,我就不一一列举了!

当时只是看了一下觉得很简单就直接上传了,看了评论说js很多,我疏忽了大家对一些js插件不认识。谢谢大家的提醒现在我补充一下demo中那些是必须的,那些是按自己需要加载的。

<!-- Google字体,根据需要更换国内的在线字体服务或者用系统默认的字体,非必须加载项 -->
    <link rel="stylesheet" type="text/css" href="./index_files/lato.css">
    <!-- DEMO PAGE CSS -->
    <!-- bootstrap框架 -->
    <link rel="stylesheet" type="text/css" href="./index_files/bootstrap.min.css">
    <!-- fontawesome是一个免费的图标字体,根据自己的项目需要加载(现在网页基本上用这用图标字体了,代替图片,加快网页速度,节省流量等一系列优点,不知道的朋友请百度)-->
    <link rel="stylesheet" type="text/css" href="./index_files/fontawesome.css">
    <!-- 下面两个css为demo样式,demo网页背景相关的样式,个人项目中无需引入 -->
    <link rel="stylesheet" type="text/css" href="./index_files/default.css">
    <link rel="stylesheet" type="text/css" href="./index_files/style.css">
    <!-- END DEMO PAGE CSS -->
    <!-- flavr CSS 下面是本插件的核心css文件,必须加载-->
    <!-- animate.css 是github上很受欢迎的css3动画类库,本插件的所有动画都是靠animate.css实现的,如果你不需要弹出层有动画效果的话也可以不用加载 -->
    <link rel="stylesheet" type="text/css" href="./index_files/animate.css">
    <!-- 插件样式,必须加载 -->
    <link rel="stylesheet" type="text/css" href="./index_files/flavr.css">
    <!-- END flavr CSS -->

上面是css的引入问题,下面是js的引入

<!-- jQuery和bootstrap必须加载,这个是弹窗的基本提供 -->
<script type="text/javascript" src="./index_files/jquery.min.js"></script>
<script type="text/javascript" src="./index_files/bootstrap.min.js"></script>
<!-- 下面两个是点击demo按钮时触发的效果,不需要加载 -->
<script type="text/javascript" src="./index_files/jquery.browser.js"></script>
<script type="text/javascript" src="./index_files/livedemo.js"></script>
<!-- 下面插件是代码高亮插件,只是给大家在demo页面上看到更直观的代码而已,实际项目中无需加载 -->
<script type="text/javascript" src="./index_files/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();//初始化代码高亮</script>
<!-- BEGIN flavr SCRIPT -->
<!-- 下面是插件核心代码,必须加载 -->
<script type="text/javascript" src="./index_files/flavr.min.js"></script>

<!-- END flavr SCRIPT -->

页面中最底下的代码解释:

<script type="text/javascript">
    $(document).ready(function(){
        
        $('.livedemo').livedemo(); //demo按钮点击时事件      
        
        $('.footer .socials a').on('mouseenter', function(){
            var animationEnd = 'webkitAnimationEnd oanimationend msAnimationEnd animationend';
            $(this).addClass('swing animated').bind( animationEnd, function(){
                $(this).removeClass('swing animated');
            });            
        });
        
        $('.demo-block .demo-actions .btn-demo').on('click', function(e){            
            e.preventDefault();
        });
        
        /**
         * 下面是每个对话框实例化的方法,例如第一个最简单的对话框(一点点解释吧0.0):
         * $('#demo-alert .demo-actions .btn-demo').on('click', function(){            
                new $.flavr('Hello World!');        
            });


            $('#demo-alert .demo-actions .btn-demo') jQuery获取一个class名为.btn-demo的按钮,前面两个实际是缩小范围获取这个按钮
            真正实例化flavr是这段代码:new $.flavr('Hello World!');(你可以建立一个测试页面把hello word 改为其他的字符,这样你能更直观理解这个插件)

            下面的代码分别对应了每个实例的弹出框的方法,大家可以对应着写

            之前是我疏忽了大家可能看不懂的原因,现在我大致写了一些,如果大家对jQuery、bootstrap、 animate.css不知道的请百度吧0.0
            

         */
        /*  -------------------------------------------------------------------------------
                Simple Alert
            ------------------------------------------------------------------------------- */  
            $('#demo-alert .demo-actions .btn-demo').on('click', function(){            
                new $.flavr('Hello World!');        
            });

        .........
</script>

好了,大家需要知道的引入js、css问题已经跟大家做了一个详细的注释,希望对大家有帮助。对于兼容性问题,这个我就不做解释了,后续我会看大家评论关注什么,我会尽量解释,对之前造成困扰的童鞋非常sorry~

相关插件-弹出层

jQuery弹框、弹出层插件method.js

jq弹框 弹框标题、内容、宽高、取消确认按钮、关闭按钮、动效类型均可以参数的形式设置
  弹出层
 42811  325

jQuery图像展示插件Strip

Strip是Lightbox的一种,它只能部分覆盖页面。这样就不会占用大的屏幕面积,适用于比较小的移动设备
  弹出层
 26877  325

特别实用、调用简单的弹出层

特别实用、调用简单的弹出层。完全可以用样式控制,可以兼容的不同选择相应的效果
  弹出层
 34157  271

jQuery html5爆裂式登录效果

HTML5爆裂式关闭窗口动画登录模板,关闭窗口撕开动画效果。
  弹出层
 42415  495

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

    似水、逝去de曾经 0
    2020/10/15 16:24:05
    呵呵,什么东西?api都不提供? 回复
    子鱼小窝 0
    2019/9/3 15:58:30
    功能比较丰富,优秀 回复
    ─━ㄔ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
    /**
     * 封装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
    2018/1/29 16:15:31

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

    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'
            }
        },
    });
    回复
    yuanli 0
    2017/11/28 16:22:24
    Confirm和Cancel值怎么改成中文??
        戒??0
        2018/1/29 16:12:57
        buttons: {
            danger: {
                text: '确定',
                style: 'danger',
                action: function() {
                    alert('Mission failed!');
                    return false;
                }
            },
            cancel: {
                text: '取消',
                style: 'default'
            }
        }
        戒??0
        2018/1/29 16:13:30

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

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复