js-jquery-从SweetAlert到SweetAlert2
2023-09-14 09:08:49 时间
原文地址:https://github.com/limonte/sweetalert2/wiki/Migration-from-SweetAlert-to-SweetAlert2
1. IE support
默认不制止IE,如果想支持IE11
<script src="bower_components/es6-promise/promise.auto.min.js"></script>
2. Promise instead of callback function
SweetAlert:
swal( {title: 'Are you sure?', showCancelButton: true}, function(isConfirm) { if (isConfirm) { // handle confirm } else { // handle all other cases } } );
SweetAlert2:
swal({title: 'Are you sure?', showCancelButton: true}).then( function(result) { // handle Confirm button click // result is an optional parameter, needed for modals with input }, function(dismiss) { // dismiss can be 'cancel', 'overlay', 'esc' or 'timer' } );
3. Modal with input field
SweetAlert:
swal({ ... type: 'input' ... }, function(inputValue) { ... })
SweetAlert2:
swal({ ... input: 'text' // can be also 'email', 'password', 'select', 'radio', 'checkbox', 'textarea', 'file' ... }).then(function(inputValue) { ... })
4. Custom HTML in the title and description
SweetAlert:
swal({ title: '<span class="title">Title</span>', text: '<span class="text">HTML description</span>', html: true })
SweetAlert2:
swal({ title: '<span class="title">Title</span>', html: '<span class="text">HTML description</span>' })
5. closeOnConfirm
and closeOnCancel
parameters replaced with preConfirm
SweetAlert:
swal({ {... closeOnConfirm: false}, function() { // perform AJAX request } });
SweetAlert2:
swal({ ... showLoaderOnConfirm: true, preConfirm: function() { return new Promise(function(resolve) { setTimeout(function() { resolve(); }, 2000); }); } }).then(function() { swal('Ajax request finished!'); });
6. Reversed buttons order
If you want to keep the buttons order like it was in the original SweetAlert plugin (Confirm button on the right side) set the reverseButtons
parameter to true
:
swal.setDefaults({ reverseButtons: true })
相关文章
- Fabric.js 修改画布交互方式到底有什么用?
- 添加鼠标滑过图片闪烁的js特效-jquery-opacity-rollover
- js替换html中的字符串,js怎么替换字符串?
- JS跳转代码_js中跳转页面路径
- 通过JS实现剪贴板操作
- 原生 JS 实现 HTML 转 Markdown,以及其实现逻辑(html2md.js 或 html2markdown.js)
- js 动态修改浏览器标签的 title
- Python爬虫之Js逆向案例-拼多多商品详情数据&拼多多商品列表数据&拼多多商品优惠券数据示例返回值说明
- js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选详解编程语言
- jQuery库与其他JS库冲突的解决办法
- jQuery温习篇强大的JQuery选择器
- 获取客户端电脑日期时间js代码(jquery)
- js遍历tdtr等html元素
- jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
- js动态调用css属性的小规律及实例说明
- js字符串转换成数字与数字转换成字符串的实现方法
- 自己使用js/jquery写的一个定制对话框控件
- 使用JS+plupload直接批量上传图片到又拍云
- js+jquery实现图片裁剪功能