sweetalert插件使用

內容：

1.插件介紹

2.插件使用

 

 

1.插件介紹

SweetAlert是一個JS插件，可以完美替代JS自帶的alert彈出框，而且功能強大，設計優美

使用這個很方便，推薦使用這個插件來寫alert

sweetalert插件下載：https://github.com/lipis/bootstrap-sweetalert

官方教程：https://sweetalert.js.org/guides/

 

 

2.插件使用

下面是使用sweetalert的一個實例：

HTML：

 1 <div class="container">
 2     <div class="panel panel-primary">
 3         <div class="panel-heading">
 4             <h3 class="panel-title">用戶管理</h3>
 5         </div>
 6         <div class="panel-body">
 7             <table class="table table-bordered">
 8                 <thead>
 9                 <tr>
10                     <th>序號</th>
11                     <th>id</th>
12                     <th>name</th>
13                     <th>age</th>
14                     <th>生日</th>
15                     <th>操做</th>
16                 </tr>
17                 </thead>
18                 <tbody>
19                 {% for p in persons %}
20                     <tr>
21                         <td>{{ forloop.counter }}</td>
22                         <td>{{ p.id }}</td>
23                         <td>{{ p.name }}</td>
24                         <td>{{ p.age }}</td>
25                         <td>{{ p.birthday|date:'Y-m-d' }}</td>
26                         <td>
27                             <button class="btn btn-danger del"><i class="fa fa-trash-o">刪除</i></button>
28                         </td>
29                     </tr>
30                 {% endfor %}
31 
32                 </tbody>
33             </table>
34         </div>
35     </div>
36 </div>

注：前端使用了bootstrap框架

 

js：

 1 $(".btn-danger").on("click", function () {
 2   swal({
 3     title: "肯定要刪除嗎？",
 4     text: "刪除就沒法找回",
 5     type: "warning",
 6     showCancelButton: true,
 7     confirmButtonClass: "btn-danger",
 8     confirmButtonText: "確認",
 9     cancelButtonText: "取消",
10     closeOnConfirm: false
11     },
12     function () {
13       var deleteId = $(this).parent().parent().attr("data_id");
14       $.ajax({
15         url: "/delete_book/",
16         type: "post",
17         data: {"id": deleteId},
18         success: function (data) {
19           if (data.status === 1) {
20             swal("刪除成功!", "你能夠跑路了！", "success");
21           } else {
22             swal("刪除失敗", "你能夠再嘗試一下！", "error")
23           }
24         }
25       })
26     });
27 })

注：

swal使用以下：

1 // swal是調用彈出框，有以下幾種調用方式:
2 swal("標題")
3 swal("標題", "內容")
4 swal("標題", "內容", "success")
5 swal("標題", "內容", "warning")
6 swal("標題", "內容", "info")
7 swal("標題", "內容", "error")

 

效果以下：