sweetalert插件的使用
2024-06-30 06:24:03
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 ...
最新文章
- 睡眠不足，记忆力还有救吗？Nature：饿着
- Ubuntu Linux 下优化 swap 交换分区及调整swap大小
- L1-018 大笨钟
- 理解PeopleSoft集成代理（Integration Broker）-第1部分
- 转:万字总结：学习MySQL优化原理，这一篇就够了！
- 第四届蓝桥杯省赛javaB组试题解析
- C语言经典算法100例-037-给10个数排序
- sourcetree打开快捷_Sourcetree使用：拉取打开项目的步骤
- css div设置inline-block后 div顶部对齐
- C语言中总是从main函数开始执行函数吗？
- ssms应用程序错误_来自应用程序的查询计划与SSMS不同时的性能故障排除
- 使用zabbix监控MongoDB
- svnsync 服务器代码备份
- 关于android的apk版本升级的一些建议
- PAIP.ecshop file_put_contents Warning notice解决方法
- uniapp-mixpanel用户行为分析埋点统计插件
- 【高并发】解密导致并发问题的第二个幕后黑手——原子性问题（文末有福利）
- 崩坏3服务器维护2月8号,崩坏38月2日版本更新维护通知_游戏堡
- Imperva WAF使用笔记
- 梦幻柔焦（奥顿效果）