好长时间没有更新文章了，年底工作比较忙，确实是没有时间来写文章。今天忙里偷闲，总结了一款前端提示框的插件——sweetalert——推荐给大家。

Sweetalert安装

Sweetalert官方为我们提供了三种安装方式：

方法一 通过bower安装

$ bower install sweetalert

方法二 通过npm安装

$ npm install sweetalert

这里需要注意的是npm安装的时候不要将sweetalert安装为本项目依赖，要把其安装到全局中

方法三 直接下载css文件和javascript文件

安装完成以后我们需要在项目中引入sweetalert.css和sweetalert.min.js两个文件。这两个文件分别位于dist/css 和 dist/js文件夹中。

引入文件以后，下面我们看一下调用方法(sweetalert为我们提供了两个方法名——sweetalert和swal)

swal({

title: "Success!",

text: "Here's my success message!",

type: "success",

confirmButtonText: "Cool"

});

Sweetalert使用介绍

sweetalert使用方法可以认为有以下两种形式

swal({

title: "Success!",

text: "Here's my success message!",

type: "success"

});

和

swal(“Success!”,”Here’s my success message!”,”success”);

其实以上两种形式展现的样式是相同的。只是当提示信息所需要的功能简单，仅仅只需要提示信息时我们可以使用后者较为简单的形式。当稍微复杂的时候我们就需要使用前者较复杂的形式了。

Sweetalert参数及方法介绍

下面我们就sweetalert为我们提供的参数及参数对应的功能分别做一个简单的介绍。

title 必须参数 默认为null

该参数是对话框的标题。它可以作为json对象的键名也可以作为swal方法的第一个参数

swal(“这是title”)

或者

swal({

title:”这是title”

});

text 默认为null

该参数是对对话框的描述。同title一样，它不仅可以作为json对象的键名也可以作为swal方法的第二个参数

swal(“这是title”,”这是text”);

或者

swal({

title:”这是title”,

text:”这是text”

})

type 默认为null

该参数设定了对话框的消息类型，sweetalert内置了四种类型，分别是”warning”(警告)、”info”(提示)、”success”(成功)和”error”(错误)。除了这四种之外用户还可以将该类型设为”input”使其成为可以交互的对话框。

同title和text一样，该参数可以作为json对象的键名，也可以作为swal方法的第三个参数。

swal(“这是title”,”这是text”,”success”);

或者

swal({

title:”这是title”,

text:”这是text”,

type:”success”

});

confirmButtonText、cancelButtonText、showCancelButton和showConfirmButton

confirmButtonText 默认为”OK”，cancelButtonText默认为”Cancel”。我们可以通过修改这两个参数的值来修改其显示的文本。

showCancelButton默认为false，也就是说默认情况下取消按钮是不显示的，所以说cancelButtonText使用的前提是showCancelButton设为true。

swal({

title:”这是title”,

text:”这是text”,

type:”success”,

showCancelButton:true,

confirmButtonText:”确定”,

cancelButtonText:”取消”

});

showConfirmButton这就很好理解了，其默认为true。也就是说确定按钮是默认显示的，如果不显示的话可以将其设为false。

closeOnConfirm 和 closeOnCancel 。他们表示当点击确认或者取消的时候是否关闭对话框。true关闭，false则不关闭。默认情况下为true，是关闭的。如果我们想将其设为不关闭，可以将其设置为false。但是，只将其设为false是不够的，还需要指定第二个参数的回调函数。

swal({

title:”这是title”,

text:”这是text”,

type:”success”,

showCancelButton:true,

confirmButtonText:”确定”,

cancelButtonText:”取消”,

closeOnConfirm:false,

closeOnCancel:false,

},function(isConfirm){

If(isConfirm){

swal(‘成功’);

}else{

swal(‘取消’);

}

});

html 默认为false。如果设置为true，则会解析title和text中的html标签

swal({

title:"HTML Title！",

text:"自定义html内容！",

html:true

});

timer 默认为null，该参数是用来设定对话框自动关闭的。以ms为单位

swal({

title:"自动关闭提示框！",

text:"设置2秒后自动关闭！",

timer:2000,

showConfirmButton:false

});

inputType、inputPlaceholder和inputValue 这三个前提都是type设为input才有效。

inputType指定输入框类型，默认为text。

swal({

title:"输入框",

text:"在输入框中输入一些信息吧！",

type:'input',

showCancelButton:true,

closeOnConfirm:false,

inputPlaceholder:"输入信息"

},

function(inputValue){

if(inputValue === false) return false;

if(inputValue === ''){

swal.showInputError("内容不能为空，请输入一些信息！")

return false;

}

swal("Good!", "您输入的是: " + inputValue, "success");

});

imageUrl和imageSize ，这两个参数和自定义对话框的图标有关。

imageUrl指定图标的地址。默认为null。

imageSize指定图标的大小，当imageUrl指定了图标地址该参数才有效。默认大小为80x80。该参数指定的值用x分割，第一个是宽度(width)，第二个是高度(height)

swal({

title:"Sweet！",

text:"这是自定义的图标！",

imageUrl:'Images/thumbs-up.jpg',

imageSize:’90x90’

});

animation表示的是对话框显示时的动画。默认动画是pop(淡出)，也可以指定slide-from-top(从上面滑入)和slide-from-bottom(从下面滑入)。如果设为false则没有动画。

swal({

title:"Animation 动画",

text:"我是从上面掉下来的！",

type:'info',

animation:"slide-from-top",

});

showLoaderOnConfirm 默认为false。当该参数设为true的时候会禁用按钮，并且显示正在加载的图标。常用的情形是当用户点击了确认按钮以后会提交ajax，这时在ajax提交的过程中禁用按钮，并且显示正在加载。除此之外在这期间还不能关闭对话框。下面是模拟ajax请求过程。

swal({

title:"Ajax 使用示例！",

text:"提交ajax请求！",

type:'info',

showCancelButton:true,

closeOnConfirm:false,

showLoaderOnConfirm:true

},function(){

setTimeout(function(){

swal("Ajax 请求完成！");

}, 2000);

});

allowOutsideClick 默认为false，如果设为true，则用户点击对话框以外的区域关闭对话框。

swal({

title:"AllowOutsideClick",

text:"不用点击我了，点击我以外的区域我也会消失的！",

type:'info',

allowOutsideClick:true,

showConfirmButton:false

});

allowEscapeKey 默认为false，如果设为true，则用户按键盘上的esc键即可关闭对话框。

swal({

title:"allowEscapeKey",

text:"不用点击我了，按下键盘上的ESC键我就消失了！",

type:'info',

allowEscapeKey:true,

showConfirmButton:false

});

以上是对sweetalert所有参数及其所标识的功能的介绍。灵活运用各个参数，能使我们的网页效果更加丰富。