sweetAlert彈窗

 

SweetAlert中文

 

 

Sweet Alert

完美得無可替代

下載

那么……它都能做什么呢？

讓我們來比較看一下錯誤消息的顯示。第一個使用了內置的alert，第二個使用了sweetAlert。

普通alert

顯示錯誤信息

代碼:

alert("哎呦……出錯了！");

 

Sweet Alert

顯示錯誤信息

代碼:

sweetAlert("哎呦……", "出錯了！","error");

非常漂亮吧？無論你是在電腦、手機還是平板上，SweetAlert都會在頁面上自動居中顯示，這看起來非常棒。SweetAlert還可高度定制，正如下面你所看到的。

示例

在這些實例中，我們使用了簡稱函數swal調用sweetAlert。

• 基本信息彈窗

  嘗試一下

  swal("這是一條信息！")

• 標題與文本的信息彈窗

  嘗試一下

  swal("這是一條信息！", "很漂亮，不是嗎？")

• 成功信息彈窗！

  嘗試一下

  swal("干得漂亮！", "你點擊了按鈕！","success")

• 警告信息彈窗，“確認”按鈕帶有一個函數……

  嘗試一下

  				swal({ 
  				  title: "確定刪除嗎？", 
  				  text: "你將無法恢復該虛擬文件！", 
  				  type: "warning",
  				  showCancelButton: true, 
  				  confirmButtonColor: "#DD6B55",
  				  confirmButtonText: "確定刪除！", 
  				  closeOnConfirm: false
  				},
  				function(){
  				  swal("刪除！", "你的虛擬文件已經被刪除。", "success"); 
  				});
  			

• …… 給函數傳入參數，"取消"按鈕也可以執行。

  嘗試一下

  				swal({ 
  				  title: "確定刪除嗎？", 
  				  text: "你將無法恢復該虛擬文件！", 
  				  type: "warning",
  				  showCancelButton: true, 
  				  confirmButtonColor: "#DD6B55",
  				  confirmButtonText: "確定刪除！", 
  				  cancelButtonText: "取消刪除！",
  				  closeOnConfirm: false, 
  				  closeOnCancel: false				
  				},
  				function(isConfirm){ 
  				  if (isConfirm) { 
  				    swal("刪除！", "你的虛擬文件已經被刪除。",
  				"success"); 
  				  } else { 
  				    swal("取消！", "你的虛擬文件是安全的:)",
  				"error"); 
  				  } 
  				});
  			

• 自定義圖標信息彈窗

  嘗試一下

  				swal({ 
  				  title: "漂亮！", 
  				  text: "這是自定義圖標。",
  				  imageUrl: "images/thumbs-up.jpg" 
  				});
  			

• HTML信息彈窗

  嘗試一下

  				swal({ 
  				  title: "HTML <small>標題</small>!",
  				  text: "自定義<span style="color:#F8BB86">html<span>信息。", 
  				  html: true 
  				});
  			

• 定時關閉信息彈窗

  嘗試一下

  				swal({ 
  				  title: "自動關閉彈窗！", 
  				  text: "2秒后自動關閉。", 
  				  timer: 2000, 
  				  showConfirmButton: false 
  				});
  			

• 輸入信息彈窗

  嘗試一下

  				swal({ 
  				  title: "輸入！", 
  				  text: "輸入一些有趣的話：",
  				  type: "input", 
  				  showCancelButton: true, 
  				  closeOnConfirm: false, 
  				  animation: "slide-from-top", 
  				  inputPlaceholder: "輸入一些話" 
  				},
  				function(inputValue){ 
  				  if (inputValue === false) returnfalse; 
  				  
  				  if (inputValue === "") { 
  				    swal.showInputError("你需要輸入一些話！");
  				    return false 
  				  } 
  				  
  				  swal("非常好！", "你輸入了：" + inputValue,"success"); 
  				});
  			

• 加載(AJAX請求示例)彈窗

  嘗試一下

  				swal({ 
  				  title: "Ajax請求示例", 
  				  text: "提交運行ajax請求", 
  				  type: "info", 
  				  showCancelButton: true, 
  				  closeOnConfirm: false, 
  				  showLoaderOnConfirm: true, 
  				},
  				function(){ 
  				  setTimeout(function(){ 
  				    swal("Ajax請求完成！"); 
  				  }, 2000);
  				});
  			

• 你可以改變SweetAlert的主題樣式!

  嘗試一下

  				<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
  				<link rel="stylesheet" type="text/css" href="themes/twitter.css">
  			

下載 & 安裝

方式 1：通過bower安裝：

$ bower install sweetalert

方式 2：通過NPM安裝：

$ npm install sweetalert

方式 3：下載sweetAlert的CSS和JavaScript文件。

下載文件

1. 引用必要的文件初始化插件：

   				<script src="dist/sweetalert.min.js"></script> 
   				<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
   			

2. 頁面加載完成后調用sweetAlert函數

   				swal({ 
   				  title: "Error!", 
   				  text: "Here's my error message!",
   				  type: "error", 
   				  confirmButtonText: "Cool" 
   				});
   			

配置

你可以使用這些參數，通過一個對象傳入到sweetAlert中：

參數	默認值	描述
title	null (required)	彈窗的標題。可以通過對象的”title”屬性或第一個參數進行傳遞。
text	null	彈窗的描述。可以通過對象的”text”屬性或第二個參數進行傳遞。
type	null	彈窗的類型。SweetAlert有四個內置類型，可以展示相應的圖標動畫: "warning","error", "success" and "info"。你也可以設置為"input"類型變成輸入彈窗。可以通過對象的”type”屬性或第三個參數進行傳遞。
allowEscapeKey	true	如果設置為true，用戶可以通過按下Escape鍵關閉彈窗。
customClass	null	彈窗的自定義樣式，可以通過對象的"customClass"屬性進行添加。
allowOutsideClick	false	如果設置為true，用戶點擊彈窗外部可關閉彈窗。
showCancelButton	false	如果設置為true，“取消”按鈕將會顯示，用戶點擊取消按鈕會關閉彈窗。
showConfirmButton	true	如果設置為false，“確認”按鈕將會隱藏。為了良好的用戶體驗，最好你設置了定時關閉或者allowOutsideClick為true時才將該參數設置為false。
confirmButtonText	"OK"	使用該參數來修改“確認”按鈕的顯示文本。如果showCancelButton設置為true，確定按鈕的顯示文本將會自動使用“Confirm”而不是“OK”。
confirmButtonColor	"#AEDEF4"	使用該參數來修改“確認”按鈕的背景顏色（必須是十六進制值）。
cancelButtonText	"Cancel"	使用該參數來修改“取消”按鈕的顯示文本。
closeOnConfirm	true	設置為false，用戶點擊“確認”按鈕后，彈窗會繼續保持打開狀態。如果點擊“確認”按鈕后需要打開另一個SweetAlert彈窗，這是非常有用的。
closeOnCancel	true	這和closeOnConfirm的功能相似，只不過這個是“取消”按鈕。
imageUrl	null	為彈窗添加一個自定義的圖標。這個參數是一個字符串圖片路徑。
imageSize	"80x80"	如果設置了imageUrl，你可以使用像素（px）指定圖片大小來描述你想要多大的圖標。在一個字符串中使用“x”來分割兩個值，第一個值是寬度，第二值是高度。
timer	null	自動關閉彈窗的定時器。單位為毫秒（ms）。
html	false	如果你設置為true，參數title和參數text的值將會被html解析顯示而不是純文本。（如果你擔心被XSS攻擊那就設置為false。）
animation	true	如果設置為false, 彈窗的動畫將會被禁用。其它字符串值：pop(這是animation設置為true時的默認值), slide-from-top, slide-from-bottom
inputType	"text"	當使用type: "input"時，該參數用來改變輸入的類型(例如：如果你想讓用戶輸入密碼，這可能是有用的)。
inputPlaceholder	null	當使用輸入類型時，你可以使用placeholder來幫助用戶明白應該輸入什么內容。
inputValue	null	當使用type: "input"時，你希望在輸入前展示默認值時，可以指定一個默認值。
showLoaderOnConfirm	false	設置為true，當處於加載時會禁用確認按鈕並顯示為加載樣式。

方法

SweetAlert還帶有一些簡單的方法，你可以調用它們：

方法	示例	描述
setDefaults	swal.setDefaults({ confirmButtonColor: '#0000' });	當調用SweetAlert時，如果你使用很多相同的設置，您可以在程序的開始使用setDefaults設置它們！
close	swal.close();	通過編程的方式將當前打開的SweetAlert彈窗關閉。
showInputError	swal.showInputError("Invalid email!");	如果用戶輸入的數據是錯誤的，在驗證輸入字段后會顯示一個錯誤的信息。
enableButtons, disableButtons	swal.disableButtons();	禁用或啟用用戶點擊取消按鈕和確認按鈕。

 

原文來自於http://mishengqiang.com/sweetalert/