SweetAlert插件 弹框插件
sweetalert是一个漂亮的弹窗
中文网址：
http://mishengqiang.com/sweetalert/
它需要2个文件：sweetalert-dev.js和sweetalert.css
下载插件
怎么下载呢？直接从上面的网站扣下来，就可以了
修改index.html，引入2个资源
<script src="http://mishengqiang.com/sweetalert/js/sweetalert-dev.js"></script>
<link rel="stylesheet" href="http://mishengqiang.com/sweetalert/css/sweetalert.css">
首页有一个删除还不错，直接贴过来即可！
index.html完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://mishengqiang.com/sweetalert/js/sweetalert-dev.js"></script>
<link rel="stylesheet" href="http://mishengqiang.com/sweetalert/css/sweetalert.css">
</head>
<body> <button class="btn2">click</button>
<script>
$(".btn2").click(function () {
//删除示例代码
swal({
title: "确定删除吗？",
text: "你将无法恢复该虚拟文件！",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "确定删除！",
cancelButtonText: "取消删除！",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
swal("删除！", "你的虚拟文件已经被删除。",
"success");
} else {
swal("取消！", "你的虚拟文件是安全的:)",
"error");
}
}); });
</script>
</body>
</html>
index.html
访问首页，点击click，效果如下：
表格删除一条记录
修改settings.py，开启csrf
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
修改views.py，修改ajax_handle视图函数，返回一个json
def ajax_handle(request):
if request.method == "POST":
print(request.POST)
#定义一个状态，假装删除成功了
response = {"state": True}
return HttpResponse(json.dumps(response)) # 返回json
else:
return HttpResponse("非法请求,必须是POST")
修改index.html，写一个table，模拟删除操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://mishengqiang.com/sweetalert/js/sweetalert-dev.js"></script>
<link rel="stylesheet" href="http://mishengqiang.com/sweetalert/css/sweetalert.css">
</head>
<body>
{% 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>
<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.btn-danger").click(function () {
var line_num = $(this).attr("line_num"); //一行数据的id值
var _this = $(this); //选择删除的那一行
var csrf = $("[name=csrfmiddlewaretoken]").val(); //获取csrf input的value值 swal({
title: "亲，您确定删除吗？",
text: "删除可就找不回来了哦！",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "确定删除！",
cancelButtonText: "取消删除！",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
$.ajax({
url: "/ajax_handle/",
type: "post",
data: {
'id': line_num,
csrfmiddlewaretoken: csrf,
},
success: function (data) {
var data = JSON.parse(data); //反序列化数据
if (data.state) { //判断json的状态
swal("删除成功！", "记录已经被删除。",
"success");
_this.parent().parent().remove(); //移除tr标签
} else {
swal("删除失败！", "删除失败，请重试!)",
"error");
window.location = "/index/"; //跳转首页
}
} });
} else {
swal("取消！", "你的数据是安全的:)",
"error");
}
}); });
</script>
</body>
</html>
注意：在input里面定义的line_num是一个自定义属性，属性名，可以随便。
删除一条记录，效果如下：
注意：页面并没有刷新。那么第2条记录，是如何没有的呢？是用DOM操作，删除掉的！
SweetAlert插件 弹框插件的更多相关文章
- 自己写的基于bootstrap风格的弹框插件
自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...
- vue项目中使用vue-layer弹框插件
vue-layer弹框插件 安装 npm i --save vue-layer 引用 import layer from 'vue-layer' Vue.prototype.$layer = lay ...
- 弹框插件self(动效兼容到IE9，功能兼容IE6)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- SweetAler弹框插件与分页器插件
目录 SweetAlert插件 自定义分页器 使用Django向数据库批量插入数据 自定义分页器的思路 自定义分页器组件 SweetAlert插件 sweetalert是一款基于Bootstrap的专 ...
- 自己写的jquery 弹框插件
html部分 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...
- jquery Dialog弹框插件
function Dialog(options) { var defaults = { // 默认值. title: '', // 标题文本,若不想显示title请通过CSS设置其display为no ...
- vue自定义插件-弹框
<template> <transition name="msgbox"> <div v-if="show" class=&quo ...
- jquery Dialog弹框插件使用
var dialog = new Dialog({ title: '购物车', type: 'url', width: 520, content: "Uplolo.aspx", s ...
- layer弹框插件使用
需要在jquery之后导入 <link rel="stylesheet" href="${pageContext.request.contextPath }/js/ ...
随机推荐
- 使用OpenGL绘制 shapefile文件 完成最基本的gis操作
主要内容概述 (视频教程已经发布:http://edu.csdn.net/course/detail/3422) (http://edu.csdn.net/course/detail/3420) 1. ...
- Java虚拟机（七）：JVM调优案列
Eclispe启动优化 概述 什么是jvm调优呢?jvm调优就是根据gc日志分析jvm内存分配.回收的情况来调整各区域内存比例或者gc回收的策略:更深一层就是根据dump出来的内存结构和线程栈来分析代 ...
- （转）linux内核调优参数对比和解释
[net] ######################## cat /proc/sys/net/ipv4/tcp_syncookies # 默认值:1 # 作用:是否打开SYN Cookie功能,该 ...
- dockerfile基础命令
一直想写一个, 但发现网上有很多了, 直接copy把 如何使用 Dockerfile用来创建一个自定义的image,包含了用户指定的软件依赖等.当前目录下包含Dockerfile,使用命令build来 ...
- MVC及MVC Core在filter中如何获取控制器名称和Action名称
很多时候我们需要使用过滤器来实现一些拦截.验证等行为,此时我们能获取到的Context是ActionExecutingContext ,我们如何通过这个Context来获得Action.Control ...
- springMVC中ModelAndView学写笔记
api介绍: 构造函数摘要 ModelAndView() bean样式用法的默认构造函数:填充bean属性,而不是传递构造函数参数. ModelAndView(Object vie ...
- HDU 1863 畅通工程（Prim算法求解MST）
题目: 省政府“畅通工程”的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只要能间接通过公路可达即可).经过调查评估,得到的统计表中列出了有可能建设公路的若干条道路的成本.现 ...
- python学习之参数传递
^参数传递分为定义(形参)和调用(实参)两种情况.^ 1. 定义(形参) 默认参数 def func(x, y=None): # 任何时候必须 优先定义 位置参数 # 默认参数和可变参数*args 顺 ...
- Winform 常用的方法
一,Winform 如何内嵌窗体 1,判断窗体中是否以还有内嵌窗体 private void ClosePreForm() { foreach (Control item in this.spCont ...
- input 控件监听回车确认按钮。
前端开发的同学捕捉回车按键经常会用到 if(event.keyCode == 13){ console.log("点击了回车按键");} 但是在微信上面,我们一般会用到指令 bin ...