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中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery实现聊天对话框
Feb 08 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
对Session和Cookie的区分与解释
2007/03/16 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
用Python编程实现语音控制电脑
2014/04/01 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
python系列 文件操作的代码
2019/10/06 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
Python修改DBF文件指定列
2020/12/19 Python
彩色的非洲教学反思
2014/02/18 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
宿舍标语大全
2014/06/19 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
学生检讨书范文
2019/06/24 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
php+laravel 扫码二维码签到功能
2021/05/15 PHP
如何通过cmd 连接阿里云服务器
2022/04/18 Servers