js-jquery-SweetAlert【一】使用
2023-09-14 09:08:49 时间
一、下载安装
地址:http://t4t5.github.io/sweetalert/
二、页面引用
<script src="dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
当然还有jquery
三、示例
3.1、基础结构
<link rel="stylesheet" type="text/css" href="sweetalert.css"> <script src="jquery.min.js"></script> <script src="sweetalert.min.js"></script> <script> window.onload=function(){ swal("Here's a message!");//以下代码主要修改这里 } </script>
3.2、精简用法
1、标题【alert】-swal(string)
swal("Here's a message!")
2、标题和描述【alert】-swal(string,string)
swal("Title","des")
3.标题、描述、成功【alert】-swal(string,string,string)
swal("Good job!", "You clicked the button!", "success")
3.2、标准用法
4、确认框【confirm】-swal(object)
swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, closeOnConfirm: false });
其他参数见下表备注
5、确认框【confirm】-swal(object,function())
swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!", closeOnConfirm: false }, function(){ swal("Deleted!", "Your imaginary file has been deleted.", "success"); });
6、确认框【confirm】-swal(object,function(parameter))
参数含义:是否确认isConfirm
swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!", cancelButtonText: "No, cancel plx!", closeOnConfirm: false, closeOnCancel: false }, function(isConfirm){ if (isConfirm) { swal("Deleted!", "Your imaginary file has been deleted.", "success"); } else { swal("Cancelled", "Your imaginary file is safe :)", "error"); } });
3.4、确认输出框
7、确认输出框确认框【confirm】-swal(object,function(parameter))
注意:type:input
swal({ title: "An input!", text: "Write something interesting:", type: "input", showCancelButton: true, closeOnConfirm: false, animation: "slide-from-top", inputPlaceholder: "Write something" }, function (inputValue) { if (inputValue === false) return false; if (inputValue === "") { swal.showInputError("You need to write something!"); return false } swal("Nice!", "You wrote: " + inputValue, "success"); });
3.5、ajax
8、ajax请求
swal({ title: "Ajax request example", text: "Submit to run ajax request", type: "info", showCancelButton: true, closeOnConfirm: false, showLoaderOnConfirm: true, }, function () { setTimeout(function () { swal("Ajax request finished!"); }, 2000); });
相关文章
- html js 全局 变量,JS定义全局变量
- 利用Jquery Lazyload JS插件实现网页图片延迟加载
- 引入JS文件和JQuery
- js,jquery发送短信倒计时实现代码详解编程语言
- Jquery 给Js动态新添加的元素 绑定的点击事件详解编程语言
- js jquery数组去重详解编程语言
- 兼容IE与firefox火狐的回车事件(js与jquery)
- jQuery.getScript加载同域JS的代码
- js弹出框轻量级插件jquery.boxy使用介绍
- JS实现div内部的文字或图片自动循环滚动代码
- js点击出现悬浮窗效果不使用JQuery插件
- JS将所有对象s的属性复制给对象r(原生js+jquery)
- 自己使用js/jquery写的一个定制对话框控件
- Jquery+asp.net后台数据传到前台js进行解析的方法
- 图片放大镜jquery.jqzoom.js使用实例附放大镜图标