django使用sweetalert并配置静态文件

在页面上使用二次确认等弹窗可能会用到sweetalert等。那么在django中如何在静态文件配置sweetalert呢?
1.创建文件夹和下载文件
在django根目录文件夹下创建static文件夹。
下载sweetalert文件,并拷贝到static文件夹中。有基础组件下载地址https://github.com/KINGMJ/sweetalert-demo。
或者去sweetalert中文网下载所有文件下载地址https://www.sweetalert.cn/docs.html
。这里我们下载基础组件并复制于static文件夹中,文件路径如图所示在这里插入图片描述
2.配置静态文件
在settings.py文件夹下面添加如下代码,如图所示

STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'static')  
]

在这里插入图片描述
3.在HTML文件中加入配置代码

{
    
    % load static %}
    <link rel="stylesheet" href="{% static 'sweetalert-demo/css/sweetalert.css' %}">
    <script src="{% static 'sweetalert-demo/js/sweetalert.min.js' %}"></script>

如图所示
在这里插入图片描述
4.然后就可以使用sweetalert了
可以自己编写代码或者从官网等位置复制粘贴模板并修改。
例如如下代码在js中绑定删除按钮的演示

   swal({
    
    
            title: "你确定删除吗?",
            text: "考虑清楚了吗,可能需要跑路",
            type: "warning",
            showCancelButton: true,
            confirmButtonClass:"btn-danger",
            confirmButtonText:"是的,本阁就要删",
            cancelButtonText: "算了算了",
            closeOnConfirm: false,
            closeOnCancel: false,
        },
            function (isConfirm) {
    
    
            if(isConfirm) {
    
    
                swal("删了!", "赶紧跑路吧", "success");
            }else {
    
    
                swal("怂了","明智的决定","error");
            }

在这里插入图片描述

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_45701131/article/details/108937527
今日推荐