sweetalert插件的使用
2024-05-01 01:31:48
sweetalert是一个漂亮的弹窗插件，使用它可以完成各种炫酷的弹窗效果
链接：sweetalert
实例
删除演示
urls.py
from django.contrib import admin
from django.urls import path
from app1 import viewsurlpatterns = [path('admin/', admin.site.urls),path('index/', views.index),
]views.py
def index(request):return render(request, 'index.html')
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>个人主页</title><script src="/static/js/jquery.js"></script><script src="/static/js/sweetalert-dev.js"></script><link rel="stylesheet" href="/static/css/sweetalert.css"></head>
<body><button class="btn">点我删除</button><script>$('.btn').on('click', function () {swal({//提示的标题title: '确定删除吗？',//提示的文本text: '你将无法恢复该文件',//类型：警告，还有success,error和infotype: 'warning',//显示取消按钮showCancelButton: true,//确认按钮颜色confirmButtonColor: '#DD6B55',//确认按钮内文本confirmButtonText: '确定删除',//取消按钮内文本cancelButtonText: '取消删除',closeOnConfirm: false,closeOnCancel: false,}, function (isConfirm) {if (isConfirm) {//点击确认按钮之后进行的操作，这里success不能改swal('删除', '你的文件已经被删除', 'success');} else {//点击取消按钮之后进行的操作，这里error不能改swal('取消', '你的文件是安全的', 'error');}})})
</script></body>
</html>
显示效果
删除表格
修改views，增加一个delete函数
def delete(request):if request.method == 'POST':response = {'"status': True}return HttpResponse(json.dumps(response))else:return HttpResponse('非法请求')修改index.html，定义一个table，模拟删除操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>个人主页</title><script src="/static/js/jquery.js"></script><script src="/static/js/sweetalert-dev.js"></script><link rel="stylesheet" href="/static/css/sweetalert.css"><link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"></head>
<body>{#<button class="btn">点我删除</button>#}{% csrf_token %}<div class="container"><div class="row"><div class="col-md-8 col-md-offset-2"><h3>数据展示</h3><table class="table table-hover table-bordered"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th><th>operation</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td>{# line_num自定义属性，方便获取序号 #}<td><input type="button" class="btn btn-danger" data-toggle="modal" line_num="1" value="delete"/></td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td><td><input type="button" class="btn btn-danger" data-toggle="modal" line_num="2" value="delete"/></td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td><td><input type="button" class="btn btn-danger" data-toggle="modal" line_num="3" value="delete"/></td></tr></tbody></table></div></div>
</div><script>$('.btn-danger').click(function () {let line_num = $(this).attr('line_num');//在ajax的回调函数的外面用一个变量记录下来，方便ajax的回调函数使用let _this = $(this); //选择删除的那一行let csrf = $("[name='csrfmiddlewaretoken']").val();swal({title: '亲，您确定删除吗？',text: '删除可就找不回来了哦！',//试一试不同type有何区别type: 'warning',showCancelButton: true,confirmButtonColor: '#ff0000',confirmButtonText: '确定',cancelButtonText: '取消',closeOnConfirm: false,closeOnCancel: false,}, function (isConfirm) {console.log(isConfirm);if (isConfirm) {$.ajax({url: '/delete/',type: 'post',data: {"id": line_num,csrfmiddlewaretoken: csrf,},success: function (data) {data = JSON.parse(data);if (data.status) {console.log(data.status);//第一个参数是title，第二个参数是text，第三个是typeswal('删除成功！', '记录已经被删除', 'success');//删除一行_this.parent().parent().remove();} else {swal('删除失败！', '删除失败，请重试!', 'error');//跳转首页{#window.location.href = '/index/';#}}}})} else {swal('取消！', '你的数据是安全的', 'error')}})})
</script></body>
</html>
小结
sweet语法
swal({参数1：值1，参数2：值2，}, function (isConfirm) {if (isConfirm) {swal(title, text, type);else {swal(title, text, type);
}
})参数说明
- title: 提示的标题
- text: 提示的文本
- type: 类型
- showCancelButton: 是否显示取消按钮
- confirmButtonColor：确认按钮颜色
- confirmButtonText： 确认按钮文本
- cancelButtonText： 取消按钮文本
- closeOnConfirm：点击确认之后是否自动关闭
- closeOnCancel：点击取消之后是否自动关闭
转载于:https://www.cnblogs.com/zzliu/p/10610789.html
sweetalert插件的使用相关推荐
- day 59Bootstrap自带图表和fontawesome图标 导航和导航条 Bootstrap常用插件 sweetalert插件介绍...
上课随笔 day591.前情回顾Bootstrap初识1. Bootstrap版本3.3.7生产环境版2. 目录结构css ../fonts/xx.xxfonts --> 必须存在并且和css文 ...
- SweetAlert 插件
SweetAlert 插件 安装 配置 方法 中文API 安装 1.通过bower安装 bower install sweetalert 2.通过NPM安装 npm install sweetaler ...
- SweetAlert插件 弹框插件
sweetalert是一个漂亮的弹窗 中文网址: http://mishengqiang.com/sweetalert/ 它需要2个文件:sweetalert-dev.js和sweetalert.cs ...
- swal - SweetAlert 插件基本使用
swal - SweetAlert:是 JS 原生 alert 弹窗的完美替代品 官网 <!DOCTYPE html> <html lang="en">&l ...
- sweetalert php,SweetAlert插件
用户 #姓名操作 {% for user in all_user %}{{ forloop.counter }}{{ user.username }} 编辑 删除 {% endfor %} var _ ...
- 漂亮实用的提示框插件SweetAlert
SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义,支持设置提示框标题.提示类型.内容展示图片.确认取消按钮文 ...
- 【分享】Web前端开发第三方插件大全
收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...
- ajax文件插件上传,7 款基于 JavaScript/AJAX 的文件上传插件
本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 具有多文件上传.拖 ...
- Admui相关第三方插件
ace 版本:1.2.3au 官网:https://github.com/ajaxorg/ace-builds/ 许可:BSD 依赖:无 DataAPI:data-pulgin="ace&q ...
最新文章
- SAP HUM 嵌套HU初探 II
- oracle 11gr2 bbed 安装,oracle11gR2 装配bbed工具
- 爬虫 404 try_和我一起学爬虫
- Core Data 和 sqlite3的性能对比【图】3gs,iPhone4,4s,5的性能测试。
- vscode之调试es6代码
- java panel画椭圆_如何在Java 2D中绘制椭圆？
- [转]十五天精通WCF——第七天 Close和Abort到底该怎么用才对得起观众
- NLP算法-词性标注
- 教程：GIMP中怎样移动选区
- C#获取字符串的拼音和首字母
- Gradually Vanishing Bridge for Adversarial Domain Adaptation（CVPR2020）笔记
- 2023年报考CSM敏捷教练认证好不好？含金量高吗？
- Riak - 安装运维篇（1）
- 多功能智能台灯(附源码)——用于参加课程设计，电子竞赛等
- Excel办公常用函数：6大类型，共计64个！
- can波特率及总线占有率计算
- BaiduPCS-Go 使用CMD命令行全速下载百度云
- ANS应用交付助力“武当派招生”
- 精彩回顾 |全栈人工智能、区块链等服务亮相2019华为云峰会香港站
- 如何将Excel表中一列数据的分子和分母分别存储