sweetAlert
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
sweetAlert的更多相关文章
- zTree和SweetAlert插件初探
1.zTree插件简介 zTree是一个依靠 jQuery实现的多功能“树插件”.优异的性能.灵活的配置.多种功能的组合是zTree最大优点.专门适合项目开发,尤其是树状菜单.树状数据的Web显示.权 ...
- sweetalert api中文开发文档和手册
官网和下载地址: http://t4t5.github.io/sweetalert/ 2016年10月30日14:10:21 废话,目前php开发越来越API话,所以php方法很多都是json返回数 ...
- 很漂亮的SweetAlert.js 弹出层
在线实例 实例演示 使用方法 swal("Here's a message!") 复制 参数详解 参数 默认值 描述 title null(required) 窗口的名称.可以通过 ...
- SweetAlert – 替代 Alert 的漂亮的提示效果
Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果.SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒.另外提 ...
- 弹出框三 之 sweetalert
1下载sweetalert 2.引入到项目中 <link href="~/Content/sweetalert.css" rel="stylesheet" ...
- 推荐一款炫酷的提示框插件SweetAlert
官方网址 http://t4t5.github.io/sweetalert/ 项目地址 https://github.com/t4t5/sweetalert
- 基于jquery的响应式提示框SweetAlert
介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等.交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果.不过本插件至少支持IE9+.使用方式 ...
- Android studio SweetAlert for Android
找到个开源项目.github:https://github.com/pedant/sweet-alert-dialog 效果图:https://raw.githubusercontent.com/pe ...
- 提示框插件SweetAlert
SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框, 它将提示框进行了美化,并且允许自定义, 支持设置提示框标题.提示类型.内容展示图片.确认取消按 ...
- Ionic2中集成第三方控件Sweetalert
Ionic2混合开发,入坑系列:Ionic2中集成第三方控件Sweetalert 注:Sweetalert2已经可以直接从npm中下载安装 npm install --save sweetalert2 ...
随机推荐
- phpmyadmin #1045 - Access denied for user 'root'@'localhost' (using password: NO)
phpmyadmin访问遇到1045问题 #1045 - Access denied for user 'root'@'localhost' (using password: NO) 解决办法 找到p ...
- oracle根据某个字段去重实例
if not object_id('Tempdb..#T') is null drop table #T Go Create table #T([ID] int,[Name] nvarchar(1), ...
- 第四章 --- 关于Javascript 设计模式 之 迭代器模式
今天我先写 两个常用的迭代器的 例子.(同学们先自行体会这二种迭代器的优缺点) 需求:比较两个数组是否相等 tips: 当数组的下标不为数字的时候,默认为 该键值对 为 对象. 然后迭代器的原理基本来 ...
- chrome谷歌浏览器插件制作简易教程
1.在磁盘上创建一个目录,用来放应用的代码和资源 2.在这个目录中,创建一个文本文件,命名为manifest.json,其内容为: { "manifest_version": 2, ...
- Visual Studio 版本转换工具WPF版开源了
想法的由来 入职一家新公司,领导给了个任务,要编写一个视频监控软件,等我编写调试好,领导满意了以后,这个软件要加入到公司的一个软件系统中去(这个添加工作不用我来做,嘻嘻,看着自己的软件被别人使用,心情 ...
- ResultSet can not re-read row data for column 1.
error:ResultSet can not re-read row data for column 1. 将数据类型改为varchar(max)后,查询数据错误 改正:将jdbc驱动改为jtds驱 ...
- DOM0编程与基础方法
## 这里记录一下DOM编程的基础与方法----### DOM 的O:对象 objectO表示Object,对象的意思.JavaScript中对象可以分为三种类型1. 用户定义对象(user-defi ...
- Java中的24种设计模式与7大原则
一.创建型模式 1.抽象工厂模式(Abstract factory pattern): 提供一个接口, 用于创建相关或依赖对象的家族, 而不需要指定具体类.2.生成器模式(Builder patter ...
- AJAX获取数据成功后的返回数据如何声明成全局变量
var result=""; $.ajax({ type: "post", url: "../reportRule/main.do?method=se ...
- 解决Unsupported major.minor version 51.0错误
解决Unsupported major.minor version 51.0错误使用jdk6运行项目时发生了Unsupported major.minor version 51.0错误.经过网上搜索发 ...