140.sweetalert提示框用法講解 · Flask notebook

### 1.相關鏈接 SweetAlert中文文檔:[http://mishengqiang.com/sweetalert/](http://mishengqiang.com/sweetalert/) 官方文檔:[https://sweetalert.js.org/docs/](https://sweetalert.js.org/docs/) ### 2.實例: 封裝sweetalert xtalert.js ``` /** * Created by Administrator on 2016/12/14. */ var xtalert = { /* 功能：提示錯誤參數： - msg：提示的內容（可選） */ 'alertError': function (msg) { swal('提示',msg,'error'); }, /* 功能：信息提示參數： - msg：提示的內容（可選） */ 'alertInfo':function (msg) { swal('提示',msg,'warning'); }, /* 功能：可以自定義標題的信息提示參數： - msg：提示的內容（可選） */ 'alertInfoWithTitle': function (title,msg) { swal(title,msg); }, /* 功能：成功的提示參數： - msg：提示的內容（必須） - confirmCallback：確認按鈕的執行事件（可選） */ 'alertSuccess':function (msg,confirmCallback) { args = { 'title': '提示', 'text': msg, 'type': 'success', } swal(args,confirmCallback); }, /* 功能：帶有標題的成功提示參數： - title：提示框的標題（必須） - msg：提示的內容（必須） */ 'alertSuccessWithTitle':function (title,msg) { swal(title,msg,'success'); }, /* 功能：確認提示參數：字典的形式 - title：提示框標題（可選） - type：提示框的類型（可選） - confirmText：確認按鈕文本（可選） - cancelText：取消按鈕文本（可選） - msg：提示框內容（必須） - confirmCallback：確認按鈕點擊回調（可選） - cancelCallback：取消按鈕點擊回調（可選） */ 'alertConfirm':function (params) { swal({ 'title': params['title'] ? params['title'] : '提示', 'showCancelButton': true, 'showConfirmButton': true, 'type': params['type'] ? params['type'] : '', 'confirmButtonText': params['confirmText'] ? params['confirmText'] : '確定', 'cancelButtonText': params['cancelText'] ? params['cancelText'] : '取消', 'text': params['msg'] ? params['msg'] : '' },function (isConfirm) { if(isConfirm){ if(params['confirmCallback']){ params['confirmCallback'](); } }else{ if(params['cancelCallback']){ params['cancelCallback'](); } } }); }, /* 功能：帶有一個輸入框的提示參數：字典的形式 - title：提示框的標題（可選） - text：提示框的內容（可選） - placeholder：輸入框的占位文字（可選） - confirmText：確認按鈕文字（可選） - cancelText：取消按鈕文字（可選） - confirmCallback：確認后的執行事件 */ 'alertOneInput': function (params) { swal({ 'title': params['title'] ? params['title'] : '請輸入', 'text': params['text'] ? params['text'] : '', 'type':'input', 'showCancelButton': true, 'animation': 'slide-from-top', 'closeOnConfirm': false, 'showLoaderOnConfirm': true, 'inputPlaceholder': params['placeholder'] ? params['placeholder'] : '', 'confirmButtonText': params['confirmText'] ? params['confirmText'] : '確定', 'cancelButtonText': params['cancelText'] ? params['cancelText'] : '取消', },function (inputValue) { if(inputValue === false) return false; if(inputValue === ''){ swal.showInputError('輸入框不能為空！'); return false; } if(params['confirmCallback']){ params['confirmCallback'](inputValue); } }); }, /* 功能：網絡錯誤提示參數：無 */ 'alertNetworkError':function () { this.alertErrorToast('網絡錯誤'); }, /* 功能：信息toast提示（1s后消失）參數： - msg：提示消息 */ 'alertInfoToast':function (msg) { this.alertToast(msg,'info'); }, /* 功能：錯誤toast提示（1s后消失）參數： - msg：提示消息 */ 'alertErrorToast':function (msg) { this.alertToast(msg,'error'); }, /* 功能：成功toast提示（1s后消失）參數： - msg：提示消息 */ 'alertSuccessToast':function (msg) { if(!msg){msg = '成功！';} this.alertToast(msg,'success'); }, /* 功能：彈出toast（1s后消失）參數： - msg：提示消息 - type：toast的類型 */ 'alertToast':function (msg,type) { swal({ 'title': msg, 'text': '', 'type': type, 'showCancelButton': false, 'showConfirmButton': false, 'timer': 1000, }); }, // 關閉當前對話框 'close': function () { swal.close(); } }; ``` index.html ``` <!DOCTYPE html> <html> <head> <title>sweetalert用法</title> <link rel="stylesheet" href="sweetalert/sweetalert.css"/> <script src="sweetalert/sweetalert.min.js"></script> <script type="text/javascript" src="sweetalert/xtalert.js"></script> </head> <body> <button id="btn1">錯誤提示</button> <script type="text/javascript"> var btn = document.getElementById("btn1"); btn.onclick = function(){ xtalert.alertError("不能刪除板塊") } </script> <button id="btn2">消息提示</button> <script type="text/javascript"> var btn = document.getElementById("btn2"); btn.onclick = function(){ xtalert.alertInfo("當前用戶沒有權限") } </script> <button id="btn3">成功提示</button> <script type="text/javascript"> var btn = document.getElementById("btn3"); btn.onclick = function(){ xtalert.alertSuccess("發表成功") } </script> <button id="btn4">成功提示</button> <script type="text/javascript"> var btn = document.getElementById("btn4"); btn.onclick = function(){ xtalert.alertConfirm({ "confirmText":"再發一篇", "cancelText":"回到首頁", "text":"文章發表成功", "confirmCallback":function(){ alert("點擊了確認按鈕") }, "cancelCallback":function(){ alert("點擊了取消按鈕") } }) } </script> <button id="btn5">輸入框</button> <script type="text/javascript"> var btn = document.getElementById("btn5"); btn.onclick = function(){ xtalert.alertOneInput({ 'title':"提示(輸入)", "text":"添加新版塊", "placeholder":"輸入版塊名稱", "confirmText":"確認", "cancelText":"取消", "confirmCallback":function(inputValue){ alert("輸入了"+inputValue) } }) } </script> <button id="btn6">提示框</button> <script type="text/javascript"> var btn = document.getElementById("btn6"); btn.onclick = function(){ xtalert.alertSuccessToast("修改成功") } </script> </body> </html> ```