SweetAlert入门教程

SweetAlert入门教程

前些天在做后台管理系统，在用户交互这块（弹窗、提示相关），用了一款还不错的插件SweetAlert(一款原生js提示框,允许自定义，支持设置提示框标题、提示类型、确认取消按钮文本、点击后回调函数等等), 效果挺好的，简单写一下用法。

---

把大象装冰箱，总共分三步:

第一步：下载（引用）

有三种方式可供选择：

1.通过bower安装：

$ bower install sweetalert

2.通过npm安装

$ npm install sweetalert

3.我用的是最简单粗暴的方式3：

下载sweetAlert的CSS和JavaScript文件。地址点我
从github上拿下来的sweetalert-master是有带例子的，我们只需要其中两个文件：
dist下的sweetalert.min.js和sweetalert.css（下面引用路径是我自己的）。

<script src="js/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/sweetalert.css"/>

---

第二步： 需要在页面加载完成后调用sweetalert函数：

swal({
	title: "OK!",    
    text: "Nice to meet you!",
    type: "success",    
    confirmButtonText: "HaHa" 
})

---

第三步，就是写需要实现的具体功能了。下面，我来举几个栗子（代码直接从编辑器拿过来，模态框的图懒得贴了，效果可以自己试试。）：

• html代码：

基本信息：<button id="demo1">试一试</button>  <br />

带有文字的标题：<button id="demo2">试一试</button>  <br />

成功提示：<button id="demo3">试一试</button>  <br />
 
带有“确认”按钮的功能的警告消息：<button id="demo4">试一试</button>  <br />
	
通过传递参数，您可以执行一些其他的事情比如“取消”。：<button id="demo5">试一试</button>  <br />
	
一个有自定义图标的消息：<button id="demo6">试一试</button>  <br />

自定义HTML信息：<button id="demo7">试一试</button>  <br />

自动关闭模态框：<button id="demo8">试一试</button>  <br />

更换“提示”功能: <button id="demo9">试一试</button>  <br />

使用加载程序（例如，用于AJAX请求）: <button id="demo10">试一试</button>  <br />

• js代码(原谅我可耻的用了原生)：

document.getElementById("demo1").onclick = function() {
	swal("这是一个信息提示框!")
};
	
document.getElementById("demo2").onclick = function() {
	swal("这是一个信息提示框!", "很漂亮，不是吗？")
};

document.getElementById("demo3").onclick = function() {
	swal("干得好", "你点击了按钮!", "success")
};

document.getElementById("demo4").onclick = function() {
	swal({
		title: "你确定？",
		text: "您将无法恢复这个虚构的文件！",
		type: "warning",
		showCancelButton: true,
		confirmButtonColor: "#DD6B55",
		confirmButtonText: "是的，删除！",
		closeOnConfirm: false
	}, function() {
		swal("删除!", "您的虚构文件已被删除！", "success")
	})
};

document.getElementById("demo5").onclick = function() {
	swal({
		title: "你确定？",
		text: "您将无法恢复这个虚构的文件！",
		type: "warning",
		showCancelButton: true,
		confirmButtonColor: "#DD6B55",
		confirmButtonText: "是的，删除！",
		cancelButtonText: "不，取消",
		closeOnConfirm: false,
		closeOnCancel: false
	}, function(isConfirm) {
		if (isConfirm) {
			swal("删除!", "您的虚构文件已被删除！", "success")						
		} else{
			swal("取消!", "您的虚构文件是安全的！", "error")
		}
	})
};

document.getElementById("demo6").onclick = function() {
	swal({
		title: "Sweet!",
		text: "这里是自定义图像!",
		imageUrl: "img/thumbs-up.jpg"
	})
};

document.getElementById("demo7").onclick = function() {
	swal({
		title: "HTML <small>标题</small>!",
		text: "A custom <span style='color:pink'>html<span> message.",
		html:　true
	})
};

document.getElementById("demo8").onclick = function() {
	swal({
		title: "自动关闭警报!",
		text: "2秒后自动关闭",
		timer: 2000,
		showConfirmButton: false
	})
};

document.getElementById("demo9").onclick = function() {
	swal({
		title: "请输入！",
		text: "填写一些信息",
		type: "input",
		showCancelButton: true,
		closeOnConfirm: false,
		animation: "slide-from-top",
		inputPlaceholder: "请输入..."
	}, function(inputValue) {
		if (inputValue === false) {
			return false;
		}
		if (inputValue === "") {
			swal.showInputError("内容不能为空！");
			return false;
		}
		
		swal("Nice!", "你输入的是：" + inputValue, "success")
	})
};

document.getElementById("demo10").onclick = function() {
	swal({
		title: "AJAX请求实例",
		text: "提交运行Ajax请求",
		type: "info",
		showCancelButton: true,
		closeOnConfirm: false,
		showLoaderOnConfirm: true
	}, function() {
		setTimeout(function() {
			swal("AJAX请求完成！");
		}, 2000)
	})
};

下面说一些可能会频繁使用的配置项：

参数	默认值	描述
title	null (required)	弹窗的标题。可以通过对象的”title”属性或第一个参数进行传递。
text	null	弹窗的描述。可以通过对象的”text”属性或第二个参数进行传递。
type	null	弹窗的类型。SweetAlert有四个内置类型，可以展示相应的图标动画: “warning”,“error”, “success” and “info”。你也可以设置为"input"类型变成输入弹窗。可以通过对象的”type”属性或第三个参数进行传递。
showCancelButton	false	如果设置为true，“取消”按钮将会显示，用户点击取消按钮会关闭弹窗。
showConfirmButton	true	如果设置为false，“确认”按钮将会隐藏。为了良好的用户体验，最好你设置了定时关闭或者allowOutsideClick为true时才将该参数设置为false。
confirmButtonText	“OK”	使用该参数来修改“确认”按钮的显示文本。如果showCancelButton设置为true，确定按钮的显示文本将会自动使用“Confirm”而不是“OK”。
confirmButtonColor	“#AEDEF4”	使用该参数来修改“确认”按钮的背景颜色（必须是十六进制值）。
cancelButtonText	“Cancel”	使用该参数来修改“取消”按钮的显示文本。
imageUrl	null	为弹窗添加一个自定义的图标。这个参数是一个字符串图片路径。
imageSize	“80x80”	如果设置了imageUrl，你可以使用像素（px）指定图片大小来描述你想要多大的图标。在一个字符串中使用“x”来分割两个值，第一个值是宽度，第二值是高度。
timer	null	自动关闭弹窗的定时器。单位为毫秒（ms）。
html	false	如果你设置为true，参数title和参数text的值将会被html解析显示而不是纯文本。（如果你担心被XSS攻击那就设置为false。）
inputType	“text”	当使用type: "input"时，该参数用来改变输入的类型(例如：如果你想让用户输入密码，这可能是有用的)。
inputPlaceholder	null	当使用输入类型时，你可以使用placeholder来帮助用户明白应该输入什么内容。

---

好啦，就这样吧。其实sweetalert2也已经出了，支持响应式，功能也更加强大，但本着够用就好的原则，还是先用的第一版。

参考：

源地址：http://t4t5.github.io/sweetalert/

中文：http://mishengqiang.com/sweetalert/

github地址：https://github.com/t4t5/sweetalert