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窗体带回调函数的例子:

 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");
                });
          });
       }
       






  • 9
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 26
    评论
评论 26
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李秀才

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值