zoukankan      html  css  js  c++  java
  • 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")

    效果如下:

  • 相关阅读:
    webService基本概念、元素及简单编码实现
    云服务器、vps、虚拟主机的区别
    SOAP和WSDL的一些必要知识
    密码学基础
    oracle执行计划
    dubbo学习笔记:快速搭建
    dubbo和zookeeper的关系
    查看wifi密码
    自动保存图表
    自定义颜色
  • 原文地址:https://www.cnblogs.com/wyb666/p/9688826.html
Copyright © 2011-2022 走看看