Sweetalert2美观的提示框插件
来源:互联网 发布:sql server 收费标准 编辑:程序博客网 时间:2024/06/05 19:34
简要教程
SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框,它提供各种参数和方法,支持嵌入图片,背景,HTML标签等,并提供5种内置的情景类,功能非常强大。
SweetAlert2是SweetAlert-js的升级版本,它解决了SweetAlert-js中不能嵌入HTML标签的问题,并对弹出对话框进行了优化,同时提供对各种表单元素的支持,还增加了5种情景模式的模态对话框。
安装
可以通过bower或npm来安装sweetalert2对话框插件。
bower install sweetalert2
npm install sweetalert2
使用方法
使用SweetAlert2对话框需要在页面中引入sweetalert2.min.css和sweetalert2.min.js文件,为了兼容IE浏览器,还需要引入promise.min.js文件。
<
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()来弹出一个对话框。
swal(
'Hello world!'
);
如果要弹出一个带情景模式的对话框,可以在的第二个参数中设置。
swal(
'Oops...'
,
'Something went wrong!'
,
'error'
);
你可以通过下面的方法来处理对话框的用户交互:
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种情景模式的对话框。
配置参数
参数默认描述titlenull模态对话框的标题。它可以在参数对象的title参数中设置,也可以在swal()方法的第一个参数设置。textnull模态对话框的内容。它可以在参数对象的text参数中设置,也可以在swal()方法的第二个参数设置。htmlnull对话框中的内容作为HTML标签。如果同时提供text和html参数,插件将会优先使用text参数。typenull对话框的情景类型。有5种内置的情景类型:warning,error,success,info和question。它可以在参数对象的type参数中设置,也可以在swal()方法的第三个参数设置。customClassnull模态对话框的自定义class类。animationtrue如果设置为false,对话框将不会有动画效果。allowOutsideClicktrue是否允许点击对话框外部来关闭对话框。allowEscapeKeytrue是否允许按下Esc键来关闭对话框。showConfirmButtontrue是否显示“Confirm(确认)”按钮。showCancelButtonfalse是否显示“Cancel(取消)”按钮。confirmButtonText"OK"确认按钮上的文本。cancelButtonText"Cancel"取消按钮上的文本。confirmButtonColor"#3085d6"确认按钮的颜色。必须是HEX颜色值。cancelButtonColor"#ccc"取消按钮的颜色。必须是HEX颜色值。confirmButtonClassnull确认按钮的自定义class类。cancelButtonClassnull取消按钮的自定义class类。buttonsStylingtrue为按钮添加默认的swal2样式。如果你想使用自己的按钮样式,可以将该参数设置为false。reverseButtonsfalse如果你想反向显示按钮的位置,设置该参数为true。showLoaderOnConfirmfalse设置为true时,按钮被禁用,并显示一个在加载的进度条。该参数用于AJAX请求的情况。preConfirmnull在确认之前执行的函数,返回一个Promise对象。imageUrlnull为模态对话框自定义图片。指向一幅图片的URL地址。imageWidthnull如果设置了imageUrl参数,可以为图片设置显示的宽度,单位像素。imageHeightnull如果设置了imageUrl参数,可以为图片设置显示的高度,单位像素。imageClassnull自定义的图片class类。timernull自动关闭对话框的定时器,单位毫秒。width500模态窗口的宽度,包括padding值(box-sizing: border-box)。padding20模态窗口的padding内边距。background"#fff""#fff" 模态窗口的背景颜色。inputnull表单input域的类型,可以是"text", "email", "password", "textarea", "select", "radio", "checkbox" 和 "file"。inputPlaceholder""input域的占位符。inputValue""input域的初始值。inputOptions{} 或 Promise如果input的值是select或radio,你可以为它们提供选项。对象的key代表选项的值,value代表选项的文本值。inputAutoTrimtrue是否自动清除返回字符串前后两端的空白。inputValidatornull是否对input域进行校验,返回Promise对象。inputClassnull自定义input域的class类。方法
方法描述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美观的提示框插件
- 亮眼的弹出框--SweetAlert2
- 美观的CSS搜索框,点击后提示消失
- sweetalert2 弹出窗提示前端框架
- web前端插件SweetAlert2,可代替alert()
- 10个美观实用的 jQuery/Mootool 日历插件
- 单选框、复选框美观的样式
- SweetAlert2一个前端最好用的弹窗
- 实现美观的TabHost
- 几款好用的Tooltips 提示框插件
- 漂亮实用的提示框插件SweetAlert
- 漂亮实用的提示框插件SweetAlert
- ngCordova插件(4)之Toast提示框插件的使用
- 美观下拉框实例
- JQuery实现的几个弹出框实现绝对美观
- 时间轴插件完善,大事记清晰美观
- 弹出提示框插件
- 一个美观的gridview样式
- 贪心之懒虫小鑫
- select通过text的值来进行选定来进行
- Mac osx 10.12 下安装cadnano
- JAVA web后台开发知识体系
- 数据建模在性能测试中的理解
- Sweetalert2美观的提示框插件
- R利用卷积神经网络做预测
- UESTC1253 博弈
- .
- 动态规划之暴力枚举不断尝试
- LeetCode9 3Sum
- ZOJ
- python elif用法实战
- VS快捷键