zoukankan      html  css  js  c++  java
  • SweetAlert使用

          官方给出的SweetAlert介绍是:SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义,支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。我用过之后觉得确实好用,因此极力推荐此插件。我将它的用法总结如下:

    弹出一个alert的写法:

            其一: swal("恭喜","添加成功","success"); 第一个参数是title,第二个参数是text,第三个参数是提醒类型(success,error,warning,input),三个参数皆非必写项。

    最简便写法:swal("");就弹出一个框,上面有个确定按钮。不可写作:swal();

    其二:

           swal({
                    title:"恭喜",
                    text:"添加成功",
                    type:"success"

            });

    参数还可以写:

           html:是否支持html,默认false,写成true以后,text里就可以写html元素。下面给一个例子

    $(".swal").on("click", function () {
    swal({
    title:"发票详情",
    text:"<div class="container" style="text-align: left"> " +
    " <div class="tips">发票抬头:西安XX科技有限公司</div> " +
    " <hr> " +
    " <div class="address">邮寄地址:陕西西安市文阳科技.....</div> " +
    " <hr> " +
    " <div class="money">消费金额:1212.12</div> " +
    " <hr> " +
    " <div class="username">联系人:张三李四</div> " +
    " <hr> " +
    " <div class="phone">联系人电话:13927751499</div> " +
    " <hr> " +
    "</div>",
    type:"",
    showCancelButton:"true",
    showConfirmButton:"true",
    confirmButtonText:"确定",
    cancelButtonText:"取消",
    animation:"slide-from-top",
    html:"true"
       })
    })

    showCancelButton:是否显示取消按钮;

    animation:提示框弹出时的动画效果,可选(pop、none、slide-from-top、slide-from-bottom);

    timer:设置自动关闭提示框时间(毫秒);

    showConfirmButton:是否显示确定按钮;

    confirmButtonText:定义确定按钮文本;

    cancelButtonText:定义取消按钮文本;

    imageUrl:定义弹出框的图片地址;

    回调函数:done()和error.

    下面给出一个confirm窗体带回调函数的例子

    function deleteArticle(id){
    var serverAddress=serverAddressPath+'/api/arc/delete.shtml';
    swal({
    title:"",
    text:"确定删除吗?",
    type:"warning",
    showCancelButton:"true",
    showConfirmButton:"true",
    confirmButtonText:"确定",
    cancelButtonText:"取消",
    animation:"slide-from-top"
    }, function() {
    var ids=new Array();
    ids.push(id+"");
    $.ajax({
    type:"post",
    url:serverAddress,
    traditional: true,
    dataType:"json",
    data:{"id":ids}
    }).done(function(data) {
    swal("操作成功!", "已成功删除数据!", "success");
    getMyArtic();
    }).error(function(data) {
    swal("OMG", "删除操作失败了!", "error");
    });
    });
    }

  • 相关阅读:
    【转】Java集合框架面试问题集锦
    【转】Hibernate面试问题集锦: 概述
    【转】常见Java面试题 – 第四部分:迭代(iteration)和递归(recursion)
    【转】常见Java面试题 – 第三部分:重载(overloading)与重写(overriding)
    【转】常见Java面试题 – 第二部分:equals与==
    【转】常见Java面试题 – 第一部分:非可变性(Immutability)和对象引用(Object reference)
    【转】你应该关注的几个Eclipse超酷插件
    【转】Eclipse插件收藏列表
    【转】最受欢迎的8位Java牛人
    【转】改进异常处理的6条建议
  • 原文地址:https://www.cnblogs.com/DeryKong/p/12549295.html
Copyright © 2011-2022 走看看