餐馆微信小程序转化成_jQuery提示框插件SweetAler

摘要: jQuery提醒框软件SweetAlert使用方法剖析 本文关键详细介绍了jQuery提醒框软件SweetAlert使用方法,融合案例方式剖析了SweetAlert提醒框软件基本要素、应用方式及配备项设定方式,必须的朋...

jQuery提示框插件SweetAlert用法分析       这篇文章主要介绍了jQuery提示框插件SweetAlert用法,结合实例形式分析了SweetAlert提示框插件基本功能、使用方法及配置项设置方法,需要的朋友可以参考下

本文实例讲述了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:提示类型,ess(成功),error(错误),warning(警告),input(输入)。

showCancelButton:是否显示“取消”按钮。

animation:提示框弹出时的动画效果,如slide-from-top(从顶部滑下)等。

html:是否支持html内容。

timer:设置自动关闭提示框时间(毫秒)。

showConfirmButton:是否显示确定按钮。

confirmButtonText:定义确定按钮文本内容。

imageUrl:定义弹出框中的图片地址。

SweetAlert插件的更多信息可以访问github项目网址:

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《》

希望本文所述对大家jQuery程序设计有所帮助。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:模板小程序