jQuery提示框插件SweetAlert用法分析


Posted in jQuery onAugust 05, 2019

本文实例讲述了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.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jquery实现上传图片功能
Jun 29 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 #jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 #jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 #jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 #jQuery
jQuery中DOM常见操作实例小结
Aug 01 #jQuery
jQuery中DOM操作原则实例分析
Aug 01 #jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 #jQuery
You might like
PHP 高手之路(三)
2006/10/09 PHP
php 高性能书写
2010/12/11 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
python实现感知机模型的示例
2020/09/30 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
Eclipse面试题
2014/03/22 面试题
师范生实习个人的自我评价
2013/09/28 职场文书
大学生军训自我评价分享
2013/11/09 职场文书
大学生职业生涯设计书
2014/01/02 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
法人委托书的范本格式
2014/09/11 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
大学生助学金感谢信
2015/01/21 职场文书
幼师大班个人总结
2015/02/13 职场文书
Linux安装Docker详细教程
2022/07/07 Servers