本文实例讲述了jQuery提示框插件SweetAlert用法。分享给大家供大家参考，具体如下：
SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框，
它将提示框进行了美化，并且允许自定义，
支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。
准备工作
首先我们必须将SweetAlert插件的js文件和css文件引入到页面中。
<script src="sweetalert.min.js"></script> <link rel="stylesheet" href="sweetalert.css" rel="external nofollow" >
本文结合的实例中使用了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插件的更多信息可以访问github项目网址：https://github.com/t4t5/sweetalert
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
- jQuery带箭头提示框tooltips插件集锦
- 编写自己的jQuery提示框（Tip）插件
- jquery SweetAlert插件实现响应式提示框
- 属于你的jQuery提示框（Tip）插件
- jquery插件珍藏(图片局部放大/信息提示框)
- jquery插件制作 提示框插件实现代码
- 基于jQuery Tipso插件实现消息提示框特效
- jQuery消息提示框插件Tipso
- jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
- Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
