美文网首页
前端插件flavr的简单使用

前端插件flavr的简单使用

作者: ___大鱼___ | 来源:发表于2018-11-27 10:04 被阅读29次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="./static/css/bootstrap.min.css" />
         <link rel="stylesheet" type="text/css" href="./static/css/style.css" />
         <link rel="stylesheet" type="text/css" href="./static/css/animate.css" />
        <link rel="stylesheet" type="text/css" href="./static/css/flavr.css" />
        <script src="./static/js/jquery.min.js"></script>
        <script src="./static/js/flavr.min.js"></script>
    
    </head>
    <body>
    <div class="demo-block" id="demo-confirm">
                        <div class="demo-title">Confirm Dialog</div>
    
                        <p class="demo-desc">
                            A confirm dialog with two preset buttons
                        </p>
    
                        <div class="demo-actions">
                            <a href="#" class="btn btn-default btn-code">Code</a>
                            <a href="#" class="btn btn-default btn-demo">Demo</a>
                        </div>
    
                        <div class="demo-code">
    
                        </div>
    
                    </div>
    
    </body>
    <script>
    new $.flavr({ content : '确定要打印 <h1 style="color:red">大鱼</h1>吗?',
    
                                dialog : 'confirm',
                                buttons: {
                        danger: {
                            text: '确定',
                            style: 'danger',
                            action: function() {
                                // 调用layer加载框
                               var layer_index = parent.layer.load(2, {
                                      shade: [0.01,'#fff'] //0.1透明度的白色背景
                                    });
                               $.ajax({
                                   url: '{% url '' %}',
                                   type: 'GET',
                                   data:{
                                        BarCode: selectRow.BarCode
                                   },
                                   success: function (e) {
                                        parent.layer.close(layer_index);
                                        console.log(e);
                                       if(e.status == 0){
                                            new $.flavr('打印成功!');
                                       }else{
                                           new $.flavr(e.message);
                                       }
                                   },
                                   error: function () {
                                        parent.layer.close(layer_index);
                                       new $.flavr('请求失败!');
                                   }
                               })
                            }
                        },
                        cancel: {
                            text: '取消',
                            style: 'default'
                        }
                    },
                        onConfirm : function(){
    
                        }
                                });
    
    </script>
    </html>
    

    相关文章

      网友评论

          本文标题:前端插件flavr的简单使用

          本文链接:https://www.haomeiwen.com/subject/hyjmfqtx.html