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实现前端分页功能
Mar 23 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 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
神族 Protoss 历史背景
2020/03/14 星际争霸
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
PHP 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
编写Python的web框架中的Model的教程
2015/04/29 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
python剪切视频与合并视频的实现
2020/03/03 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
汽车运用工程毕业生自荐信
2013/10/29 职场文书
社会实践活动总结范文
2014/07/03 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
自我检讨报告
2015/01/28 职场文书
投标邀请书范本
2015/02/02 职场文书
运动会通讯稿600字
2015/07/20 职场文书
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏
Python中time标准库的使用教程
2022/04/13 Python
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python