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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jQuery实现鼠标滑动切换图片
May 27 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可变函数的经典用法
2013/06/20 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
Python continue语句用法实例
2014/03/11 Python
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
简化Python的Django框架代码的一些示例
2015/04/20 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
应届本科生推荐信范文
2013/12/25 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
推广普通话标语
2014/06/27 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
婚前协议书范本
2014/10/27 职场文书
大学入学感言
2015/08/01 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书