在页面上使用二次确认等弹窗可能会用到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");
}