提示框插件SweetAlert
SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框,
它将提示框进行了美化,并且允许自定义,
支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。
准备工作
首先我们必须将SweetAlert插件的js文件和css文件引入到页面中。
<script src="sweetalert.min.js"></script>
<link rel="stylesheet" href="sweetalert.css">
本文结合的实例中使用了jQuery库,所以jQuery库文件也要引入。
基本使用
在页面中需要调用弹出提示框的的元素上绑定一句话,如点击一个按钮弹出:
$("button").click(function(){
swal("这是一个信息提示框!");
});
确认提示
我们在操作删除等危险操作时,一般在删除之前会弹出一个确认提示框,如同javascript的confirm()函数,当点击确认按钮后,再进行下一步真正的删除操作。
$("button").click(function(){
swal({
title: "您确定要删除吗?",
text: "您确定要删除这条数据?",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
confirmButtonText: "是的,我要删除",
confirmButtonColor: "#ec6c62"
}, function() {
$.ajax({
url: "do.php",
type: "DELETE"
}).done(function(data) {
swal("操作成功!", "已成功删除数据!", "success");
}).error(function(data) {
swal("OMG", "删除操作失败了!", "error");
});
});
});
上面的实例代码实现了一个确认删除数据的过程。点击按钮后,弹出提示框,要求用户确认,如果点了确认,则会向后台do.php发送ajax请求,那么do.php就进行对应的数据删除操作,删除后会返回data给前端页面,js根据返回的数据来提示用户操作结果信息。点击这里看演示。
选项设置
SweetAlert插件提供了很多选项设置,可以通过自定义很多属性参数等信息来满足项目开发需求。
title:提示框标题。
text:提示内容。
type:提示类型,有:success(成功),error(错误),warning(警告),input(输入)。
showCancelButton:是否显示“取消”按钮。
animation:提示框弹出时的动画效果,如slide-from-top(从顶部滑下)等。
html:是否支持html内容。
timer:设置自动关闭提示框时间(毫秒)。
showConfirmButton:是否显示确定按钮。
confirmButtonText:定义确定按钮文本内容。
imageUrl:定义弹出框中的图片地址。
更多有关SweetAlert插件的信息可以访问项目网址:https://github.com/t4t5/sweetalert。
最新文章
- C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 所有的基础数据都可以恢复删除
- CSS学习总结(三)
- IOS开发证书显示“此证书的签发者无效”解决方法
- SQLServer(MSSQL)、MySQL、SQLite、Access相互迁移转换工具 DB2DB v1.0
- delphi对象赋值
- OpenStack Keystone安装部署流程
- 为Windows 8新建工具栏模拟“开始菜单”
- Spark朴素贝叶斯(naiveBayes)
- JSON对象末尾多余逗号问题
- 解决ie8不兼容jquery trim问题
- C#中泛型默认关键字(default)详解
- 联想笔记本电脑 Z500除尘过程
- 《全栈营销之如何制作个人博客》之二:php环境安装及个人博客后台搭建 让你的博客跑起来
- [Swift]LeetCode886. 可能的二分法 | Possible Bipartition
- SQLServer之删除索引
- SpringBoot集成Jasypt安全框架,配置文件内容加密
- Latest China Scam: I&#39;ve Been Arrested in the Brothel Crackdown!
- Can&#39;t locate Data/Dumper.pm in perl5的处理
- Keepalived系列一:安装Keepalived
- layer mobile 指定URL连接 弹全屏
热门文章
- ALSA音频工具amixer,aplay,arecord
- JavaScript关闭浏览器
- 关于String字符串反转
- WCF方式调用asmx设置cookie
- UVa 11488 - Hyper Prefix Sets
- [Effective Modern C++] Item 4. Know how to view deduced types - 知道如何看待推断出的类型
- Android 获取图片真实宽高
- Flask把变量注册到模板中
- linux shell if语句
- Java Script 中 ==(Equal) 和 === (Identity Equal) 的区别和比较算法逻辑