SweetAlert入门教程
来源:互联网 发布:万能数据恢复大师 编辑:程序博客网 时间:2024/05/16 23:50
SweetAlert入门教程
前些天在做后台管理系统,在用户交互这块(弹窗、提示相关),用了一款还不错的插件SweetAlert(一款原生js提示框,允许自定义,支持设置提示框标题、提示类型、确认取消按钮文本、点击后回调函数等等), 效果挺好的,简单写一下用法。
把大象装冰箱,总共分三步:
第一步:下载(引用)
有三种方式可供选择:
1.通过bower安装:
$ bower install sweetalert
2.通过npm安装
$ npm install sweetalert
3.我用的是最简单粗暴的方式3:
下载sweetAlert的CSS和JavaScript文件。地址点我
从github上拿下来的sweetalert-master是有带例子的,我们只需要其中两个文件:
dist下的sweetalert.min.js和sweetalert.css(下面引用路径是我自己的)。
<script src="js/sweetalert.min.js"></script><link rel="stylesheet" type="text/css" href="css/sweetalert.css"/>
第二步: 需要在页面加载完成后调用sweetalert函数:
swal({ title: "OK!", text: "Nice to meet you!", type: "success", confirmButtonText: "HaHa" })
第三步,就是写需要实现的具体功能了。下面,我来举几个栗子(代码直接从编辑器拿过来,模态框的图懒得贴了,效果可以自己试试。):
- html代码:
基本信息:<button id="demo1">试一试</button> <br />带有文字的标题:<button id="demo2">试一试</button> <br />成功提示:<button id="demo3">试一试</button> <br />带有“确认”按钮的功能的警告消息:<button id="demo4">试一试</button> <br />通过传递参数,您可以执行一些其他的事情比如“取消”。:<button id="demo5">试一试</button> <br />一个有自定义图标的消息:<button id="demo6">试一试</button> <br />自定义HTML信息:<button id="demo7">试一试</button> <br />更换“提示”功能: <button id="demo9">试一试</button> <br />使用加载程序(例如,用于AJAX请求): <button id="demo10">试一试</button> <br />
- js代码(原谅我可耻的用了原生):
document.getElementById("demo1").onclick = function() { swal("这是一个信息提示框!")};document.getElementById("demo2").onclick = function() { swal("这是一个信息提示框!", "很漂亮,不是吗?")};document.getElementById("demo3").onclick = function() { swal("干得好", "你点击了按钮!", "success")};document.getElementById("demo4").onclick = function() { swal({ title: "你确定?", text: "您将无法恢复这个虚构的文件!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "是的,删除!", closeOnConfirm: false }, function() { swal("删除!", "您的虚构文件已被删除!", "success") })};document.getElementById("demo5").onclick = function() { swal({ title: "你确定?", text: "您将无法恢复这个虚构的文件!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "是的,删除!", cancelButtonText: "不,取消", closeOnConfirm: false, closeOnCancel: false }, function(isConfirm) { if (isConfirm) { swal("删除!", "您的虚构文件已被删除!", "success") } else{ swal("取消!", "您的虚构文件是安全的!", "error") } })};document.getElementById("demo6").onclick = function() { swal({ title: "Sweet!", text: "这里是自定义图像!", imageUrl: "img/thumbs-up.jpg" })};document.getElementById("demo7").onclick = function() { swal({ title: "HTML <small>标题</small>!", text: "A custom <span style='color:pink'>html<span> message.", html: true })};document.getElementById("demo8").onclick = function() { swal({ title: "自动关闭警报!", text: "2秒后自动关闭", timer: 2000, showConfirmButton: false })};document.getElementById("demo9").onclick = function() { swal({ title: "请输入!", text: "填写一些信息", type: "input", showCancelButton: true, closeOnConfirm: false, animation: "slide-from-top", inputPlaceholder: "请输入..." }, function(inputValue) { if (inputValue === false) { return false; } if (inputValue === "") { swal.showInputError("内容不能为空!"); return false; } swal("Nice!", "你输入的是:" + inputValue, "success") })};document.getElementById("demo10").onclick = function() { swal({ title: "AJAX请求实例", text: "提交运行Ajax请求", type: "info", showCancelButton: true, closeOnConfirm: false, showLoaderOnConfirm: true }, function() { setTimeout(function() { swal("AJAX请求完成!"); }, 2000) })};
下面说一些可能会频繁使用的配置项:
好啦,就这样吧。其实sweetalert2也已经出了,支持响应式,功能也更加强大,但本着够用就好的原则,还是先用的第一版。
参考:
源地址:http://t4t5.github.io/sweetalert/
中文:http://mishengqiang.com/sweetalert/
github地址:https://github.com/t4t5/sweetalert
阅读全文
3 0
- SweetAlert入门教程
- sweetalert
- SweetAlert
- SweetAlert详解
- sweetalert demo
- SweetAlert详解
- SweetAlert详解
- SweetAlert用法
- SweetAlert插件
- sweetalert使用
- Sweetalert使用说明
- SweetAlert-js应用
- 基础级 - sweetAlert
- sweetalert弹框使用
- SweetAlert相关API
- Android studio SweetAlert for Android
- SweetAlert简单使用,弹出对话框
- tp5 sweetalert美化弹框
- [数据结构-栈]栈的基本操作&括号匹配
- Search in Rotated Sorted Array问题及解法
- 为什么说Tcl是最好的语言?
- 【《Real-Time Rendering 3rd》 提炼总结】(四) 第五章 · 图形渲染与视觉外观 The Visual Appearance
- 读Zepto源码之操作DOM
- SweetAlert入门教程
- OSGi简介
- 输入输出
- RAC添加新节点绕过dbca新建实例的方法
- Ubuntu下GTK的安装、编译和测试
- 2017计蒜之道程序设计大赛初赛第五场
- c语言--矩阵逆置
- C++ MOOC 西安交通大学 中国大学生MOOC网 期末考试
- Torch SpatialAveragePooling 实例