夏日博客

A-A+

jquery 提示框插件SweetAlert的使用例子

2016年01月11日 前端设计 暂无评论 阅读 7 views 次

提示框最简单的就是alert了，这种弹出现在还在应用但要讲究漂亮的话估计都使用插件去了，今天我们来看一个jquery 提示框插件SweetAlert使用教程。

SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框，它将提示框进行了美化，并且允许自定义，支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。

jquery 提示框插件SweetAlert的使用例子

准备工作:

首先我们必须将SweetAlert插件的js文件和css文件引入到页面中。

  1. <script src="sweetalert.min.js"></script>   
  2. <link rel="stylesheet" href="sweetalert.css">  

本文结合的实例中使用了jQuery库，所以jQuery库文件也要引入。

基本使用:

在页面中需要调用弹出提示框的的元素上绑定一句话，如点击一个按钮弹出：

  1. $("button").click(function(){   
  2.     swal("这是一个信息提示框!");   
  3. });  

确认提示:

我们在操作删除等危险操作时，一般在删除之前会弹出一个确认提示框，如同javascript的confirm()函数，当点击确认按钮后，再进行下一步真正的删除操作。

  1. $("button").click(function(){   
  2.     swal({   
  3.         title: "您确定要删除吗？",    
  4.         text: "您确定要删除这条数据？",    
  5.         type: "warning",   
  6.         showCancelButton: true,   
  7.         closeOnConfirm: false,   
  8.         confirmButtonText: "是的，我要删除",   
  9.         confirmButtonColor: "#ec6c62"   
  10.     }, function() {   
  11.         $.ajax({   
  12.             url: "do.php",   
  13.             type: "DELETE"   
  14.         }).done(function(data) {   
  15.             swal("操作成功!", "已成功删除数据！", "success");   
  16.         }).error(function(data) {   
  17.             swal("OMG", "删除操作失败了!", "error");   
  18.         });   
  19.     });   
  20. });  

上面的实例代码实现了一个确认删除数据的过程。点击按钮后，弹出提示框，要求用户确认，如果点了确认，则会向后台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。

标签：

给我留言