漂亮的提示框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开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
随机推荐
- 解决zabbix中文显示乱码问题
中文显示问题,图表乱码 解决办法: [root@zabbix ~]# cd /usr/share/zabbix/include/ [root@zabbix include]# vim locales. ...
- Linux正则表达式语法
基本组成部分: 正则表达式的基本组成部分. 正则表达式 描述 示例 \ 转义符,将特殊字符进行转义,忽略其特殊意义 a\.b匹配a.b,但不能匹配ajb,.被转义为特殊意义 ^ 匹配行首,awk中,^ ...
- MySQL用户管理及SQL语句详解
1.1 MySQL用户管理 1.1.1 用户的定义 用户名+主机域 mysql> select user,host,password from mysql.user; +--------+--- ...
- 程序员的自我救赎---3.2:SSO及应用案例
<前言> (一) Winner2.0 框架基础分析 (二)PLSQL报表系统 (三)SSO单点登录 (四) 短信中心与消息中心 (五)钱包系统 (六)GPU支付中心 (七)权限系统 (八) ...
- 安装phpnow服务[Apache_pn]提示失败的解决方法
win 7/win 8/Win10 phpnow提示"安装服务[Apache_pn]失败"错误解决办法汇总 常常在安装phpnow的时候,提示"安装服务 [ Apache_pn ] 失败&q ...
- 怎样解决jsp:include标签在包括html文件时遇到的乱码问题
在一个JSP页面中,经常须要包括还有一个文件,JSP为我们提供了jsp:include标签能够完毕这个功能,比方:<jsp:include page="some.jsp"&g ...
- POJ 2533 Longest Ordered Subsequence(DP 最长上升子序列)
Longest Ordered Subsequence Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 38980 Acc ...
- NBUT 1217 Dinner
[1217] Dinner 时间限制: 1000 ms 内存限制: 32768 K 问题描写叙述 Little A is one member of ACM team. He had just won ...
- Office 365 机器人(Bot)开发入门
作者:陈希章 发表于 2017年7月29日 前言 作为人工智能技术的一个主要的表现形式,这些年机器人(bot)的应用越来越广泛.不管是有实物的,还是纯软件的,现在的机器人技术应该说已经走入寻常百姓家了 ...
- C#开发微信门户及应用(47) - 整合Web API、微信后台管理及前端微信小程序的应用方案
在微信开发中,我一直强调需要建立一个比较统一的Web API接口体系,以便实现数据的集中化,这样我们在常规的Web业务系统,Winform业务系统.微信应用.微信小程序.APP等方面,都可以直接调用基 ...