专栏首页令仔很忙新手学JavaScript(三)----超酷消息警告框插件(SweetAlert)

新手学JavaScript(三)----超酷消息警告框插件(SweetAlert)

今天给大家推荐一款不错的超酷消息警告框–SweetAlert;SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap。它的提示框不仅美丽动人,并且允许自定义,支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。和传统的alert相比:

SweetAlert 能在页面自动居中,支持桌面环境,移动端和平板,并且高度自定义。接下来看看它的具体使用!

HTML


首先引入相应的js和css,该插件不需要jQuery插件的支持:

 <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/499/ixc5vbvz/sweetalert.css"/>
 <script src="http://sandbox.runjs.cn/uploads/rs/499/ixc5vbvz/sweetalert.min.js"></script>

然后放置6个不同的按钮:

                <div class="demo_1">
                    基本示例:<button>点击这里</button> 
                </div>
                <div class="demo_2">
                    提示成功:<button>点击这里</button> 
                </div>
                <div class="demo_3">
                    提示失败:<button>点击这里</button> 
                </div>
                <div class="demo_4">
                    提示确认:<button>点击这里</button> 
                </div>
                <div class="demo_5">
                    定义内容:<button>点击这里</button> 
                </div>
                <div class="demo_6">
                    确认输入:<button>点击这里</button> 
                </div>

JavaScript


定义js事件:

            $(function() {
                $(".demo_1 button").click(function() {
                    swal("这是一个信息提示框!");
                });
                $(".demo_2 button").click(function() {
                    swal("Good!", "弹出了一个操作成功的提示框", "success");
                });
                $(".demo_3 button").click(function() {
                    swal("OMG!", "弹出了一个错误提示框", "error");
                });
                $(".demo_4 button").click(function() {
                    swal({
                        title: "您确定要删除吗?",
                        text: "您确定要删除这条数据?",
                        type: "warning",
                        showCancelButton: true,
                        closeOnConfirm: false,
                        confirmButtonText: "是的,我要删除",
                        confirmButtonColor: "#ec6c62"
                    }, function() {
                        $.ajax({
                            url: "do.php",
                            type: "DELETE"
                        }).done(function(data) {
                            swal("操作成功!", "已成功删除数据!", "success");
                        }).error(function(data) {
                            swal("OMG", "删除操作失败了!", "error");
                        });
                    });
                });

                $(".demo_5 button").click(function() {
                    swal({
                        title: "Good!",
                        text: '自定义<span style="color:red">图片</span>、<a href="#">HTML内容</a>。<br/>5秒后自动关闭。',
                        imageUrl: "images/thumbs-up.jpg",
                        html: true,
                        timer: 5000,
                        showConfirmButton: false
                    });
                });

                $(".demo_6 button").click(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("棒极了!", "您填写的是: " + inputValue, "success");
                    });
                });
            });

API


参数

描述

默认值

title

提示框标题

-

text

提示内容

-

type

提示类型,有:success(成功),error(错误),warning(警告),input(输入)。

-

showCancelButton

是否显示“取消”按钮。

-

animation

提示框弹出时的动画效果,如slide-from-top(从顶部滑下)等

-

html

是否支持html内容。

-

timer

设置自动关闭提示框时间(毫秒)。

-

showConfirmButton

是否显示确定按钮。

-

confirmButtonText

定义确定按钮文本内容。

-

imageUrl

定义弹出框中的图片地址。

-

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 深入理解HashMap(及hash函数的真正巧妙之处)

    原文地址:http://www.iteye.com/topic/539465 Hashmap是一种非常常用的、应用广泛的数据类型,最近研究到相关的内容,就...

    令仔很忙
  • 收费系统——问题集锦(一)

           1、收费系统中将查询到的数据导出为Excel候,会出现有的日期变成######

    令仔很忙
  • Web前端----Javascript模块化

    一提到模块化,也许我们首先想到的是做项目的时候进行模块设计,按照功能划分不同的模块,最后通过模块的选择和组合组成最终的产品;那把模块化的思想放到前端页面,js...

    令仔很忙
  • vue笔记5 vueJS中的内置指令

    v­-cloak一般与display:none进行结合使用 作用:解决初始化慢导致页面闪动的最佳实践

    bamboo
  • Vue子组件调用父组件的方法

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    多凡
  • H5学习从0到1-H5的表单(11)

    input:输入域,type属性可以设置text,password,button等不同的属性

    一墨编程学习
  • link 链表反转

    输入: a -> b -> c -> d -> e -> f  输出: b -> a -> d -> c -> f -> e

    阳光岛主
  • python中函数的序列传参,列表拆解传参、字典拆解传参

    其实在使用列表传参的时候比较简单,只需要将实际的列表作为参数传入到调用的函数中的时候,在列表变量前加上一个星号*即可把某个列表拆分成多个参数传入到自定义函数中。...

    刘金玉编程
  • Codeforces Round #544 (Div. 3) F1. Spanning Tree with Maximum Degree(bfs)

    题目链接:http://codeforces.com/contest/1133/problem/F1

    Ch_Zaqdt
  • ​OpenGL 学习系列---投影矩阵

    OpenGL 在观察空间转换到裁剪空间时,需要用到投影矩阵。而在着色器脚本中,也需要提供一个投影矩阵给对应的 u_ProjectionMatrix变量。

    glumes

扫码关注云+社区

领取腾讯云代金券