簡要教程
SweetAlert是一款神奇的javascript彈出消息警告框插件。
來通過一張gif圖片看看SweetAlert的效果：
使用方法
要使用該插件，首先要在html的header中引入以下文件：（文件下載地址：http://files.cnblogs.com/files/wuxiang/sweetalter.zip）
<
script
src
=
"lib/sweet-alert.min.js"
></
script
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"lib/sweet-alert.css"
>
|
最基本的調用方法：
sweetAlert(
"Hello world!"
);
|
帶錯誤圖標的警告框：
sweetAlert(
"Oops..."
,
"Something went wrong!"
,
"error"
);
|
一個帶有確認按鈕的警告框，點擊確認按鈕可觸發動畫：
sweetAlert({
title:
"Are you sure?"
,
text:
"You will not be able to recover this imaginary file!"
,
type:
"warning"
,
showCancelButton:
true
,
confirmButtonColor:
"#DD6B55"
,
confirmButtonText:
"Yes, delete it!"
,
closeOnConfirm:
false
},
function
(){
swal(
"Deleted!"
,
"Your imaginary file has been deleted."
,
"success"
);
});
|
可用參數
| 參數 | 默認值 | 描述 |
| title | null(required) | 窗口的名稱。可以通過對象的"title"屬性或第一個參數進行傳遞。 |
| text | null | 窗口的描述。可以通過對象的"text"屬性或第二個參數進行傳遞。 |
| type | null | 窗口的類型。SweetAlert 有4種類型的圖標動畫："warning", "error", "success" 和 "info".可以將它放在"type"數組或通過第三個參數傳遞。 |
| allowOutsideClick | false | 如果設置為“true”，用戶可以通過點擊警告框以外的區域關閉警告框。 |
| showCancelButton | false | 如果設置為“true”，“cancel”按鈕將顯示，點擊可以關閉警告框。 |
| confirmButtonText | "OK" | 該參數用來改變確認按鈕上的文字。如果設置為"true"，那么確認按鈕將自動將"Confirm"替換為"OK"。 |
| confirmButtonColor | "#AEDEF4" | 該參數用來改變確認按鈕的背景顏色（必須是一個HEX值）。 |
| cancelButtonText | "Cancel" | 該參數用來改變取消按鈕的文字。 |
| closeOnConfirm | true | 如果希望以后點擊了確認按鈕后模態窗口仍然保留就設置為"false"。該參數在其他SweetAlert觸發確認按鈕事件時十分有用。 |
| imageUrl | null | 添加自定義圖片到警告框上。必須是圖片的完整路徑。 |
| imageSize | "80x80" | 當設定圖片的路徑后，你可以設定圖片的大小，格式為兩個數字中間帶個"x"符號。 |
| timer | null | 警告框自動關閉的時間。單位是ms。 |
更多關於SweetAlert的內容請參考：https://github.com/t4t5/sweetalert。
本文版權屬於jQuery之家，轉載請注明出處：http://www.htmleaf.com/jQuery/Lightbox-Dialog/20141218888.html