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元素。下面给一个例子

          

           showCancelButton:是否显示取消按钮;

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

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

           showConfirmButton:是否显示确定按钮;

           confirmButtonText:定义确定按钮文本;

           cancelButtonText:定义取消按钮文本;

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

           回调函数:done()和error.

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

    [javascript] view plain copy
     
    1. function deleteArticle(id){  
    2.        var serverAddress=serverAddressPath+'/api/arc/delete.shtml';  
    3.        swal({  
    4.           title:"",  
    5.           text:"确定删除吗?",  
    6.           type:"warning",  
    7.           showCancelButton:"true",  
    8.           showConfirmButton:"true",  
    9.           confirmButtonText:"确定",  
    10.           cancelButtonText:"取消",  
    11.           animation:"slide-from-top"  
    12.         }, function() {  
    13.                var ids=new Array();  
    14.         ids.push(id+"");  
    15.         $.ajax({  
    16.             type:"post",  
    17.             url:serverAddress,  
    18.             traditional: true,  
    19.             dataType:"json",  
    20.             data:{"id":ids}  
    21.         }).done(function(data) {  
    22.                   swal("操作成功!", "已成功删除数据!", "success");  
    23.                   getMyArtic();  
    24.                }).error(function(data) {  
    25.                   swal("OMG", "删除操作失败了!", "error");  
    26.                });  
    27.          });  
    28.       }  
            

  • 相关阅读:
    博客园装修行动—我设计的新首页
    按作者名称查看评论
    [新功能]通过RSS阅读收藏夹
    [公告]首页小调整
    时间的格式化
    [公告]将读书心得区改成技术书评区
    [汇报]昨天晚上博客园的程序又出现了问题
    [公告]博客园已经成功迁移至新服务器
    [好消息]博客园乔迁新居
    [公告]博客园程序升级
  • 原文地址:https://www.cnblogs.com/telwanggs/p/7101691.html
Copyright © 2011-2022 走看看