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	"#ccc"	取消按鈕的顔色。必須是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"	"#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({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+

轉載于：http://www.jq22.com/jquery-info8169 另外可參考簡單上手使用的文章：http://blog.csdn.net/zlts000/article/details/50537522?ref=myread