【转载】SweetAlert2 使用
SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框,它提供各种参数和方法,支持嵌入图片,背景,HTML标签等,并提供5种内置的情景类,功能非常强大。
SweetAlert2是SweetAlert-js的升级版本,它解决了SweetAlert-js中不能嵌入HTML标签的问题,并对弹出对话框进行了优化,同时提供对各种表单元素的支持,还增加了5种情景模式的模态对话框。
安装
可以通过bower或npm来安装sweetalert2对话框插件。
1
2
|
bower install sweetalert2 npm install sweetalert2 |
使用方法
使用SweetAlert2对话框需要在页面中引入sweetalert2.min.css和sweetalert2.min.js文件,为了兼容IE浏览器,还需要引入promise.min.js文件。
1
2
3
4
|
<link rel= "stylesheet" type= "text/css" href= "path/to/sweetalert2/dist/sweetalert2.min.css" > <script src= "path/to/sweetalert2/dist/sweetalert2.min.js" ></script> <!-- for IE support --> <script src= "path/to/es6-promise/promise.min.js" ></script> |
基本使用
最基本的使用方法是通过swal()
来弹出一个对话框。
1
|
swal( 'Hello world!' ); |
如果要弹出一个带情景模式的对话框,可以在的第二个参数中设置。
1
|
swal( 'Oops...' , 'Something went wrong!' , 'error' ); |
你可以通过下面的方法来处理对话框的用户交互:
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
|
swal({ title: 'Are you sure?' , text: 'You will not be able to recover this imaginary file!' , type: 'warning' , showCancelButton: true , confirmButtonText: 'Yes, delete it!' , cancelButtonText: 'No, keep it' , }).then(function(isConfirm) { if (isConfirm === true ) { swal( 'Deleted!' , 'Your imaginary file has been deleted.' , 'success' ); } else if (isConfirm === false ) { swal( 'Cancelled' , 'Your imaginary file is safe :)' , 'error' ); } else { // Esc, close button or outside click // isConfirm is undefined } }); |
swal(...)
会返回一个Promise对象,该Promise对象中then
方法中的isConfirm
参数的含义如下:
true
:代表Confirm(确认)按钮。false
:代表Cancel(取消)按钮。undefined
:代表按下Esc键,点击取消按钮或在对话框之外点击。
模态对话框的类型
sweetalert2提供了5种情景模式的对话框。
配置参数
参数 | 默认值 | 描述 |
title | null | 模态对话框的标题。它可以在参数对象的title 参数中设置,也可以在swal() 方法的第一个参数设置。 |
text | null | 模态对话框的内容。它可以在参数对象的text 参数中设置,也可以在swal() 方法的第二个参数设置。 |
html | null | 对话框中的内容作为HTML标签。如果同时提供text 和html 参数,插件将会优先使用text 参数。 |
type | null | 对话框的情景类型。有5种内置的情景类型:warning ,error ,success ,info 和question 。它可以在参数对象的type 参数中设置,也可以在swal() 方法的第三个参数设置。 |
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 | 如果设置了imageUrl 参数,可以为图片设置显示的宽度,单位像素。 |
imageHeight | null | 如果设置了imageUrl 参数,可以为图片设置显示的高度,单位像素。 |
imageClass | null | 自定义的图片class类。 |
timer | null | 自动关闭对话框的定时器,单位毫秒。 |
width | 500 | 模态窗口的宽度,包括padding值(box-sizing: border-box )。 |
padding | 20 | 模态窗口的padding内边距。 |
background | "#fff" | 模态窗口的背景颜色。 |
input | null | 表单input域的类型,可以是"text", "email", "password", "textarea", "select", "radio", "checkbox" 和 "file"。 |
inputPlaceholder | "" | input域的占位符。 |
inputValue | "" | input域的初始值。 |
inputOptions | {} 或 Promise | 如果input 的值是select 或radio ,你可以为它们提供选项。对象的key代表选项的值,value代表选项的文本值。 |
inputAutoTrim | true | 是否自动清除返回字符串前后两端的空白。 |
inputValidator | null | 是否对input域进行校验,返回Promise对象。 |
inputClass | null | 自定义input域的class类。 |
你可以使用swal.setDefaults(customParams)
方法来覆盖默认的参数,customParams
是一个对象。
方法
方法 | 描述 |
swal.setDefaults({Object}) | 当你在使用SweetAlert2时有大量的自定义参数,可以通过swal.setDefaults({Object}) 方法来将它们设置为默认参数。 |
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文件)
- Microsoft Edge: 12+
- Safari: 4+
- Firefox: 4+
- Chrome 14+
- Opera: 15+
SweetAlert2模态对话框插件的github地址为:https://github.com/limonte/sweetalert2
【转载】SweetAlert2 使用的更多相关文章
- Crystal Clear Applied: The Seven Properties of Running an Agile Project (转载)
作者Alistair Cockburn, Crystal Clear的7个成功要素,写得挺好. 敏捷方法的关注点,大家可以参考,太激动所以转载了. 原文:http://www.informit.com ...
- RTP与RTCP协议介绍(转载)
RTSP发起/终结流媒体.RTP传输流媒体数据 .RTCP对RTP进行控制,同步.RTP中没有连接的概念,本身并不能为按序传输数据包提供可靠的保证,也不提供流量控制和拥塞控制,这些都由RTCP来负责完 ...
- 《Walking the callstack(转载)》
本文转载自:https://www.codeproject.com/articles/11132/walking-the-callstack Download demo project with so ...
- [转载]MVVM模式原理分析及实践
没有找到很好的MVVM模式介绍文章,简单找了一篇,分享一下.MVVM实现了UI\UE设计师(Expression Blend 4设计界面)和软件工程师的合理分工,在SilverLight.WPF.Wi ...
- [转载]:STM32为什么必须先配置时钟再配置GPIO
转载来源 :http://blog.csdn.net/fushiqianxun/article/details/7926442 [原创]:我来添两句,就是很多同学(包括我)之前搞低端单片机,到了stm ...
- [转载]从MyEclipse到IntelliJ IDEA-让你摆脱鼠标,全键盘操作
从MyEclipse转战到IntelliJ IDEA的经历 注转载址:http://blog.csdn.net/luoweifu/article/details/13985835 我一个朋友写了一篇“ ...
- TCP同步与异步,长连接与短连接【转载】
原文地址:TCP同步与异步,长连接与短连接作者:1984346023 [转载说明:http://zjj1211.blog.51cto.com/1812544/373896 这是今天看到的一篇讲到T ...
- 在CentOS 7/6.5/6.4 中安装Java JDK 8(转载)
转载在CentOS 7/6.5/6.4 中安装Java JDK 8 首先,在你的服务器上运行一下更新. yum update 然后,在您的系统上搜索,任何版本的已安装的JDK组件. rpm -qa | ...
- 用C#实现MD5的加密(转载)
方法一 首先,先简单介绍一下MD5 MD5的全称是message-digest algorithm 5(信息-摘要算法,在90年代初由mit laboratory for computer scien ...
随机推荐
- JavaScript事件机制——细思极恐
JavaScript事件机制,也有让人深思的东西.在一开始未深入了解,我头脑里有几个问题发出: 1. 自下而上(冒泡)事件怎么写,自上而下(捕获)又是怎么写? 2. 捕获型和冒泡型同时设置,谁生效? ...
- HTTP与HTTPS握手的那些事
今天我总结了什么是HTTP三次握手,还有HTTPS握手的过程以及为什么HTTPS是安全的. 前提 在讲述这两个握手时候,有一些东西需要提前说明. HTTP与TCP/IP区别? TPC/IP协议是传输层 ...
- SAP 录屏BDC使用—实例
1) 输入TCode:SHDB进入BDC录制初始界面,该界面可以实现已创建BDC Session信息的查看.删除及锁定等操作 2) 单击工具栏 Newrecording 按钮创建一个新的BDC,系 ...
- ABAP中的同步和异步调用
ABAP 的 CALL FUNCTION 类似于 Java/.NET 中的本地或远程方法调用.CALL FUNCTION 可以分为四种:1. Synchronous RFC (sRFC) - 同步调用 ...
- JSON 转javabean 利器
别再对着json来手写javabean啦.这个工作完全不要脑子,而且耗时. 这里给大家提供三种方式: android studio版: 万能的插件:GsonFormat 如何安装? Preferenc ...
- Android 中的编码与解码
前言:今天遇到一个问题,一个用户在登录的时候,出现登录失败.但是其他用户登录都是正常的,经过调试发现登录失败的用户的密码中有两个特殊字符: * .# . 特殊符号在提交表单的时候,出现了编码不一样的 ...
- Android自定义控件2--优酷菜单界面初始化
本文开始将逐步去实现下面优酷菜单的效果: 本文地址:http://www.cnblogs.com/wuyudong/p/5912538.html,转载请注明源地址. 本文首先来实现优酷菜单界面初始化工 ...
- UISegmentedControl(人物简介)
效果图 当你点击上面人物名字的时候 ,就可以随意切换人物. 这个很有趣 , 你还可以试着添加音乐播放器 .以及一些别的来完善你想做的. 好吧 , 废话不多说 , 上代码. #import " ...
- Virtualbox虚拟机安装CentOS6.5图文详细教程
什么是Virtualbox? VirtualBox 是一款开源虚拟机软件(注:跟vmware差不多).VirtualBox 是由德国 Innotek 公司开发,由Sun Microsystems公司出 ...
- HTML5气泡悬浮框(已经加上完整文件)
源文件链接:http://pan.baidu.com/s/1pKHlNSn 设计气泡悬浮框 1.在网页设计中,气泡悬浮框常常用于页面中为某些对象显示提示信息,恰当地使用气泡悬浮框能够使网页布局更加完美 ...