swal ajax,Sweetalert详细介绍
好长时间没有更新文章了，年底工作比较忙，确实是没有时间来写文章。今天忙里偷闲，总结了一款前端提示框的插件——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所有参数及其所标识的功能的介绍。灵活运用各个参数，能使我们的网页效果更加丰富。