sweetalert api中文开发文档和手册
来源:互联网 发布:潍柴网络采购平台 编辑:程序博客网 时间:2024/06/05 16:10
- 基本消息消息弹窗
swal("Here's a message!")
- 下面有文字的标题弹窗
swal("Here's a message!", "It's pretty, isn't it?")
- 一个成功的消息弹窗
swal("Good job!", "You clicked the button!", "success")
- 一个警告消息,其功能附加到“确认”按钮的弹窗
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");});
- 并通过传递一个参数,你可以执行别的“取消”
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"); }});
- 带有自定义图标
swal({ title: "Sweet!", text: "Here's a custom image.", imageUrl: "images/thumbs-up.jpg"});
- 自定义HTML消息
swal({ title: "HTML <small>Title</small>!", text: "A custom <span style="color:#F8BB86">html<span> message.", html: true});
- 带有自动关闭计时器的消息的弹窗
swal({ title: "Auto close alert!", text: "I will close in 2 seconds.", timer: 2000, showConfirmButton: false});
- 替换“提示”功能
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");});
- 使用加载器(例如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);});
- 你也可以改变SweetAlert的主题css
<link rel="stylesheet" type="text/css"href="dist/sweetalert.css"><link rel="stylesheet" type="text/css"href="themes/twitter.css">
安装
- 通过引用必要的文件来初始化插件:
<script src="dist/sweetalert.min.js"></script><link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
- 页面加载后调用SweetAlert函数
swal({ title: "Error!", text: "Here's my error message!", type: "error", confirmButtonText: "Cool"});
配置
这里是你可以使用的键,如果你传递一个对象到sweetAlert:
modal中文翻译是模态框 ,次文档为了理解容易,现在统一翻译为动态弹出框
方法举例
SweetAlert还提供了一些简单的方法,你可以调用:
一个实例
<script> $(document).ready(function () {//删除 $(document).on('click', '[id=ApiManagement_del]',function () {var id = $(this).attr('rel'); swal({ title: "您确定要执行此操作吗?",// text: "删除后将无法恢复,请谨慎操作!", type: "warning", showCancelButton:true, confirmButtonColor:"#DD6B55", confirmButtonText:"确定", closeOnConfirm:false },function () { $.ajax({ url:"{:U('App_admin/ApiManagement/del')}", data: { app_api_id: id }, type: 'post', cache:false, success:function (msg) {if (msg.code === 1) { swal("删除成功!", "", "success"); $('.confirm').click(function () { //额外绑定一个事件,当确定执行之后返回成功的页面的确定按钮,点击之后刷新当前页面或者跳转其他页面 location.reload(); }); } else { swal("删除失败!", "", "error"); $('.confirm').click(function () { // location.reload(); }); } } }); }); }); });</script>
阅读全文
0 0
- sweetalert api中文开发文档和手册
- sweetalert api中文开发文档和手册
- paip.c++ 开发 api 手册文档总结
- smarty3.0中文手册文档API及使用指南
- smarty3.0中文手册文档API及使用指南
- smarty3.0中文手册文档API及使用指南
- smarty3.0中文手册文档API及使用指南
- smarty3.0中文手册文档API及使用指南
- SweetAlert相关API
- Freemarker 中文API手册
- 【D3 API 中文手册】
- Swfupload 技术文档和中文API
- Highcharts 中文API 中文手册
- Swiper说明&&API手册 【中文手册Swiper】
- Twitter API中文文档
- Twitter API中文文档
- JFreeChart API中文文档
- JFreeChart API中文文档
- c++ 文件读取函数总结
- js取整数、取余数的方法
- sql注入原理及实验
- Kali linux渗透测试(三)
- 30分钟快速搭建springcloud分布式基础架构
- sweetalert api中文开发文档和手册
- java网站页面静态化方案
- Unity X C#小记之Array/List/Dictionary的杂七杂八
- 虚拟机新建linux后进入root权限出现: su: Authentication failure
- 计算机网络之五层协议
- 激活010Editor
- Windows Practice_文件_文件分割器(一)
- 一位Acmer过来人的经验
- Apache-DBCP数据库连接池解读