【转载】SweetAlert2 使用
2017-04-20 00:00
183 查看
SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框,它提供各种参数和方法,支持嵌入图片,背景,HTML标签等,并提供5种内置的情景类,功能非常强大。
SweetAlert2是SweetAlert-js的升级版本,它解决了SweetAlert-js中不能嵌入HTML标签的问题,并对弹出对话框进行了优化,同时提供对各种表单元素的支持,还增加了5种情景模式的模态对话框。
基本使用
最基本的使用方法是通过swal()来弹出一个对话框。
如果要弹出一个带情景模式的对话框,可以在的第二个参数中设置。
你可以通过下面的方法来处理对话框的用户交互:
swal(...)会返回一个Promise对象,该Promise对象中then方法中的isConfirm参数的含义如下:
true:代表Confirm(确认)按钮。
false:代表Cancel(取消)按钮。
undefined:代表按下Esc键,点击取消按钮或在对话框之外点击。
模态对话框的类型
sweetalert2提供了5种情景模式的对话框。
你可以使用swal.setDefaults(customParams)方法来覆盖默认的参数,customParams是一个对象。
IE:10+(需要引入Promise文件)
MicrosoftEdge:12+
Safari:4+
Firefox:4+
Chrome14+
Opera:15+
SweetAlert2模态对话框插件的github地址为:https://github.com/limonte/sweetalert2
SweetAlert2是SweetAlert-js的升级版本,它解决了SweetAlert-js中不能嵌入HTML标签的问题,并对弹出对话框进行了优化,同时提供对各种表单元素的支持,还增加了5种情景模式的模态对话框。
安装
可以通过bower或npm来安装sweetalert2对话框插件。1 2 |
使用方法
使用SweetAlert2对话框需要在页面中引入sweetalert2.min.css和sweetalert2.min.js文件,为了兼容IE浏览器,还需要引入promise.min.js文件。1 2 3 4 |
最基本的使用方法是通过
1 |
1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
模态对话框的类型
sweetalert2提供了5种情景模式的对话框。
配置参数
参数 | 默认值 | 描述 |
title | null | 模态对话框的标题。它可以在参数对象的 |
text | null | 模态对话框的内容。它可以在参数对象的 |
html | null | 对话框中的内容作为HTML标签。如果同时提供 |
type | null | 对话框的情景类型。有5种内置的情景类型: |
customClass | null | 模态对话框的自定义class类。 |
animation | true | 如果设置为false,对话框将不会有动画效果。 |
allowOutsideClick | true | 是否允许点击对话框外部来关闭对话框。 |
allowEscapeKey | true | 是否允许按下Esc键来关闭对话框。 |
showConfirmButton | true | 是否显示“Confirm(确认)”按钮。 |
showCancelButton | false | 是否显示“Cancel(取消)”按钮。 |
confirmButtonText | "OK" | 确认按钮上的文本。 |
cancelButtonText | "Cancel" | 取消按钮上的文本。 |
confirmButtonColor | "#3085d6" | 确认按钮的颜色。必须是HEX颜色值。 |
cancelButtonColor | "#aaa" | 取消按钮的颜色。必须是HEX颜色值。 |
confirmButtonClass | null | 确认按钮的自定义class类。 |
cancelButtonClass | null | 取消按钮的自定义class类。 |
buttonsStyling | true | 为按钮添加默认的swal2样式。如果你想使用自己的按钮样式,可以将该参数设置为false。 |
reverseButtons | false | 如果你想反向显示按钮的位置,设置该参数为true。 |
showLoaderOnConfirm | false | 设置为true时,按钮被禁用,并显示一个在加载的进度条。该参数用于AJAX请求的情况。 |
preConfirm | null | 在确认之前执行的函数,返回一个Promise对象。 |
imageUrl | null | 为模态对话框自定义图片。指向一幅图片的URL地址。 |
imageWidth | null | 如果设置了 |
imageHeight | null | 如果设置了 |
imageClass | null | 自定义的图片class类。 |
timer | null | 自动关闭对话框的定时器,单位毫秒。 |
width | 500 | 模态窗口的宽度,包括padding值( |
padding | 20 | 模态窗口的padding内边距。 |
background | "#fff" | 模态窗口的背景颜色。 |
input | null | 表单input域的类型,可以是"text","email","password","textarea","select","radio","checkbox"和"file"。 |
inputPlaceholder | "" | input域的占位符。 |
inputValue | "" | input域的初始值。 |
inputOptions | {}或Promise | 如果 |
inputAutoTrim | true | 是否自动清除返回字符串前后两端的空白。 |
inputValidator | null | 是否对input域进行校验,返回Promise对象。 |
inputClass | null | 自定义input域的class类。 |
方法
方法 | 描述 |
swal.setDefaults({Object}) | 当你在使用SweetAlert2时有大量的自定义参数,可以通过 |
swal.resetDefaults() | 重置设置的默认值。 |
swal.queue([Array]) | 提供一个数组形式的SweetAlert2参数,用于显示多个对话框。对话框将会一个接一个的出现。 |
swal.close() 或swal.closeModal() | 以编程的方式关闭当前打开的SweetAlert2对话框。 |
swal.enableButtons() | 确认和关闭按钮可用。 |
swal.disableButtons() | 禁用确认和关闭按钮。 |
swal.enableLoading() 或swal.showLoading() | 禁用按钮并显示加载进度条。通常用于AJAX请求。 |
swal.disableLoading() 或swal.hideLoading() | 隐藏进度条并使按钮可用。 |
swal.clickConfirm() | 以编程的方式点击确认按钮。 |
swal.clickCancel() | 以编程的方式点击取消按钮。 |
swal.showValidationError(error) | 显示表单校验错误信息。 |
swal.resetValidationError() | 隐藏表单校验错误信息。 |
swal.enableInput() | 使input域可用。 |
swal.disableInput() | 禁用input域。 |
浏览器兼容
SweetAlert2可以工作在所有的现代浏览器中:IE:10+(需要引入Promise文件)
MicrosoftEdge:12+
Safari:4+
Firefox:4+
Chrome14+
Opera:15+
SweetAlert2模态对话框插件的github地址为:
相关文章推荐
- 【转载】SweetAlert2 使用
- 使用JDBC存储和调用大对象[绝对转载]
- 转载:使用第三方软件的痛苦经历
- 使用open source产品组装你的web应用架构(二) 转载
- TPC基准程序及tpmc值-兼谈在使用性能度量时如何避免误区[转载]
- [转载] 使用 Java Web Start 部署 SWT 应用程序
- 用javascript操作xml-->Web设计中如何使用XML数据源对象(转载)
- 使用open source产品组装你的web应用架构(三) 转载
- 在WebWork中使用组件(转载)
- 使用C#创建webservice及三种调用方式(转载)
- 转载--Struts1.1 validation framework 使用中的若干经验
- (转载)使用ActiveX控件开发网页常见的问题
- 强烈建议PHPer们使用Turck MMCache (转载)
- 使用JFreeChart创建图象【转载】
- (转载)使用 COM 符号引擎辅助调试
- VS.NET使用小经验 (转载)
- [Visual C++]在Win2000/XP上安静地替换正在使用的系统文件【转载/收藏】
- (转载)使用ActiveX控件开发网页常见的问题
- 使用open source产品组装你的web应用架构(四) 转载
- Oracle SQL*Loader 使用指南(转载)