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.       }