SweetAlert的入門

本文轉載自查看原文 2019-03-22 11:33 1282

在做后台管理系統，在用戶交互這塊（彈窗、提示相關），用了一款還不錯的插件SweetAlert(一款原生js提示框,允許自定義，支持設置提示框標題、提示類型、確認取消按鈕文本、點擊后回調函數等等), 效果挺好的，簡單寫一下用法。
把大象裝冰箱，總共分三步:

第一步：下載（引用）
有三種方式可供選擇：
1.通過bower安裝：

$ bower install sweetalert

2.通過npm安裝

$ npm install sweetalert

3.我用的是最簡單粗暴的方式3：

下載sweetAlert的CSS和JavaScript文件。地址點我
從github上拿下來的sweetalert-master是有帶例子的，我們只需要其中兩個文件：
dist下的sweetalert.min.js和sweetalert.css（下面引用路徑是我自己的）。

帶有文字的標題：<button id="demo2">試一試</button> <br />

成功提示：<button id="demo3">試一試</button> <br />

帶有“確認”按鈕的功能的警告消息：<button id="demo4">試一試</button> <br />

通過傳遞參數，您可以執行一些其他的事情比如“取消”。：<button id="demo5">試一試</button> <br />

一個有自定義圖標的消息：<button id="demo6">試一試</button> <br />

自定義HTML信息：<button id="demo7">試一試</button> <br />

自動關閉模態框：<button id="demo8">試一試</button> <br />

更換“提示”功能: <button id="demo9">試一試</button> <br />

使用加載程序（例如，用於AJAX請求）: <button id="demo10">試一試</button> <br />

js代碼(原諒我可恥的用了原生)：

  1 document.getElementById("demo1").onclick = function() {
  2 swal("這是一個信息提示框!")
  3 };
  4 
  5 document.getElementById("demo2").onclick = function() {
  6 swal("這是一個信息提示框!", "很漂亮，不是嗎？")
  7 };
  8 
  9 document.getElementById("demo3").onclick = function() {
 10 swal("干得好", "你點擊了按鈕!", "success")
 11 };
 12 
 13 document.getElementById("demo4").onclick = function() {
 14 swal({
 15 title: "你確定？",
 16 text: "您將無法恢復這個虛構的文件！",
 17 type: "warning",
 18 showCancelButton: true,
 19 confirmButtonColor: "#DD6B55",
 20 confirmButtonText: "是的，刪除！",
 21 closeOnConfirm: false
 22 }, function() {
 23 swal("刪除!", "您的虛構文件已被刪除！", "success")
 24 })
 25 };
 26 
 27 document.getElementById("demo5").onclick = function() {
 28 swal({
 29 title: "你確定？",
 30 text: "您將無法恢復這個虛構的文件！",
 31 type: "warning",
 32 showCancelButton: true,
 33 confirmButtonColor: "#DD6B55",
 34 confirmButtonText: "是的，刪除！",
 35 cancelButtonText: "不，取消",
 36 closeOnConfirm: false,
 37 closeOnCancel: false
 38 }, function(isConfirm) {
 39 if (isConfirm) {
 40 swal("刪除!", "您的虛構文件已被刪除！", "success") 
 41 } else{
 42 swal("取消!", "您的虛構文件是安全的！", "error")
 43 }
 44 })
 45 };
 46 
 47 document.getElementById("demo6").onclick = function() {
 48 swal({
 49 title: "Sweet!",
 50 text: "這里是自定義圖像!",
 51 imageUrl: "img/thumbs-up.jpg"
 52 })
 53 };
 54 
 55 document.getElementById("demo7").onclick = function() {
 56 swal({
 57 title: "HTML <small>標題</small>!",
 58 text: "A custom <span style='color:pink'>html<span> message.",
 59 html:　true
 60 })
 61 };
 62 
 63 document.getElementById("demo8").onclick = function() {
 64 swal({
 65 title: "自動關閉警報!",
 66 text: "2秒后自動關閉",
 67 timer: 2000,
 68 showConfirmButton: false
 69 })
 70 };
 71 
 72 document.getElementById("demo9").onclick = function() {
 73 swal({
 74 title: "請輸入！",
 75 text: "填寫一些信息",
 76 type: "input",
 77 showCancelButton: true,
 78 closeOnConfirm: false,
 79 animation: "slide-from-top",
 80 inputPlaceholder: "請輸入..."
 81 }, function(inputValue) {
 82 if (inputValue === false) {
 83 return false;
 84 }
 85 if (inputValue === "") {
 86 swal.showInputError("內容不能為空！");
 87 return false;
 88 }
 89 
 90 swal("Nice!", "你輸入的是：" + inputValue, "success")
 91 })
 92 };
 93 
 94 document.getElementById("demo10").onclick = function() {
 95 swal({
 96 title: "AJAX請求實例",
 97 text: "提交運行Ajax請求",
 98 type: "info",
 99 showCancelButton: true,
100 closeOnConfirm: false,
101 showLoaderOnConfirm: true
102 }, function() {
103 setTimeout(function() {
104 swal("AJAX請求完成！");
105 }, 2000)
106 })
107 };

下面說一些可能會頻繁使用的配置項：

好啦，就這樣吧。其實sweetalert2也已經出了，支持響應式，功能也更加強大，但本着夠用就好的原則，還是先用的第一版。

參考：
源地址：http://t4t5.github.io/sweetalert/

中文：http://mishengqiang.com/sweetalert/

github地址：https://github.com/t4t5/sweetalert

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 SweetAlert SweetAlert詳解 SweetAlert的使用 sweetalert的使用 sweetAlert彈窗 sweetalert彈窗的使用 SweetAlert2 使用教程 SweetAlert2 使用教程 SweetAlert（彈出層插件） sweetalert api文檔