js-jquery-SweetAlert2【二】配置与方法
一、配置
Argument | Default value | Description | |
---|---|---|---|
title | null | 模态对话框的标题。它可以在参数对象的title 参数中设置,也可以在swal() 方法的第一个参数设置。 |
The title of the modal, as HTML. It can either be added to the object under the key "title" or passed as the first parameter of the function. |
titleText | null | 模态对话框的内容。 | The title of the modal, as text. Useful to avoid HTML injection. |
text | null | 模态对话框的内容。它可以在参数对象的text 参数中设置,也可以在swal() 方法的第二个参数设置。 |
A description for the modal. It can either be added to the object under the key "text" or passed as the second parameter of the function. |
html | null | 对话框中的内容作为HTML标签。如果同时提供text 和html 参数,插件将会优先使用text 参数。 |
A HTML description for the modal. If "text" and "html" parameters are provided in the same time, "text" will be used. |
type | null | 对话框的情景类型。有5种内置的情景类型:warning ,error ,success ,info 和question 。它可以在参数对象的type 参数中设置,也可以在swal() 方法的第三个参数设置。 |
The type of the modal. SweetAlert2 comes with 5 built-in types which will show a corresponding icon animation: warning, error, success, info and question. It can either be put in the array under the key "type" or passed as the third parameter of the function. |
target | 'body' | The container element for adding modal into. | |
input | null | 表单input域的类型,可以是text, email, password,number, tel, range, textarea, select, radio,checkbox, file and url. | Input field type, can be text, email, password,number, tel, range, textarea, select, radio,checkbox, file and url. |
width | '500px' | Modal window width, including paddings (box-sizing: border-box). Can be in px or %. | |
padding | 20 | Modal window padding. | |
background | '#fff' | Modal window background (CSS background property). | |
customClass | null | 模态对话框的自定义class类。 | A custom CSS class for the modal. |
timer | null | Auto close timer of the modal. Set in ms (milliseconds). | |
animation | true | 自动关闭对话框的定时器,单位毫秒。 | If set to false, modal CSS animation will be disabled. |
allowOutsideClick | true | 是否允许点击对话框外部来关闭对话框。 | If set to false, the user can't dismiss the modal by clicking outside it. |
allowEscapeKey | true | 是否允许按下Esc键来关闭对话框。 | If set to false, the user can't dismiss the modal by pressing the Escape key. |
allowEnterKey | true | 是否允许按下Enter键来提交。 | If set to false, the user can't confirm the modal by pressing the Enter or Space keys, unless they manually focus the confirm button. |
showConfirmButton | true | 是否显示“Confirm(确认)”按钮。 | If set to false, a "Confirm"-button will not be shown. It can be useful when you're using custom HTML description. |
showCancelButton | false | 是否显示“Cancel(取消)”按钮。 | If set to true, a "Cancel"-button will be shown, which the user can click on to dismiss the modal. |
confirmButtonText | 'OK' | 确认按钮上的文本。 | Use this to change the text on the "Confirm"-button. |
cancelButtonText | 'Cancel' | 取消按钮上的文本。 | Use this to change the text on the "Cancel"-button. |
confirmButtonColor | '#3085d6' | 确认按钮的颜色。必须是HEX颜色值。 | Use this to change the background color of the "Confirm"-button (must be a HEX value). |
cancelButtonColor | '#aaa' | 取消按钮的颜色。必须是HEX颜色值。 | Use this to change the background color of the "Cancel"-button (must be a HEX value). |
confirmButtonClass | null | 确认按钮的自定义class类。 | A custom CSS class for the "Confirm"-button. |
cancelButtonClass | null | 取消按钮的自定义class类。 | A custom CSS class for the "Cancel"-button. |
buttonsStyling | true | 为按钮添加默认的swal2样式。如果你想使用自己的按钮样式,可以将该参数设置为false。 | Apply default swal2 styling to buttons. If you want to use your own classes (e.g. Bootstrap classes) set this parameter to false. |
reverseButtons | false | 如果你想反向显示按钮的位置,设置该参数为true。 | Set to true if you want to invert default buttons positions ("Confirm"-button on the right side). |
focusCancel | false | 焦点设置在取消上 | Set to true if you want to focus the "Cancel"-button by default. |
showCloseButton | false | 显示关闭,ajax | Set to true to show close button in top right corner of the modal. |
showLoaderOnConfirm | false | 展示加载中按钮,ajax | Set to true to disable buttons and show that something is loading. Useful for AJAX requests. |
preConfirm | null | 在确认之前执行的函数,返回一个Promise对象。 | Function to execute before confirm, should return Promise, see usage example. |
imageUrl | null | 为模态对话框自定义图片。指向一幅图片的URL地址。 | Add a customized icon for the modal. Should contain a string with the path or URL to the image. |
imageWidth | null | If imageUrl is set, you can specify imageWidth to describes image width in px. | |
imageHeight | null | Custom image height in px. | |
imageClass | null | A custom CSS class for the customized icon. | |
inputPlaceholder | '' | input域的占位符。 | Input field placeholder. |
inputValue | '' | input域的初始值。 | Input field initial value. |
inputOptions | {} or Promise | 如果input 的值是select 或radio ,你可以为它们提供选项。对象的key代表选项的值,value代表选项的文本值。 |
If input parameter is set to "select" or "radio", you can provide options. Object keys will represent options values, object values will represent options text values. |
inputAutoTrim | true | 是否自动清除返回字符串前后两端的空白。 | Automatically remove whitespaces from both ends of a result string. Set this parameter to false to disable auto-trimming. |
inputValidator | null | 是否对input域进行校验,返回Promise对象。 | Validator for input field, should return Promise, see usage example. |
inputClass | null | 自定义input域的class类 | A custom CSS class for the input field. |
progressSteps | [] | Progress steps, useful for modal queues, see usage example. | |
currentProgressStep | null | Current active progress step. The default is swal.getQueueStep() | |
progressStepsDistance | '40px' | Distance between progress steps. | |
onOpen | null | Function to run when modal opens, provides modal DOM element as the first argument. | |
onClose | null | Function to run when modal closes, provides modal DOM element as the first argument. |
二、HANDLING DISMISSALS
When an alert is dismissed by the user, the Promise returned by swal() will reject with a string documenting the reason it was dismissed:
String | Description | Related configuration |
---|---|---|
'overlay' | The user clicked the overlay. | allowOutsideClick |
'cancel' | The user clicked the cancel button. | showCancelButton |
'close' | The user clicked the close button. | showCloseButton |
'esc' | The user clicked the Esc key. | allowEscapeKey |
'timer' | The timer ran out, and the alert closed automatically. | timer |
If rejections are not handled, it will be logged as an error. To avoid this, add a rejection handler to the Promise.
Alternatively, you can use .catch(swal.noop) as a quick way to simply suppress the errors:
swal(...)
.catch(swal.noop)
三、方法
Method | Description | |
---|---|---|
swal.isVisible() | Determine if modal is shown. | |
swal.setDefaults({Object}) | 当你在使用SweetAlert2时有大量的自定义参数,可以通过swal.setDefaults({Object}) 方法来将它们设置为默认参数。 |
If you end up using a lot of the same settings when calling SweetAlert2, you can use setDefaults at the start of your program to set them once and for all! |
swal.resetDefaults() | 重置设置的默认值。 | Resets settings to their default value. |
swal.close() orswal.closeModal() | 以编程的方式关闭当前打开的SweetAlert2对话框。 | Close the currently open SweetAlert2 modal programmatically. |
swal.enableButtons() | 确认和关闭按钮可用。 | Enable "Confirm" and "Cancel" buttons. |
swal.getTitle() | Get the modal title. | |
swal.getContent() | Get the modal content. | |
swal.getImage() | Get the image. | |
swal.getConfirmButton() | Get the "Confirm" button. | |
swal.getCancelButton() | Get the "Cancel" button. | |
swal.disableButtons() | 禁用确认和关闭按钮。 | Disable "Confirm" and "Cancel" buttons. |
swal.enableConfirmButton() | Enable the "Confirm"-button only. | |
swal.disableConfirmButton() | Disable the "Confirm"-button only. | |
swal.showLoading() orswal.enableLoading() | 禁用按钮并显示加载进度条。通常用于AJAX请求 | Disable buttons and show loader. This is useful with AJAX requests. |
swal.hideLoading() orswal.disableLoading() | 隐藏进度条并使按钮可用。 | Enable buttons and hide loader. |
swal.clickConfirm() | 以编程的方式点击确认按钮。 | Click the "Confirm"-button programmatically. |
swal.clickCancel() | 以编程的方式点击取消按钮 | Click the "Cancel"-button programmatically. |
swal.showValidationError(error) | 显示表单校验错误信息 | Show validation error message. |
swal.resetValidationError() | 隐藏表单校验错误信息 | Hide validation error message. |
swal.getInput() | Get the input DOM node, this method works with input parameter. | |
swal.disableInput() | 禁用input域 | Disable input. A disabled input element is unusable and un-clickable. |
swal.enableInput() | 使input域可用 | Enable input. |
swal.queue([Array]) | Provide array of SweetAlert2 parameters to show multiple modals, one modal after another. See usage example | |
swal.getQueueStep() | Get the index of current modal in queue. When there's no active queue, null will be returned. | |
swal.insertQueueStep() | Insert a modal to queue, you can specify modal positioning with second parameter. By default a modal will be added to the end of a queue. | |
swal.deleteQueueStep(index) | Delete a modal at index from queue. | |
swal.getProgressSteps() | Progress steps getter. | |
swal.setProgressSteps([]) | Progress steps setter. | |
swal.showProgressSteps() | Show progress steps. | |
swal.hideProgressSteps() | Hide progress steps. |
js-jquery-SweetAlert2【二】配置与方法的更多相关文章
- js jquery 页面加载初始化方法
js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...
- js&jquery避免报错的方法
CreateTime--2016年12月8日15:28:40Author:Marydonjs&jquery规避报错信息的两种方式 <script type="text/ja ...
- js/jquery 回调函数的定义方法
基本写法: 带参数的回调函数 以上回调函数,直接传入function作为参数,同样,还可以传入json对象作为参数...如下. 该方法的优势是可以定义多个回调函数....类似$.ajax回调函数中的s ...
- js jQuery取消添加超链接的方法小结
今天在工作中需要将某个链接给取消实现只触发事件的目的,后来发现批量取消链接等,脚本之家简单的给整理了下,希望对需要的朋友有所帮助. 单个链接取消链接并触发js事件 <a href="j ...
- js,JQuery 生成二维码
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- JQuery的$和其它JS发生冲突的快速解决方法
众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点. 然后,JS插件并非只有JQuery,还有prototype.j ...
- 转载 jQuery和js自定义函数和文件的方法(全网最全)
jQuery和js自定义函数和文件的方法(全网最全) 版权声明:本文为像雾像雨又像风_http://blog.csdn.net/topdandan的原创文章,未经允许不得转载. https:// ...
- Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)
jquery提供的serialize方法能够实现. $("#searchForm").serialize();但是,观察输出的信息,发现serialize()方法做的是将表单中的数 ...
- js进阶 11-18 jquery中操作选择器的方法有哪些
js进阶 11-18 jquery中操作选择器的方法有哪些 一.总结 一句话总结:add().addBack().end() 1.add()方法是干嘛的,举一例? 将add()方法后选择器选择的jqu ...
- 编写高质量JS代码的68个有效方法(二)
[20141011]编写高质量JS代码的68个有效方法(二) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
随机推荐
- hbase shell学习-2
一个学生成绩表的例子来演示hbase的用法. name grade course math english Tom 5 97 87 Jim 4 89 80 表的创建:语法:create '表名称',' ...
- html5简单拖拽实现自动左右贴边+幸运大转盘
此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...
- CWorkBooks、CWorkBook、CWorkSheets、CWorkSheet、CRange
我们使用VC++操作Excel,对于Excel编程来说肯定少不了要遇到六个最基本的类: CApplication.CWorkBook.CWorkBooks.CWorkSheet.CWorkSheets ...
- Scala 读文件
环境: Cent OS 6.3 以下说明怎样读取一个文件. 代码: $ cat fileRead.scala import scala.io.Source if (args.length > 0 ...
- Java精选笔记_JSP技术
JSP技术 JSP概述 什么是JSP 在JSP全名是Java Server Page,它是建立在Servlet规范之上的动态网页开发技术. 在JSP文件中,HTML代码与Java代码共同存在,其中,H ...
- swift学习笔记之—自定义函数的规则说明
原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_517.html 1,无返回值的函数 func test( ...
- js 获取图片url的Blob值并预览
1)使用 XMLHttpRequest 对象获取图片url的Blob值 //获取图片的Blob值 function getImageBlob(url, cb) { var xhr = new XMLH ...
- Zookeeper(一)-- 简介以及单机部署和集群部署
一.分布式系统 由多个计算机组成解决同一个问题的系统,提高业务的并发,解决高并发问题. 二.分布式环境下常见问题 1.节点失效 2.配置信息的创建及更新 3.分布式锁 三.Zookeeper 1.定义 ...
- C语言近程型(near)和远程型(far)的区别是什么?
DOS用一种分段结构来寻址计算机的内存,每一个物理存储位置都有一个可以用段一偏移量方式来访问的相关地址.例如,下面就是一个典型的段式地址: A000:1234 冒号左边的部分代表段地址(A00 ...
- ExtJs 6.0+快速入门,ext-bootstrap.js文件的分析,各版本API下载
ExtJS6.0+快速入门+API下载地址 ExtAPI 下载地址如下,包含各个版本 http://docs.sencha.com/misc/guides/offline_docs.html 1.使用 ...