插件1-前端-sweetalert

一、说明
1.实现功能:美化alert窗口
2.下载地址:https://github.com/lipis/bootstrap-sweetalert
3.实例代码:https://lipis.github.io/bootstrap-sweetalert/
4.实现效果在实例代码中可以看见,上面两张图也是.

二、在Django中使用
1.在static目录下的任意文件夹内引入 sweetalert.css 和 sweetalert.min.js 这两个文件
2.在html中引用上面两个资源文件:(下面代码多余的可以去掉,只要两个)

    <script type="text/javascript" src="{% static 'common/jquery/jquery-3.3.1.js' %}"></script>
    <script type="text/javascript" src="{% static 'common/bootstrap/js/bootstrap.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'common/sweetalert/sweetalert.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'blog/js/fi.js' %}"></script>
    <script type="text/javascript" src="{% static 'tiny_mce/tiny_mce.js' %}"></script>

    <link rel="stylesheet" href=" {% static 'common/bootstrap/css/bootstrap.min.css' %} " />
    <link rel="stylesheet" href=" {% static 'common/sweetalert/sweetalert.css' %} " />
    <link rel="stylesheet" href=" {% static 'common/fontawesome/css/font-awesome.min.css' %} " />

3.在js代码的适当位置引用sweetalert的swal方法

            $(".del").click(function(){
                var $trEle =$(this).parent().parent();
                var delId = $trEle.children().eq(0).text();
                console.warn($(this).parent().parent());
                swal({
                  title: "确定删除吗?",
                  text: "操作不可逆!",
                  type: "warning",
                  showCancelButton: true,
                  confirmButtonClass: "btn-danger",
                  confirmButtonText: "再次确认!",
                  cancelButtonText:"取消",
                  closeOnConfirm: false
                },
                function(){
                  $.ajax({
                    url:"delPerson/",
                    type:"POST",
                    data:{"delId":delId,"csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()},
                    success:function(arg){
                        swal(arg, "此条记录已经删除.", "success");
                        $trEle.remove();
                    }
                  });

                });
            });

这里的代码流程是：
a.找到某个删除按钮，当它点击的时候,弹出sweetalert框，让你再次确认.
b.确认之后发送Ajax请求，用POST方式提交，参数里面设置了csrf标识，取消不进行任何其它操作。
c.内部数据删除之后，返回一个删除成功的页面，在html上面利用js代码删除当按钮所在的行。
4.注意事项
a.ajax请求里不要放dataType，否则删除成功后无法弹出界面

插件1-前端-sweetalert

猜你喜欢