DDR爱好者之家

jQuery提示框插件SweetAlert用法分析
站长资源 2024/4/23 佚名
76 1538
DDR爱好者之家 Design By 杰米

本文实例讲述了jQuery提示框插件SweetAlert用法。分享给大家供大家参考，具体如下：

SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框，

它将提示框进行了美化，并且允许自定义，

支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。

准备工作

首先我们必须将SweetAlert插件的js文件和css文件引入到页面中。

<script src="/UploadFiles/2021-04-02/sweetalert.min.js">


本文结合的实例中使用了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常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》


希望本文所述对大家jQuery程序设计有所帮助。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
DDR爱好者之家 Design By 杰米