漂亮的提示框SweetAlert使用教程
一、简介
所使用过的弹出框插件,SweetAlert是最好用的。发展至今,已经有两个版本,一个是原版 t4t5/sweetalert , 一个是分支版 limonte/sweetalert2 ,更新相对较快,听说更好看。
SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap。现在都已经升级到2.0
它的提示框不仅美丽动人,并且允许自定义,支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。
使用非常简单,示例如下
swal("Hello world!");
swal("Here's the title!", "...and here's the text!"); //包含子标题
swal("Good job!", "You clicked the button!", "success");//包含图标
二、t4t5/sweetalert
github地址:https://github.com/t4t5/sweetalert
官方文档: https://sweetalert.js.org/docs/
中文:
http://mishengqiang.com/sweetalert/
http://mishengqiang.com/sweetalert/
http://www.sucaihuo.com/jquery/12/1241/demo/
文档中没有浏览器兼容提示,只能自己测试了
三、limonte/sweetalert2
github地址:https://github.com/limonte/sweetalert2
在线实例:https://limonte.github.io/sweetalert2
中文:http://www.jq22.com/jquery-info8169
浏览器兼容
| IE11* | Edge | Chrome | Firefox | Safari | Opera | Android Browser* | UC Browser* |
|---|---|---|---|---|---|---|---|
* ES6 Promise polyfill should be included, see usage example.
SweetAlert2 不再支持ie10及以下版本
漂亮的提示框SweetAlert使用教程的更多相关文章
- 基于jquery的响应式提示框SweetAlert
介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等.交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果.不过本插件至少支持IE9+.使用方式 ...
- SweetAlert – 替代 Alert 的漂亮的提示效果
Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果.SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒.另外提 ...
- 提示框插件SweetAlert
SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框, 它将提示框进行了美化,并且允许自定义, 支持设置提示框标题.提示类型.内容展示图片.确认取消按 ...
- sweetalert提示框
文档 sweetalert Api:http://t4t5.github.io/sweetalert/ 开源项目源码:https://github.com/t4t5/sweetalert 在文件中首先 ...
- Qt QLineEdit 漂亮的搜索框 && 密码模式 && 格式化输入 && 提示文字 && 选择内容并移动 && 清除全部输入
先上一个漂亮的搜索框效果图, 输入搜索文本效果, 点击搜索图标效果: //实现代码 void MainWindow::iniLineEdit() { ui->lineEdit->setPl ...
- 33、Flask实战第33天:sweetalert提示框
这节我们继续优化,接收到返回值,我们在前端做一些处理,如:密码修改成功,弹出一个成功的提示框.这个提示框我们采用sweetalert 其中xtalert.js是对上面两个文件的一个封装,使得我们用sw ...
- jQuery EasyUI 教程-Tooltip(提示框)
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta c ...
- Android第三方开源对话消息提示框:SweetAlertDialog(sweet-alert-dialog)
Android第三方开源对话消息提示框:SweetAlertDialog(sweet-alert-dialog) Android第三方开源对话消息提示框:SweetAlertDialog(sweet- ...
- JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
随机推荐
- 移动端H5制作安卓和IOS的坑 持续更新...
移动端H5制作安卓和IOS的坑 持续更新... 前言:最近参加公司的H5页面创意竞赛,又遇到不少页面在不同系统上的坑.踩坑之余,觉得很多之前遇到的知识点都忘了,索性开一篇博文,把这些坑都统一归纳起来, ...
- linux上kafka模拟客户端发送、接受消息
producer 消息的生成者,即发布消息 consumer 消息的消费者,即订阅消息 broker Kafka以集群的方式运行,可以由一个或多个服务组成,服务即broker zook ...
- C++反汇编第五讲,认识多重继承,菱形继承的内存结构,以及反汇编中的表现形式.
C++反汇编第五讲,认识多重继承,菱形继承的内存结构,以及反汇编中的表现形式. 目录: 1.多重继承在内存中的表现形式 多重继承在汇编中的表现形式 2.菱形继承 普通的菱形继承 虚继承 汇编中的表现形 ...
- HiveSchemaTool-Parsing failed. Reason- Unrecognized option- -dbType mysql
版本: Hive2.1 在linux上部署Hive的时候,初始化元数据的时候,出现HiveSchemaTool:Parsing failed. Reason: Unrecognized option: ...
- 关于C++编译链接和模板函数
一,关于编译链接编译指的的把编译单元生成目标文件的过程链接是把目标文件链接到一起的过程编译单元:可以认为是一个.c或者.cpp文件.每个编译单元经过预处理会得到一个临时的编译单元.预处理会间接包含其他 ...
- CORS预检请求详谈
引言 最近在项目中因前后端部署不同地方,前端在请求后端api时发生了跨域请求,我们采用CORS(跨域资源共享)来解决跨域请求,这需要前后端的配合来完成.在这一过程中,后端支持了CORS跨域请求后,前端 ...
- Angular之指令Directive系列
项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐Angualr实战学习视频大漠穷秋 Angular实战 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构 ...
- Java内存管理(一)
好久没有写博客了,深感羞愧,今天聊一下Java的内存管理 简单介绍 Java相比传统语言(C,C++)的一个优势在于其能够自己主动管理内存.从而将开发人员管理内存任务剥离开来. 本文大体描写叙述了J2 ...
- 【ODPS】TableTunnel单线程简单下载事例
ODPS Tunnel是ODPS的数据通道,用户能够通过Tunnel向ODPS中上传或者下载数据.眼下Tunnel仅支持表(不包含视图View)数据的上传下载. 主要接口 描写叙述 TableTunn ...
- RT5350的uvc驱动支持yuv格式摄像头成功
请尊重别人的劳动成果 转载请务必注明出处 今天在rt5350的板子上,成功将仅仅支持yuv格式的usb camera摄像头执行了.採用的是mjpeg streamer ,须要libjpeg库支持yuv ...